Aligning Mozilla Foundation’s website with company’s strategy while improving user experience
My role: UX Designer
Main contributions to this project: 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.
Problem statement
Mozilla Foundation had a strategic shift, but our website lagged behind in capturing the essence of this change. From user testing sessions, we discovered some interesting insights:
- Participants were seeking to understand Mozilla Foundation’s mission from our homepage but left with unanswered questions.
- At a glance, they had the impression that Mozilla Foundation was exclusively focused on community building, missing the broader narrative.
- The homepage resonated primarily with people already familiar with Mozilla’s movement, lacking universal appeal.
Based on those insights, we decided to do a “site refresh” by changing the site’s information architecture, navigation labels and UX/UI.
Our goals were:
- To clearly communicate Mozilla Foundation’s purpose and the benefits it offers to our audience.
- To align the content and structure of our site with our present strategy and mission.
- To make it easier for our diverse audiences to find the information they need.
- To improve the discoverability of new and relevant content.
Process
I Discovery Phase
My teammates conducted a thorough audit of the existing pages and crafted a comprehensive site map, providing us with a clear and detailed overview of the current state of the website.
I conducted an in-depth analysis of our analytics to understand the navigation patterns of our audience on the website. This exploration revealed that our homepage and initiative pages had lots of traffic, revealing where our impact could be most influential.
Additionally, I gathered benchmarks to get insights into the practices of other organizations.
After that, I facilitated internal stakeholder interviews, engaging with 16 staff members across teams.
The primary objective was to gain an understanding of staff perceptions regarding our Foundation’s website and its supported audiences. These interviews provided valuable guidance for improving the site user experience. We took into account not only the external audience’s perspective but also the viewpoint of the staff who used the site to interact with their external audience, including partners, potential fellows, awardees, and other stakeholders.
II Planning Phase: UX
With all the insights above in mind, I started the UX process. At this stage I 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 moved on to the UI stage. Another designer on the team was the responsible for the UI implementation and she did an excellent job to make sure our pages looked great. I then worked closely with engineers to review code changes and make sure the implementation was as close to mockups as possible.
Conclusion
This project was successful. Through a comprehensive approach involving analytics, additional staff interviews, and user testing, we achieved remarkably positive outcomes as highlighted below:
- 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 felt inspiring to people. Staff liked having profile pictures in the blog posts because it helped them to connect the work with the people who did it. This personal touch is crucial for a non-profit organization like Mozilla Foundation.
“Good job at showcasing individuals on the blog features on homepage.”
– P5 (staff interview)