Bryant Mao

Firefox

Rethinking Personal Web Library

UX/UI, Desktop, Web

Where is my saved stuff? It's the question people always ask when browsing the web. Yet the outdated library of Firefox fails to present the data properly, leaving its user frustrated and confused. We aimed to recalibrate the experience to help people to reconnect with the web content that matters.

Challenge

In 2017 Firefox launched a project called Activity Stream, which aims to optimize the save and retrieved workflow and display all the things the user cares about in a visual and meaningful way. After prioritizing the design task with the team, we decided to start with two primary data types that affect people most: bookmark and download. We aim to explore the different mental models and behaviors around the bookmarks and download, and bringing new approaches to help people get the most out of the web assets and beyond.

My Role

I worked with 3 UX designers to design the new bookmark and download experience. I lead the research, host workshop as well as prototyping and testing.

The outdated UI of Firefox library

Approach in a Nutshell

Connecting the design to a larger experience

We know the design will eventually impact multiple touchpoints across different functional teams. So we worked together with our design folks to define the vision, scope, and setting up our workflow early on.

We conduct a competitive analysis to understand the different strategies of saving and revising from the major browsers. We host workshops to learn our user’s journey and different tactics of how they manage their downloads and bookmarks.

With what we learned, we focus our effort on key touchpoints that impact the retrieving experience most, build prototypes to test through remote testing.From there, we iterate, connect our design with other initiatives that contribute to the web retrieving experience, and present it in Mozilla’s yearly all hands.

Kickoff

Framing the unified goal and focus areas

We first sat down with key design stakeholders to discuss our vision and plan for the redesign. Our workstream focuses on two common asset types that the user encounter most - bookmark and download and defined a few guidelines to ensure we sprint toward the same experience.

Simplify the web library to make it more integrated and useful.

Unlock other touchpoints to help people to find their web assets.

Making the interaction more personal and contextual.

Research

Study the best practice of modern browsers

To better position ourselves and not reinvent the wheels, we compared library features from the mainstream browsers to identify gaps and potential opportunities to improve the experience. Findings revealed a couple of shortfalls of the current Firefox library:

There is no easy way to retrieve assets in the library quickly.

The library fails to show assets in a clear order.

Some key actions are hidden in the context menu.

Design

Mental model and behaviors on content revisiting

To dive deeper into the user's mental model of content revisiting, we invited people with various tech-savviness and browsing habits to the workshops. We set up exercises to understand their behaviors and what tools they use related to content revisiting. We then mapped out a journey map to show the ups and downs of the experience, and design opportunities for us to move on.

Stay organized is tedious, especially for proper naming and categorizing.

Search is vital, especially for people who have inconsistent saving behaviors.

Visual and spatial cues are more effective for people to retrieve the memory.

Design

Identify the key touchpoints along the revisiting journey

Since there are many touchpoints that can impact the content revisiting experience, we decide to find the hot spots first to focus our design efforts on. To do that, we explore early ideas based on the findings from the previous workshop and invite the same user group to review the design. The vote and feedback reveal two key moments that people might need help most - Saving content and library managing.

Testing

Connect the experience with other design teams

To make sure we connect well with other design tracks under Activity streams, we turn the ideas into a mockup to collect feedback from others in an open design critique in Mozilla's yearly All hands. Together, we evaluate user value and development cost, and vote as a team to select three hero concepts for further testing: bookmark bar thumbnail, library list/grid view, and the sorting system for downloads.

Testing

Testing the prototype with the end user

With the selected idea and feedback, we build a high-fidelity prototype and conduct the un-moderated test remotely on user testing.com. We wrote different scenarios to mimic the actual experience and tested them with 10 people of mixed ages, gender, and locale from North America. Finding reveals positive sentiment and a few improvements to move on.

Participants liked the library to be on a new tab page instead of a separate window.

Participants found the preview image and filter are handy and intuitive.

Participants thought the download library is a bit redundant as it can replace by the OS finder.

Outcome

The proposal is refined and lined up with other exciting features of Activity Stream for implementation. After the release of Firefox Quantum, we might have the chance to see the new design published in the browser. Library, while not commonly used, has its essential role for people to organize and retrieve their personal assets once needed.

Final design

The final design is a proactive saving and retrieving system that tap into every opportunity to surface the user’s favorite web content. The new design leverage rich visual and web metadata to trigger user’s memory, providing contextual hints to help users finding their web assets faster.

  • 01. Saved smartly
  • 02. Powerful search
  • 03. Library enhancement

01

Saved smartly

Save recommendations

Keeping the saved items organized is critical for future content revisiting. We can lower the efforts by offering simple suggestions, such as generate a filename from the metadata and recommend a few folders with the highest frequency to save.

02

Powerful search

Handy search spot

People search all the time to find their saved items, if they don’t find them, they will download them again from the web. The new design allows people to find their downloads directly in the search bar, helping people to discover saved items more easily and intuitively.

Alternative Keywords

People use various keywords to search their saved content, this can vary based on context, habits, and their available memories. The new design acknowledges the diversity, provides a more effective search by enabling a wider search query generated from the file’s metadata.

03

Library enhancement

Visual presentation

Research shows the old library is confusing with its separate window and text-based preview. We design the new library to be more visual, with alternative view options and filters such as file type, source, or even devices to help people quickly spot their assets.

Cross-device access

Today, the download happens everywhere on our devices. It's a challenge to manage all of them and stay organized. With the firefox account, a user can see all the download history in one view, which makes it easier to manage, save storage, and find their most-needed content.

Reflection

Define the design scope and ownership early and often, especially for a distributed team across time zones.

Be aware of colorblind issues and instruction clarity when creating un-moderated user test.

When designing for mature product category, study the best practice first, and deviate from it.

Similar case studies

Streamlining Web Content Handling

Discovering the Gold of the Web