We rethought how to present people with the best article and reading experience across Vox Media’s diverse brands and communities.
Vox Media holds a number of high profile editorial brands spanning a wide variety of verticals with different content and editorial strategies. These include The Verge (Tech), Vox (Politics), Eater (Food and Restarants), Curbed (Real-estate and architecture), Racked (Fashion and Shopping), Recode (Tech and Business) and Polygon (Video Games). Our goal was to improve engagement – supporting people’s curiosity while respecting their attention. This meant finding helpful moments to surface stories that were both new and relevant.
Part of the project was fueled by my team’s earlier explorations at a hack week where we looked into new potential article interactions and hybrid video/audio/text views. This included more streamlined ways of switching between articles and new methods of exploring podcasts and video.
We also considered other things, including omni-directional canvas navigation:
Along with this we explored bookmarking, story queues and progressive web app functionality. Story queues would allow users to pick up on a variety of types of stories and see where they left off.
UI could make it fun to push stories into your story queue.
These designs served as a basis of conversation – both within our product team and to different editorial brands.
Strategy and Process
Through research and data, we gained a general understanding of how people look through articles and mapped out where key decision points were. This included where people might to dive into a story, shift their attention to something else or generally browse within a given view.
We approached design from a couple of different angles at the same time, working out information architecture and interaction patterns through wireframes and prototyping while building up visual and brand language through typeface, color and layout.
Early designs explored the ability to swipe and move between different stories and related categories at any point. At the same time we aimed to protect the reading experience from distractions by removing clutter.
Knowing articles would likely be the first destination for people, our team designed the information architecture to make sure people immediately knew where they were in relation to other types of content. This started by surfacing stories of immediate relevancy. These would be within the closest proximity to the user, interaction wise. Moving outward, more general categories and tags suggestions would be at the next level, followed by site sections and groups.
Using this framework, we designed prototypes and interactions to surface stories and suggestions in this order. We went through a number of rounds of revision – exploring options that were sometimes too overwhelming for people, complex or incompatible with the tagging system.
We looked into UI that would allow people to move laterally between videos and a recent feed of stories. One of the challenges here was doing this without it becoming distracting to the primary reading experience.
Some of these were overly complex so we distilled things down into a system with more consistent UI placement and behavior. Because users could switch over to one of the side panels at any scroll point, it was important to make sure that people knew where they were at all times (the side panels could also scroll independently). To solve for this, I designed a micro interaction that shifted the text into view to give people context where it would otherwise be offscreen.
Afterwords however, we realized that the side drawer pattern ended up being constrictive. While they provided immediate access to other stories, some of these items would be noise and better accessed from their own dedicated view. From that point, we ended up moving onto a hybrid approach with story to story swiping and a panel for more wide story suggestions. This became the structure and interaction framework we designed the following components for.
Typography and Visual Design
Knowing any visual design system would need to span all 8 brands (as well as +300 cities and teamsites) we iterated on a new visual design system with engineers. This required being conscious of how it was currently implemented under the hood through Chorus, as well as sometimes doubling back when it was better for the system.
After assessing each brand, we designed a series of article pages using new sets of typefaces and visuals that best reflected and projected their brand. This involved understanding how to utilize the media types of a given brand and push its character forward visually.
For Polygon – a video game site, I chose to explore UI panels that emitted light (inspired by thatgamecompany) instead of casting shadows like material design. Polygon had a wide range of beautiful imagery to showcase and we designed it accordingly. We also explored the creation of visuals within a game engine itself. Typeface selection aimed to add lightness relatability.
For the Verge, we looked into futuristic neon aesthetics and both the beauty of technology as well as its imperfections through natural glitches.
By exploring brands separately but drawing from the same established framework, we could push each respectful concept further and spend time working out key details.
From there, we shifted to streamlining the overarching design system and codebase while reconciling designs.
The continuation of this project is currently in progress.