The Process

We kicked off the project with the Mozilla team with the goal to design template pages that will help users understand everything that Mozilla does, and that it's much more than just a browser!

We started off the project by auditing key pages from the existing site in this Web Audit and interview different teams from Mozilla to find out what their goals were for these content pages. We used what we learned to identify ideas and focus in Opportunity Sketches and open up the problem to hear the team's thoughts on all the possibilities.

With a list of great ideas, it was time to see how they came together into a flow in Lo-fi Sketches! We explored multiple page layouts to discover the flow and the focus of the content we wanted to highlight. The team was starting to get excited about having templates that could be used in the future!

After figuring out the direction we wanted to take with the layout, it was time for Hi-fi Wireframes. This is where we worked through the detailed layouts of each page. Through five rounds of wires and great feedback we nailed the templates for the About Page, SmartOn, B2B and more! We also design out the patterns for the mobile screens.

User Testing was crutial and very interesting to hear the testers thoughts. It was really excited to hear that after seeing the wireframes, they had a drastically better understand of what Mozilla does! We were also able to learn what people thought about the navigation and move into Verify testing to get some quantitative data.

After working through three different Visual Explorations, we ended up on our final Design Layouts that really shows off the maker feel with the curved and angled lines. We create a strong visual language with the hero image and icons that the team is excited to implement.

It's been an awesome experience. We loved the energy and engagement that your team brought to the project. We know it's not easy to get everyone moving in the same direction and quickly making decisions, and you guys did a stellar job on both. At the end, we feel super proud of the work we did together and can't wait for the new site to roll out and help the world see what Mozilla is all about!