Unison Design System
For the past year, I’ve been working on a project called Unison, one of the most intensive initiatives undertaken at Vox Media.
The Unison project is basically an effort to get every Vox Media website onto one platform built on a single codebase and shared design system. It’s a massive platform-refactoring project, took two years to complete, and involved more than 350 websites across our eight editorial brands—Vox, The Verge, Curbed, Eater, SB Nation, Polygon, Recode, Racked, and 300+ SB Nation team sites.
In the end, we created a design system that allowed for significant visual and branding flexibility, and supported the needs of our editorial brands and audience.
Note: This is a case study about the past year of the larger Unison project. I also wrote case studies about select products along the way:
- Unifying 18 longform feature templates into a single product
- Launching the rebranded Verge on a unified website
- Designing the new Curbed homepage
- Designing homepages for Eater’s network of 24 websites
Wait, don’t all Vox Media’s brands run on Chorus?
Chorus, our in-house, proprietary content management system, has earned somewhat of a reputation in the media world, and prior to Unison, our brands did technically run on Chorus. But they all ran on different instances of Chorus.
As Vox Media acquired or spun up editorial brands over the years, the sites began to diverge. They still shared a set of publishing and community tools, but most of the presentation and user-facing functionality was custom-built specifically for each brand. Basically we were supporting eight different CMS’s on eight different codebases, and anytime we wanted to make a change or add a new feature, we had to design and code it eight different times. This was unsustainable.
For example, feature stories across brands were similar at their core but diverged in their components, interactions, type systems, forms of navigation and links, and expression of their brand identity. Homepages were incredibly custom and branded. Here’s a quick sampling of feature stories and homepages, before and after Unison:
As a senior designer on the Unison project, I worked on the UX and visual design of our site products (features, storystreams, homepages, etc.) and launches (The Verge relaunch, SB Nation relaunch, etc). I work alongside senior designer Jared Fanning and our design director Yesenia Perez-Cruz. The rest of the core Unison team consists of our product and project manager Chris Haines and our developers Ben Alt, Greg MacWilliam, David Zhou, and Jesse Young.
We’ve also had many folks along the way who’ve helped enormously with the project: John Fuller, Josh Laincz, Ally Palanzi, Jason Ormand, Krissy Kingwood, Ryan Gantz, and Josh Larson; as well as my colleagues from the Brand Identity team (particularly Georgia Cowley, Krystal Stevens, and Courtney Leonard), Quality Assurance team; Revenue Support; Data and Analytics team; and editorial teams.
The Unison project had three goals…
Have a clear understanding of what the baseline is for a site on Chorus
Create a single, unified version of Chorus to power our brands
Make it possible to launch new brands on Chorus with “a push of a button”
Incredibly, over the course of two years and to the credit of our product manager, these goals did not change and the scope of the project was generally kept in check.
The Unison project had two key phases. Phase one involved creating a baseline platform catered to Curbed, and phase two involved migrating our seven other brands over to that platform.
We couldn’t just swap logos, colors, and type and call it a day. In the process of migrating, we had to take a step back and reconsider how every aspect of the baseline Unison system applied to our other brands. In doing so, we essentially designed and developed new products that we then incorporated back into the baseline. We worked on a page-by-page basis—considering first the article, then navigation, features, storystreams, search, reviews, profile pages, and homepages. Some pages took a few weeks (like search), while others (like homepages) took the better part of a year.
Sometimes, we paired a product launch with an editorial rebranding. We did this with The Verge and Racked in November 2016; SB Nation and 300+ team sites in May 2017; and MMA Fighting in June 2017.
With more than 350 websites to consider, we faced some distinct hurdles throughout this project, including:
Designing in systems and at scale. Our designs had to be comprehensive enough to work for all of our brands, yet fine enough to cater to specific editorial needs. We needed to create templates that didn’t act like templates. To ensure that they scaled properly, we cut unnecessary, unused modules wherever we could. For instance, legacy features had 18 layouts with 81 code snippets, which we whittled down to a single layout with 43 snippets.
Systemizing type, colors, and spacing. All of our sites featured different typography, color systems, and spacing. We couldn’t set 350+ websites manually, so we created systems that would set those parameters for us. For instance, font sizes throughout the site are generated by setting a base font size and selecting one of six type scales, and certain colors like link hover states are tints and shades of base values.
Working with both new and legacy tools. As my team worked on unifying Chorus, another product team at Vox developed a new story editor for reporters. These two projects took place simultaneously, so my team had to consider how our audience-facing designs would be created in both the legacy editor and the new editor.
Balancing editorial needs with audience needs. Generally speaking, we have two sets of users—our editorial users who create content, and our audience who consumes and engages with that content. In theory, both their needs align, but this doesn’t always play out perfectly in practice. As a designer, I need to consider everyone involved and ensure our products work for all.
Migrating brands while simultaneously rebranding them. In the cases of The Verge, Racked, and SB Nation, we migrated the brands at the same time as our Brand Identity team redid their branding. A few challenges to highlight here—when we introduce new products at the same time as new branding, our team has to figure out how to apply a design language as it’s being defined; our work becomes tied to a public launch date; we have to be super clear about product feedback vs. branding feedback; and finally, there are a lot more players across revenue, sales, and growth, making communication an even more crucial element to success.
Here, you can see the application of the angled pathway graphic element on the site in labels, story slots, pullquotes, and headers, as well as the final pathway guidelines in the style guide. Many of the guidelines, like the angle and its usage of connecting and containing content, stemmed from our platform explorations.
How we know we’ve succeeded
We’ve had huge wins with this project and I’m excited to share them with you. First, let’s see how we did with those three main goals:
Understand what the baseline is for a site on Chorus. After two years migrating and refining our sites, we understand the basic building blocks (articles, features, the homepage, etc) that make up a site on Chorus, as well as how and where to express our brands’ unique identities.
Get everything on a unified platform. This one is pretty cut and dry. Our platform now runs on a unified codebase under a shared design system, so I’m calling this one a success.
Make it possible to launch brands with the push of a button. While launching a brand is a bit more involved than pressing a “launch” button, we are now able to spin up brands much more quickly. The first time we really put our platform to the test was in early June, when we launched three new esport brands as part of Polygon’s network. Launching these three brands took only a few days of design and development, as opposed to months of all-hands-on-deck work.
Additionally, Vox Media announced in May that we’d be moving The Ringer from Medium to Chorus as part of a new partnership, which is a testament to our work on the platform. Just a few months later, we launched The Ringer on Chorus.
Other wins include...
The brand shines through. We tried to be cognizant of not making our brands clones of one another with merely different fonts and colors. We differentiate our brands not only through visuals but through UX decisions that aim to highlight each brand’s editorial strategy and priorities. You can see this, for instance, with our homepages, where we created layouts that cater to specific strategies (like the text-heavy Vox.com vs. photo-heavy Verge vs. event-recapping SB Nation).
Our sites are much more accessible. We’re not quite there yet, but we’ve pushed for our colors to pass tests, our code to be machine-legible, and our sites to generally be easier to parse and navigate.
Our sites are faster. Our performance and engineering teams have invested heavily in speeding up our sites. Over the course of the past year, we’ve seen an average improvement of 59% in start render times across our sites’ article pages, and 32% in our speed index. On the design side, we’re intentional with heavy imagery and abide by a typeface budget of 200KB per site, or roughly four to five fonts.
Each design (and launch) got easier. As we progressed through this project, we were able to reuse and build on the work we had previously done. For instance, we designed a promo bar module initially for Curbed to promote special or persistent stories. Here you can see the same pattern across Curbed, Eater, SB Nation, and Polygon homepages.
We can affect change across all brands. For instance, to improve viewability across article pages, our revenue team only had to design and build once in order to impact all of our sites. They saw an increase of 60% in viewability.
Finally, our usual sets of metrics have generally improved or stayed the same. We keep an eye on pageviews, scroll depth, return visits, session time, click-through rates, and scroll depth before and after launches, and make notes for future iterations. As of March, for instance, users were 20% more likely to scroll a quarter of the way down the page on Curbed.com after we launched their new homepage, and the click-through rate on the main hero stories was 8.8% post-launch (vs. 0.5% pre-launch).
We have our MVP, and now we’re finally in a place where we can iterate. Our team is formally shifting into a new Audience team that will focus on designing great user experiences. Here’s what’s next on our plate:
Design beyond the baseline. Now that all the pieces of our platform are unified, we want to look critically at what we have and the assumptions that we made. We need to improve what’s working, nix what isn’t, and invest in new products altogether.
Consider journeys, not pages. Because of the nature of this migration, we had to work in a piecemeal way, considering individual pages at a time. We’re excited to shift our focus to the larger user journey that spans pages, platforms, screens, and contexts.
Give better support for designers. We created this system, and now we need people to use it. We’re considering how to empower designers on other teams to better understand and use Chorus by investing in documentation and style guides, and improving our configuration tools.