Change.org Mobile Web
Change.org's mobile audience was growing at a phenomenal pace, and the existing mobile website was in need of a substantial overhaul. I worked together with a small group of developers to build a new experience that was mobile-friendly, high-performing, and aligned with Change.org's visual brand.
Change.org being a startup, I wore many hats on this project, including product, UX/visual design, and front-end development.
Role: Design, front-end development (Haml, Less, Knockout.js).
The current mobile site had diverged significantly from our desktop experience in regards to visual consistency and quality. Thus, one of my main priorities in the redesign 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.
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 the person icon to the supporter count.
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 grouped them into sections for a more organized layout. These wider fields could also better accommocate the long names and addresses commonly found in Change.org's 13 localized 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, where the order of the form lead 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. To resolve this, we placed country selection above the address fields.
Since we were using grouped field and placeholder text, finding a good location for error messages required some thought. My solution was to create a 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.
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 on 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.
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.
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 drastically 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.