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