Firefox Notes Add-on

Take notes while you browse the web. Synced and encrypted.

A lot can happen on a web page, like an event. It's handy to be able to take notes. This add-on was conceived after we were tasked to come up with a low-risk way to test a new sync technology.

My Role

Cloud and Desktop Designer

Teammates

Engineers, Android Designer

Challenges

  • Small team and timeframe
  • Lacking user research
  • Experiment program framework

Methods

  • Ideation
  • Quantitative User Research
  • Experiment
  • Privacy
  • Coding Open Feedback

The problem and how it was solved

Firefox had a problem; its Android browser was due for a major overhaul, and a core part of the product, the Sync technology, required replacement.

While observing user testing over the years at Firefox, I noticed that many users keep a Google Doc open to take notes while doing online research.

Firefox had also recently launched the ability for Add-ons to appear in the sidebar, and the idea of a basic Notes app came to be.

Firefox Notes Add-on
Firefox Notes Add-on
The initial experiment was to just include a single note.
The initial experiment was to just include a single note.

"Foster goodwill with your developers by equipping them early with all the designs they need to handle edge cases."

Soliciting and Coding Open Feedback

When soliciting feedback we started with the open-ended question: "What would you like to tell us about today?"

  • Access & Discoverability
  • Advanced Formatting
  • Checklist
  • Color / Highlight
  • Dark Theme
  • Email & Print
  • Export & Save
  • Find / Search
  • Keyboard Shortcut
  • Hyperlinks
  • Insert / Drag & Drop into Notes
  • Markdown
  • Multiple Notes
  • Performance & Stability
  • Pictures / Screenshots
  • Share & Connect to 3rd Party Services
  • Site-Specific Notes
  • Sync & Mobile App

Coding Open Feedback Over Releases

Looking at the coded feedback over three releases, we were not terribly surprised to see that multiple notes was the most requested feature.

Firefox Notes Add-on

What were users crying for?

  • Performance — Feedback was loud and clear.
  • Multiple Notes — Provide a design that supports multiples notes.
  • Sync to an Android app
  • Exportability — Text, Markdown, HTML.
  • Hyperlinks — Auto-linking URLs.
  • Plain text — Users want to sanitize text pasted from various websites.

Final Design

Firefox Notes Add-on
Screenshot of the product
Screenshot of the product

Research Findings

By utilizing in-product feedback, we were able to code open responses into categories.

Impact

The experiment graduated to become an officially supported add-on including encrypted Sync and an Android client. 🎉

← Back to all work