Pocket

Pocket: RWD corporate redesign

Standardizing the code base of a growing startup and adapting to the needs of our mobile users.

The popular save-for-later service Pocket has grown its user base significantly since its inception in 2007, especially within its native mobile apps for iOS and Android. Yet when I joined as web platform lead in early 2013, its web code base was in need of standardization. Mobile visitors to the Pocket web site had doubled year over year, and informally we saw many new potential users discovering about Pocket on mobile devices. Making Pocket’s web experience a more engaging experience was a high priority.

I kicked off the redesign by writing a fresh, modern code base with a responsive grid system. With that as a starting point, I worked with our visual designer to address high traffic pages that could use a bump in engagement.

The refresh process on each page usually started with competitive research and sketches between the designer and myself. After we agreed on a new design direction, I developed a mid-fidelity wireframe in Sketch to be passed off to the visual designer. The designer would take the wireframes and usually generate a psd comp and finished assets for me to develop.

Core development

  • Instigated a module based (SMACSS) CSS reorganization and a responsive web design framework for getpocket.com.
  • Streamlined existing HTML layout and simplified JavaScript to improve performance.
  • Established baseline browser support and more formalized testing procedure among team members.
  • Implemented new designs for live content.

Wireframing, research

  • Researched layout, onboarding process and marketing design for many competitors. Presented ideas and comparison to product team, business stakeholders.
  • Designed mid-fidelity wireframes for web pages in Sketch with a “mobile first” approach: I started with a small viewport (targeted at smartphones, tablets), then built progressively larger and more complex viewports (for laptops and desktops.)
Sketch wireframe
Early Sketch wireframes for How to Save page.
Sketch wireframe
Live how to save
The How to Save finished design.
Sketch wireframe
Sketch wireframes for homepage experiments.
Sketch wireframe
Live homepage on desktop
The finished, live home page.
Live homepage on mobile
The home page adapts to mobile devices.