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