Pocket

Pocket: web extension redesign

A streamlined UI and new feature set for a key component of the Pocket experience.

Pocket is the world’s most popular save-for-later service. Users find content on the web or within native apps to save to their accounts and read later on our cross-platform apps. Pocket has integration for saving to Pocket natively within over 500 apps, yet saves still derive heavily from our browser extensions.

Our web extension saved web content efficiently. Yet by 2014 its visual design and UX needed a refresh; we wanted new functionality for premium users and the “page saved” notice to be both more noticeable yet unobtrusive. As web platform lead, I rewrote the front end code base and worked with our visual designers on refreshed visuals and UX.

We started with competitive research, looking into other popular extensions on the web to see which design paradigms were both popular and intuitive. We also consulted feedback from our support channels. Next we turned to rough sketching, and then a few lower fidelity extension variations in Sketch.

[imgembed imageid=’4076′ alt=’Sketch mockups’ caption=’Early rough mockups in Sketch for various extension visualization directions.’]

While our extension is simple, animation and transitions play heavily into variations on the extension design, so I brought in Framer Studio early for generating prototypes that we’d present to the Pocket team and outside users.

[imgembed imageid=’4077′ alt=’Framer Studio’ caption=’Framer Studio powered extension animation tests.’]

[imgembed imageid=’4078′ alt=’Framer Studio’]

Based on that feedback and working with the designers on the high-fidelity details, we settled on a single design direction and layout. Yet certain nuanced animation details remained up in the air, enough that jumping into final coding would be premature. So I built a high fidelity cut of the extension in Sketch and exported to Framer Studio to test a wide range of animation options.

[imgembed imageid=’4079′ alt=’Framer Studio’ caption=’Framer Studio with the final Sketch design to test different animations.’]

Finally I moved into actual coding. After a few weeks of direct feedback and analytics analysis, we settled on a final direction.

[imgembed imageid=’4080′ alt=’final design’ caption=’The finished extension used on live web content.’]

Core development

  • Redeveloped Chrome and Safari extensions “front end” visuals in HTML, CSS and JS from scratch.
  • Added a simple JSON-based dictionary for internationalization and analytics.

Wireframing

  • Low-fidelity Sketch wireframes to iterate on visual design directions
  • High-fidelity Sketch wireframe to settle on final animation details

Prototyping

  • Used Framer Studio to test extension visualizations. Also utilized for final tweaks and animation details before launching extension.