Screen Shot 2019-03-29 at 12.35.41 PM.png

Vox Design System

Vox Design System 

When I joined Vox Media in 2017, all sites were in the process of being moved onto the same front-end system. This project was known as Unison.

As part of that team, I helped define and create new components, and implement our design system across several site redesigns - including SB Nation’s 300+ websites. I also lead design on Vox’s first external partnership with The Ringer — who saw a 3x increase in average time spent on page.

 
SB Nation team sites and primary site

SB Nation team sites and primary site

The Ringer article, longform, and home page

The Ringer article, longform, and home page


 

Once the Unison project was completed, our team continued to work on the front-end design system for the 350+ sites running on Chorus (Vox’s publishing platform). I worked closely with editorial and product teams to introduce new features and extend the system, including off platform with Apple News and Google AMP.

 
Polygon eSports sites and primary site

Polygon eSports sites and primary site

Section navigation component

Section navigation component

Extending the design system for Apple News

Extending the design system for Apple News

Media display component

Media display component

 

In the Summer of 2018, after the success of The Ringer launch, Vox announced it would start licensing Chorus to external partners. In expectation of this, and to better serve the cross-disciplinary needs of more teams, we needed to more clearly document the design system. I wrote documentation guidelines for 100+ unique components and over 50 page types.

In addition to documentation, I audited the state of current foundational elements of the system - including type, color, and accessibility - to provide guidance on expanding future expressions of the system.


 
color audit.png
des sys docs@2x.png
 

Design systems are dynamic and always evolving. Some things I’m currently thinking about:

  • Design systems work best when they have a strong point of view. Baking in design opinions that help drive scenarios is much more valuable than building a system that tries to work everywhere.

  • Design systems should be expressive. While sites or products may share a design systems’ components and patterns - the way a scenario is expressed will (and should) vary.

  • Design systems work at scale - up to a certain point. There are a ton of great resources re: design systems, best sketch symbols or Figma library setups, token frameworks, etc. The challenge we have at Vox is how we need our system to address scale, flexibility, brand expression and other scenarios across multiple robust, distinct, brands. Most systems don’t have to consider this level of complexity.


Blogroll

Yesenia was the Design Director during the entire Unison project. She wrote about her perspective, or you can watch her discuss our work at An Event Apart.

Sanette was a Senior Designer for much of the project and worked on many of the foundational features. She put together a really nice summary post as well.