Ryan Feeley

Product Designer based in Toronto, Canada

How coding open feedback shaped Firefox Notes

In 2017, my team launched the Notes experiment to see if a basic notepad in Firefox’s newly extensible sidebar could, with regular user feedback and iterative development, grow to become an indispensable Firefox feature.

Minimum Viable Experiment

First version that supported multiple notes

The struggle to learn from quickly built experiments is real. Notes was not a viable release feature when it shipped, but could we provide enough utility to become a Minimum Viable Experiment¹? Would we be able to discern clear signals from user feedback?

And we have lift-off…

Though its first release was overshadowed by other experiments like Screenshots and Send, Notes quickly became one of the most-installed experiments in Test Pilot. We suspect this is partially due to its familiar form, but also in part due to its perceived utility.

Access & Discoverability

As a UI category, sidebars are notoriously challenging to discover and access. At launch time, Firefox did not yet provide convenient access to its new sidebar, so early feedback indicated that even finding Notes was an issue for many. Eventually, the sidebar icon was shipped on by default, which was helpful for new Firefox users, but not for those who had stuck with us for a while.

Firefox’s sidebar button

Coding Open Feedback

When soliciting feedback we started with the open-ended question:

As responses poured in, we slotted the responses into these finely-tuned categories:

  • 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

We could then segment the feedback by release to see if our changes could move the needle.

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, followed by Sync. After desktop syncing was released, the remaining feedback was for mobile syncing. An early surprise was for Markdown, requested by 9% of respondents. Luckily it was easily added thanks to our switch to a rich text editor that supported Markdown auto-formatting.

Features added throughout development:

  • End-to-end encrypted syncing of Notes using Firefox Accounts and Kinto storage (kind of a big deal if you ask our engineers)
  • Keyboard shortcut to toggle the Notes sidebar
  • Drag & drop text
  • HTML export
  • Add text selection to Notes by contextual menu
  • Dark theme

Unanticipated use cases reported by users:

  • Students taking notes during online courses without leaving the browser
  • Tasks lists for individuals with cognitive/memory issues
  • Sanitizing text from the web for entry elsewhere (something we don’t support yet, but will soon when you can Make Plain Text)

Can one size fit all?

Software-based notepads come in all shapes and sizes, and collectively include hundreds of features. Given our very limited real estate, could we select the right features to satisfy Firefox users? We would have to evaluate feedback carefully and make some hard choices to zero in on a feature set that was was both limited and harmonious.

Are we viable yet?

With thousands of coded responses, and a new set of Firefox design guidelines we are focusing our June graduation release on a clearer set of features:

  1. Performance— Feedback was loud and clear. When we made changes that negatively affected the performance and stability of Notes, all signals let us know. A strong reminder that we need to get off our relatively new computers, and live up to the expectation that Firefox is fast for good.
  2. Multiple Notes — Provide a design that supports multiples notes today, but that is extensible for search and site-specific notes.
  3. Sync to an Android app —Syncing between desktops satisfied about half of all requests. The remainder were for Android. One day iOS?
  4. Exportability — Text, Markdown, HTML.
  5. Hyperlinks —Auto-linking URLs, or adding links to text.
  6. Formatting Bar Spillover —Better accommodate the varying widths of the sidebar, and clear the path for additional formatting features.
  7. Plain text — Users want to sanitize text pasted from various websites, and make sure that hidden formatting is removed.

We hope this feature set will satisfy the greatest number of users given our constraints. Here’s a preview of what’s to come.

Many thanks…

We have so many contributors that it blows my mind. 💯! And of course our Firefox design guidelines has recently made it a lot easier to design a feature with confidence in knowing that it belongs in Firefox.

¹ This is a real thing apparently.