In 2017 my team set out to improve Vox’s mobile article experiences, with the goal of improving our page depth and recirculation metrics. We wanted to create a performant experience that gave users on the mobile web the best possible experience and leveraged the specific affordances of mobile devices.
Mobile navigation
The goal of this work was not to abandon the responsive web, but to lean into the format our readers were overwhelmingly using to consume our content. I explored a framework that allowed for swiping through stories at any point in an article, which meant we needed to create initial view “cards” that combined all the most relevant imagery and info about a story at a glance. As lead UX designer, I designed concepts for recirculation strategies, navigation adjustments, and interaction patterns. As a blue-sky project, we tested prototypes internally at Vox to refine and validate an approach.
The beginning of something
We landed on a framework that allowed for swiping through stories at any point in an article and created “bookend” views with additional content. Moving outward, more general categories and topic suggestions would be at the next level, followed by site wide sections and groups.
The bookend card occupied the first spot in the carousel, allowing a user to swipe left to access it from any article page, or the user could discover it after looping through the four next-up articles in the carousel. The bookend would display content from the articles topic tag, the package of content the article belongs to, or replicate featured content from the homepage.
The value of the bookend was that it allows the user to very easily get a higher level view of the content available, or to navigate back and forth through a curated collection of content, allowing the kind of “dip in and out” browse experience that is very difficult to accomplish on mobile.
Outcome
The final UX allowed users to easily go deeper into a subject and surface to higher levels for context, providing instant-access navigation across a site from any point in a story.
From here the team moved into prototyping and pushing on visual expression of our design system. This project was a blend of brand, visual expression, and user-focused experiences that inspired future thinking for Vox Media’s mobile experiences.