Mozilla: The future of browsing

Designing a customizable browser experience for Gen Z students in collaboration with Mozilla.

Research and Discovery

Competitive Analysis

We analyzed five competitors to gain a better understanding of the existing browser landscape, identify opportunities for differentiation, and uncover areas for improvement within current browsing experiences

Browsers analyzed: Safari, Google Chrome, Microsoft Edge, Brave and DuckDuckGo.

Key Insights:

• Privacy: Most browsers are increasingly focusing on privacy features making it harder to differentiate solely through privacy


• Ecosystems: Some competitors benefit from strong ecosystem integration, and info discovery


• AI: Browers are integrating AI-powered features into search, productivity, and info discovery


• Opportunity: Limited customization and flexible workflows across competitors creates opportunities for a more personalized browsing experience

Personas and Journey Maps

Persona: Olivia’s persona captures the key needs, goals, and frustrations of users when searching for and managing information, providing a foundation for our design decisions.

Journey Map: Olivia's journey highlights her frustration with information overload and the limitations of her current browser. Her experience becomes more positive as she discovers built-in content summarization and advanced privacy customization in the new browser.

Design Process

Ideation

Each team member individually generated ideas based on our research findings, then came together to discuss and prioritize concepts based on user needs, feasibility, and the two-week project timeline.

Design Goals

Our design goals were guided by our research findings and focused on creating a more efficient, personalized, and user-controlled browsing experience for Gen Z students. These goals helped guide our design decisions and prioritize the features explored throughout the project.

01

Prioritize Desktop Experience

Because our target audience primarily uses desktop devices for assignments, and research, we prioritized creating a desktop browsing experience.

02

Streamline Resource Management

Introduce flexible tab organization to reduce clutter and enhance productivity.

03

Improve Information Discovery

Use AI-powered search and summarization tools to reduce search time and information overload.

04

Create Flexible Onboarding

Allow users to configure their privacy, themes, language, and extensions while maintaining transparency and user control.

Prototyping and Testing

Testing Methods

We conducted two rounds of usability testing with Gen Z students aged 18–28. The first round was exploratory, with a facilitator walking participants through the initial prototype. The second round was task-based, allowing participants to interact with the prototype independently.

The think-aloud protocol was used during both rounds to understand the participants' thought processes and to identify usability issues. Sessions were recorded and documented by a designated note-taker, allowing us to analyze recurring issues and refine the prototype.

Testing Goals

• Usability: Users experience 2 or fewer errors while completing tasks
• Learnability: Users understand how to navigate the system
• Task completion: Users can successfully complete the tasks

Usability Tasks

We created five task-based scenarios focused on smart search, AI tools, onboarding, and flexible tab management. Tasks were evaluated as Pass, Indirect, or Fail, while usability issues were assessed based on their severity and frequency.

Example task: Now that you've completed a search, you have a tab open. Create a new folder in the tab manager and move your tab into that folder.

Participants

• Round 1: 5 participants
• Round 2: 3 new participants

Low-fi Prototype

Mid-fi Prototype: Iteration 1

This prototype was evaluated during Phase 1 of our exploratory usability testing.

Mid-Fi Prototype: Iteration 2

This prototype was evaluated during Phase 2 of our task-based usability testing.

Key Findings and Refinements

Tab Management

Finding

Users wanted more control over organizing tabs, including additional categories, colour coding, and automated sorting.

Refinement

Enhanced filtering and organization options were incorporated.

AI Features

Finding

Users liked AI summaries and video conversion but wanted the option to use traditional search results.

Refinement

Users can switch between AI-powered and traditional search views.

Search & Navigation

Finding

Users found some search card labels and icons confusing and were unclear about the purpose of the right sidebar.

Refinement

The right sidebar was removed and search cards and navigation were refined.

Onboarding

Finding

Users wanted clearer guidance around the tab manager, AI tools, and privacy settings.

Refinement

Tutorial pop-ups were added and the onboarding experience was revised.

Upon launching the browser for the first time, users are guided through a quick and intuitive onboarding experience. They can personalize their browser by selecting a theme, preferred language, and initial privacy preferences, while also receiving recommended extensions. After onboarding, privacy settings remain easily accessible through the customizable dropdown in the main navigation bar, with additional controls available through the dedicated Privacy and Settings page.

When searching, users can switch between Smart Search and regular search. Smart Search provides an image preview and AI-generated summary alongside each result, helping users quickly determine whether a page is worth exploring. After selecting a result, users can generate a summary in text, audio, or video format, ask the AI assistant questions, or explore related topics. An onboarding tutorial is also available to guide users through these features.  

Our integrated tab manager provides a streamlined way to organize and manage open tabs. Users can group tabs into custom folders within a collapsible sidebar and personalize each folder with an image, title, and colour. Web pages can also be dragged directly into the sidebar and assigned to a folder, keeping important information accessible without cluttering the tab bar.

Next Steps

Future Iterations

• Create a responsive experience that adapts seamlessly across devices
• Integrate more organizational features in the tab manager (e.g., sub-folders)
• Integrate apps and extensions

Reflection

As this project was completed within a two-week sprint, many of the challenges we faced were a result of our time constraints. Due to this, we were unable to conduct interviews with our target users and instead relied solely on secondary research to inform our understanding of their needs, behaviours, and pain points. While this provided some valuable insights, conducting primary research would have allowed us to develop a deeper understanding of our target users and validate our assumptions more directly.

Our scope for this project was also affected by our time constraints and Figma’s prototyping limitations. During the initial ideation phase, we generated several ideas that we were interested in exploring. However, we were unable to explore them and had to adjust the concepts to ensure they were feasible and that we could complete them within our timeframe.

Finally, our usability testing was limited by our small sample size. While the testing provided valuable insights into the usability of our design, additional testing with a larger and more diverse group of users would have allowed us to identify usability issues better and refine both the browser experience and proposed features.