We rethought how to present people with the best article and reading experience across Vox Media’s diverse brands and communities.

MDN
Monument Valley 2 3D art by Danette Beatty.

Large Networks

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.

Prototype for more natural and responsive traversal between articles
Prototype for hybrid video / written text content within the same framework

We also considered other things, including omni-directional canvas navigation:

Prototype for omni directional canvas navigation to promote discovery.

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.

MDN

UI could make it fun to push stories into your story queue.

MDN

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.

Prototyping

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.

Prototype that allows people to explore new tags. It wasn’t successful because the tag structure didn’t support categories that fit well with what people were looking for.

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.

Prototype for surfacing both videos and a recent feed of stories. This approach relied on sidebars that could be accessed from integrated buttons instead of a sticky header or footer (which would be more intrusive to the reading experience). Overall it was too confusing for people.

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.

Prototype using a sticky header to allow quick access to both videos and recent stories at any time. Note that the text column shifts over to the side and show users that each of the slides are adjacent.

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.

MDN
Desktop article concept for Polygon

For the Verge, we looked into futuristic neon aesthetics and both the beauty of technology as well as its imperfections through natural glitches.

Gradient from combined blend layers
MDN
Desktop mobile concept for the Verge with a pull down menu interaction. The background gradients show some rendering errors in Sketch.

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.

Animation background prototype for the Verge experimenting with minimal lines and noise
Animation background prototype experimenting with minimal lines
Animation background prototype for the Verge experimenting with the idea of speed
Design mock exploring Eater article cards
Art credit: Zelda art (left) by Jeremy Fenske. Monument Valley 2 3D art (right) by Danette Beatty.

From there, we shifted to streamlining the overarching design system and codebase while reconciling designs.

The continuation of this project is currently in progress.