Challenge
Like other mobile operating systems, Mozilla’s Firefox OS distinguished between mobile apps (that users installed on the phone) and web pages (that users viewed in the mobile browser).
Solution
We wanted to remove that artificial distinction so that users could save and revisit any website or web page in the same way they return to their mobile apps.
Contribution
- Lead UX Designer at Mozilla
- For Firefox OS
Start Pinning
With the new "Pin the Web" feature, users can pin the content from any website or web page to their home screen by tapping on the overflow menu in the upper right.
Overflow Menu
The "pin" action was added to the existing Overflow Menu, which included other browser actions like opening a new window and sharing functions.
Tapping the "pin" action opens the Pin dialog screen.
Pin Content
In the Pin dialog screen, users can pin the specific web page, for example, San Francisco Weather, or pin the general website, for example, The Weather Channel.
Pinned Content Confirmation
After the content is saved, the user sees a confirmation message.
Home Screen - Pinned Pages panel
The user's Home screen displays both pinned Sites and pinned Pages. The first panel displays pinned Sites alongside the user's mobile applications. The second panel displays pinned Pages, as shown here.
Different types of pinned content are displayed differently based on the content’s metadata. For instance, if a web page contains contact information, the metadata from that web page is used to present the pinned content as a “contact.”
Overview
I was the Lead UX Designer on this project. This project was initially proposed by a Firefox OS engineer. I collaborated with him to user-test and create the experience for Firefox OS users.
View additional UX artifacts from this project »
User Testing
Before launching this new Firefox OS feature, we wanted to understand the usefulness and usability of "pinning" for our users. After two days of user testing, we determined that the feature was useful, but would benefit from UI improvements.
In particular, users did not understand the UI for pinning a Page vs pinning a Site. So we made that more clear in the final user experience.
Nomenclature Testing
In our first user test, we found that some users were confused by the word "pin." So we tested a variety of different words with a second group of users.
The test wasn't conclusive; there was no clear "winner." Users had a wide range of "save" mental models, from saving a file to bookmarking to pinning (if they were familiar with Pinterest).
So we decided to launch with the "pin" language and planned to evaluate post-launch performance to decide if we should revisit the language again later.
