Pocket: web app refresh

A fresh look, responsive design and new navigation for a popular web app.

The popular save-for-later service Read It Later became Pocket in 2012, launching a new web app design in the process. After I joined as web platform lead in early 2013, I led many smaller initiatives to keep the web platform up to date with cross-platform functionality and extras for power users. Yet its layout and interaction paradigms remained largely unchanged. So in early 2015 I was tasked with modernizing the web experience, with a new navigation that followed web design best practices, a responsive layout, and a fresh visual aesthetic to keep engagement high.

I started by creating a quick and dirty technical MVP to better understand technical feasibility and make initial estimates on both design and development scope. Its navigation largely copied our native mobile apps, and I added a framework make the app content responsive. For our project kick off, we used the MVP for inspiration to refer back to during design iterations.

Next I moved away from code and into simple sketches and competitive research with our visual design team to determine what form of navigation was best for us. Once our team settled on a handful of navigation styles we liked, I altered the original MVP to generate some rough prototypes. We presented these prototypes to the Pocket team and outside users for feedback.

Sketch mockups
Early Sketch mockups and wireframes on initial ideas for a refreshed navigation.
Sketch mockups
Early prototype
An early responsive prototype.

At this stage we made our final design decisions and were ready for final implementation. I worked with the visual design team on some mid-fidelity Sketch files that covered final layout changes, and implemented the new code base for an extended beta test.

Sketch wireframes
Higher fidelity wireframes with a focus on changing the core layout with RWD.
Sketch wireframes
Sketch symbols for color, typography and more used throughout the project.

During the beta we monitored app analytics and incorporated changes based on user feedback. Before moving from beta to a general release, I created prototypes in Framer to settle final animation details.

Framer Studio
Animation tests and tweaks with Framer Studio.

Core development

  • Re-architected front end layout in HTML, CSS and JavaScript to make the Pocket web app adaptable to any web-friendly device.
  • Converted web app code base from vanilla CSS to Sass for efficiency and streamlined communication with visual design team.
  • Added new Gulp runner based task system to generate production-ready code, optimize images, auto-create style sheets, and much more.

Wireframing, interviews, research

  • Extensive competitive research on other popular web apps and sites to finalize RWD navigation patterns
  • Generated mid-fidelity based prototypes in Sketch in conjunction with visual design team

User interviews

  • Oversaw questioning and feedback from usertesting.com, ran interviews with other team members to get feedback

Style guide

  • Worked with visual design team to establish a starting point for a new web-based style guide: standards for color palette, typography, dialogs, buttons, and other modules reused throughout the app

Rapid animation prototyping

  • Used Framer Studio to convert simple Sketch comps into navigation animation flows