Redesigning Mozilla’s Contribute Page: A UX Overview
The previous Contribute page on Mozilla.org received around 100,000 views a month and had a 70% bounce rate.
For page engagements just over 1% of those viewers clicked on the “Get Involved” button, taking them to the Mozilla Activate page.
We wanted to change that.
We began this redesign project with a discovery phase. As a result of the strict environment the page would live in, all of our assumption testing had to be carried out through upfront discovery research as opposed to evaluative A/B testing post design.
We started to collate previous findings and analysis, drawing conclusions from past efforts like the Contribute Survey Analysis carried out in 2019.
With a broad idea of what visitors are looking for we looked internally with stakeholder interviews. A series of one to one remote meetings with Mozilla community staff were scheduled to uncover their hopes for a redesign and what they felt the current offering lacked. From this, two themes emerged:
- A need to describe what the community and contribution look like.
- Illustrating the breadth of volunteer opportunities.
The next exercise was to address the copy of the page. Using both analytics data and stakeholder feedback a series of “content blocks” were arranged to define what content we needed and the hierarchy it belonged in. A copywriter and marketing team member would review an initial draft however this was sufficient to populate wireframes for testing purposes.
Three wireframe layouts were produced, each putting slightly more emphasis on a different element of the page. One focused on telling a story, another focused on providing the widest volunteer entry points and the final layout was tasked with being direct and minimal.
The Mozilla All Hands Event in Berlin was the perfect opportunity to gather some feedback from existing contributors. Both volunteers and staff were asked upfront questions about their expectations of a volunteer page before being presented with large printouts of each wireframe for review.
The community feedback was overwhelming with an emerging trend. “Story” was appreciated, however it was sufficient to know it was there “somewhere”. Conversely, volunteer opportunities needed to be clear and relatively upfront.
There was one additional research method we could utilise before casting some of our findings into design, remote unmoderated usability testing. With the ability to target participants with existing volunteer experience, we presented three wireframes to separate groups, again asking upfront questions on their expectations before revealing each design.
In three key ways the findings echoed the feedback of the All Hands interviews.
- An appreciation for a little upfront story, but not too much.
- An explicit, straight-talking tone was a clear preference.
- Volunteer opportunities should not be buried within the page.
Some additional findings revealed:
- Participants liked to see the opportunities categorised as either Technical or Non Technical.
- Participants were keen to understand the time and travel investment of each opportunity.
The feedback of the following research methods gave the team a shared vision of the final product before it had been designed:
- Stakeholder interviews
- User interviews
- Guerilla usability testing
- Unmoderated remote usability testing
Merging the copy approved content with Mozilla brand guidelines, a selection of designs were delivered and shared with the team for asynchronous feedback. After a final group call and some final tweaks we had our new Contribute page design ready for development.
The page design pays various tributes to the Mozilla Community Portal, fitting, as both projects wish to serve Mozilla’s new and existing volunteer communities.
We will be monitoring the success of the page over time to determine the impact of the research-lead redesign. You can visit the new Contribute page on the Mozilla website, maybe you’ll discover something new about Mozilla when you get there!
