Change.org Mobile Website
Change.org's global audience was growing at a rapid clip, and the existing mobile website was in need of a complete overhaul.
Our small team built a brand-new experience that was mobile-friendly, high-performing, and aligned with Change.org's current brand.
Ui/UX Design · social impact · responsive web · i8ln · front-end developmentVisual Standards
The current mobile site had diverged significantly from our desktop experience in regards to visual consistency and quality. One of my main priorities in the rebuild was to unify the look-and-feel with an elevated aesthetic standard.
Using our desktop website as reference, I defined mobile-optimized specifications for layout, typography, buttons, and other components. Since we were using a live style guide, I brought these specifications into code with Haml and Less mixins.
Petition Page
The first page that we tackled was the Petition Page, the backbone of Change.org. Here users learn what the issues are, why they should care, and who can make the decisions to drive the desired outcomes.
The content on this page was already fairly well-defined, so we focused our efforts on presentation. We started by moving up the petition image and restructuring metadata and text blocks, to create a clearer information hierarchy.
Next, to improve the reading experience, we increased the number of lines before the petition description was truncated, and created a new Read More component that sat below the content.
We also wanted to reinforce the personal aspect of petitions, namely that petitions are powered by real people. We brought in the creator's location (especially relevant for local petitions), changed the word Signatures to Supporters, and added a person icon to the supporter count.
Signature Page
Once a user decides to support a petition, they move forward to the Signature Page to fill out their information. Here, our improvements were centered on the aesthetics and usability of the form.
We made the fields uniform-width, and organized them into sections. As a plus, these wider fields could also better accommodate the long names and addresses commonly found in Change.org's 15+ internationalized languages.
In addition, we made improvements to the UX for country selection. First, we replaced the awkward "Outside U.S." link with a standard drop-down.
Next, we addressed a flaw in the original design, which required users to fill out their address before they selected their country. Because address fields change per country, international users often had to go back and re-enter their information. We resolved this by placing country selection right above the address fields.
Since we were using grouped field and placeholder text, finding a good location for error messages required some innovation. My solution was to create an inline "label" that dynamically appeared when there was a form error. These made it clear where the error had occurred, and what the steps were to resolve it.
Share Page
After signing, users have the opportunity to tap into their social networks to recruit followers and friends. This step is extremely important — over half of petition views originate directly from sharing, primarily via Facebook.
With this in mind, we conceived of a new design to better encourage and facilitate sharing. We dropped Facebook's externally-hosted share dialog, and created our own sharing module that was directly integrated with Facebook’s API.
Now users could share petitions directly from Change.org using our custom interface. We provided a generous text area for a personal message, and included a summary of the petition information to reaffirm what they were sharing.
Homepage
For the homepage, we redesigned the hero area to better speak to the scale and global reach of Change.org.
The addition of the "Start a Petition" button ties into Change.org's mission statement that anyone, anywhere can create change.
For the petition summaries, we shifted to a card design that featured a larger, more prominent image. Again, to reinforce the personal aspect of petitions, we brought in the petition creator's details.
Beyond the Rebuild
As Change.org grew and evolved, so did my team’s charter. We started designing and launching our very own features, eventually taking ownership of the engagement roadmap.
One of our highest-impact launches was Petition Updates.
This was a family of features that empowered petition creators keep the conversation active by sharing news stories, media appearances, milestones, and other important updates.
This helped petition creators deepen their connection with supporters in several ways:
Keeping supporters informed on the progress of the petition, which helps validate and reinforce their support.
Helping convince potential supporters by bringing in press coverage to establish credibility and gravitas for the issue.
Providing supporters with more opportunities to help the cause — raising funds, contacting decision makers, or simply sharing the updates.
To this day, Petition Updates remains one the biggest engagement drivers on Change.org.
Petition creators continue to enthusiastically post updates, and the addition of commenting has created a place for meaningful dialogue.
Our Impact
With the new mobile website, Change.org experienced a 20% increase in the petition sign rate, and an 18% increase in the number of petition shares.
Thanks to architectural enhancements, we also saw substantially improved performance across the board.
Qualitatively, we made significant progress aligning the mobile website with Change.org's visual brand, and laid a strong foundation for its expanding mobile presence. I'm proud of what we've built, and it's been exciting to witness its continued evolution.
more design goodness