• Pin the Web

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).

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.


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.

View larger image »

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.

View larger image »

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.

View larger image »

Pinned Content Confirmation

After the content is saved, the user sees a confirmation message.

View larger image »

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.”

View larger image »

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.

View larger image »

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.

View complete PDF »