Firefox Browser Bookmark

background

Bookmarking is one of the key features in the browser to help people save and find websites. We conducted user study to understand the mental model of different types of users. We seperated the journey to four steps (save, organize, revisit, and try alternatives) and proposed corresponding design concepts and mockups to enhance the experience.


  • Company: Mozilla
  • Product Type: Desktop App
  • Time: May 2016 - Sep 2016
  • Role: UX designer
  • Team: 2 UX designer, 1 Visual designer
  • Responsibilities: Interaction Design, Journey Map, Prototype

Research

We conducted 2 user studies with 8 participants in two weeks. Participants were asked to demo how they usually save and find the content on the Internet with the materials we provided. 8 common types of content includes: news, social media, blog, videos, download, forum, shopping, tool, and work related tool sites.

2

sessions

8

participants

2

weeks

Insights

One of the key insights was there are two main type of users - organized type and messy type. Organized type users actively manage their bookmarks, folders and naming system, while messy type users mainly rely on their mental system. This helped us to indentify the needs of two types of users and what we can do to help them manage their bookmarks.

Journey Map

Ideation

In ideation phase, I hosted another brainstorming session with other designers. With the insights, pain points, and journey map we came up previously, we were able to generate lots of ideas.

  • How might we help user to organize their bookmarks easily?
  • How might we make it's easier to find saved bookmarks?
  • How might we provide cleaner and more effective layout?
  • How might we help users to clean old and broken bookmarks?

Consolidating ideas

Low fidelity mockups

Final Design

2

design proposal

13

high fidelity mockups

32

concepts

preview & search

  • Preview: long hover on the bookmark list to preview the website
  • Global search: search across website title, tag, folder name, and content on webpage.
  • Live search: show search result simutaneously while user typing.

first time saving, organizer reminder

  • First time use: suggest folders and websites after user saved their first bookmark
  • Organize reminder: push reminder to users about recently added bookmarks
  • Clean up reminder: help user to delete duplicated, broken, never used old bookmarks

improved saving folder flow

  • One click sort: Choose folder
  • Smart sorting: sort by frequency and added date.