Aligning Mozilla Foundation’s website with current strategy while improving user experience for the audience
My role: UX/UI Designer
My main contributions to this project were on research throughout the process (together with my team), UX of the homepage and “what we do” sections, and design QA during implementation (doing code changes reviews and working with engineers to solve issues). I collaborated on the other pieces of the project by giving feedback and supporting my teammates.
Problems we were trying to solve
Mozilla Foundation strategy had changed and our site didn’t reflect the new strategy. We also learned from a previous user testing session that:
- Participants tried to understand what Mozilla Foundation did but found no answer in our homepage
- At a glance, they got the feeling that Mozilla Foundation is focused only on community building
- The homepage seemed to only be interesting to those already heavily involved in Mozilla’s movement
The proposed solution
We decided to do a “site refresh” by changing the site’s information architecture, navigation labels and UX/UI. It wasn’t a complete redesign but a change of some important structures that allowed for better usability.
Our goals were:
- To make clear to our audience what Mozilla Foundation does and how we can benefit them
- To align our site content and structure with our current strategy and mission
- To make it easier for our diverse audiences to find the information they need
- To improve discoverability of new content
Process
I Discovery Phase
We audited the current pages and developed a site map of the current state of the site so we had a clear picture of the present state of the site.
Then, we took a look at our analytics to understand how our audience navigated throughout the site. We learned that our homepage and initiative pages were the ones where we could have the most impact. Although the refresh was across the entire site, we decided to put more energy into those two sections. This combined with some work we had done in the past to unify all the sites into one property had paid off. By 2019 our traffic was almost double that of the previous year.
We also collected benchmarks to have a picture of what other organizations were doing and held internal stakeholder interviews with 16 staff members from different teams.
The goal of those stakeholder interviews was to understand staff perceptions of our Foundation website and the audiences it supported. Those interviews gave us some extra guidance on how to improve our site’s user experience, not only from the audience’s perspective but also from the staff’s perspective, who used the site to interact with their own external audience (partners, potential fellows and awardees and others).
II Planning Phase: UX
With all the insights above in mind, we started the UX process. At this stage we worked closely with engineers to figure out when it made sense to create new CMS components and when it was better to reuse existing ones.
III Delivery Phase: UI and engineer implementation
After feedback rounds were finished we went through the UI stage. We then worked closely with engineers to review code changes and make sure the implementation was as close to mockups as possible.
Results
The goals of the test were:
- To determine if users could clearly understand what Mozilla Foundation did, our mission, and how they could help
- To understand if people thought our content was easier to find and share
- To make the site inspiring
We looked into analytics, did a second round of staff interviews, as well as some user testing and got some very positive results:
- Participants understood our top menu (language was very clear) and they easily found the information they were looking for
“I like this menu, actually, it is (well…as far as the questions you’re asking) it is very right to it.”
– P2 (user testing)
- Participants understood the mission and goal of Mozilla Foundation which included our focus on internet health, particularly on trustworthy AI and how these concepts apply to people’s day to day lives
“I can imagine my parents coming to this page and not feeling lost.”
– P4 (staff interview)
- The site is more inspiring: having profile pictures attached to blog posts had a very positive impact within staff – they liked seeing their colleagues and feel those pictures help to attach a face to their work. To a non-profit organization like Mozilla Foundation this human component is very important
“Good job at showcasing individuals on the blog features on homepage.”
– P5 (staff interview)