USA TODAY NETWORK Design System
Between 2016 and 2018, we did an enterprise redesign of all USA TODAY Network websites, and I led the creation of a design system.
A version of the site that resulted can be seen on your mobile device at any of Gannett’s websites, including usatoday.com and indystar.com. For a 10-minute talk I gave about this project, check out this video starting at 5:05.
Redesigned article page for a sample of Gannett’s markets. The design system is shared across the network, with affordances for varying branding and content needs.
Overview
Internally, we referred to this redesign of our enterprise websites, including USA TODAY and our 109 local markets at the time, a “renovation.” Renovation meant that we were not changing major functionality, rather moving the current feature set onto a new web platform, and cleaning up designs as we did so.
Redesigned home, article, gallery, and video pages on IndyStar.
Why did we do this? Our desktop and mobile sites had been built by separate teams, and in the years since we had accumulated significant design sprawl and technical debt. This was causing problems for many groups:
Users had a compromised, slow, inconsistent experience with our brands
Journalists couldn’t predict how their content would display across platforms
Advertising wasn’t always integrated into designs, and pages weren’t monetizing as desired
Product team members found it increasingly difficult to innovate quickly
At the most birds-eye view, the goals of the redesign were to:
Start fresh with a responsive site and set the groundwork for future innovation
Boost revenue and engagement
“Before” view of our article page on desktop vs. mobile – Such differences between desktop and mobile changed hierarchy, reshuffled content, and diluted brand expression.
My Role
Countless designers, developers, product managers, editors, and other team members touched this enormous project – but my specific role was to lead, in close partnership with our development team, the creation of our first-ever design system: the reusable visual building blocks that can be mixed and matched to create home pages, articles, galleries, and everything else a news site needs.
Research
The key question we wanted to answer before moving ahead was: What are the needs that the design system needs to meet? Again, we were not trying to innovate on functionality (yet) with this project, so our task was to deeply understand the existing feature set, so we could optimally translate it to the new platform. Initial research took two main forms: 1) shadowing in the USA TODAY newsroom and 2) inventorying what our sites currently had going on.
1. Shadowing
Some context to set the scene at the time: The product team and the editorial team, though we sat one floor away from each other, did not talk very much. I had been on the design team for three years and had rarely been in a meeting with anyone in the newsroom!
My first shadowing session was on Super Tuesday of 2016. As primary election results came in, I sat in a packed conference room with USA TODAY editors and journalists, simply watching them work. I saw how they moved stories around the home page, rewrote headlines to avoid truncation, checked their different devices and colleagues’ monitors to see how things were displaying. I saw them carefully curate important, but not too important, stories to the 7th, 8th and 9th spots on the home page because they knew that on smaller browsers, those three stories disappeared. I watched them opt to use bold text instead of a subhead because they weren’t confident that the subhead would display on all platforms. I didn’t leave that night until 2 AM, and I went back every day for a week. I came away from this experience in awe of how much our products affected these journalists that we had never talked to until now.
My first night of shadowing. Being in this room with these journalists was one of my favorite work experiences in seven years.
The number one takeaway for me was that editors needed a predictable experience across our platforms – desktop, mobile, native app etc. They’re writing the story once, and they need to have confidence that their intent will be translated to readers wherever they are finding us. We were falling down on this responsibility in myriad ways. What was so exciting to realize, though, was that a predictable experience was also what our users needed. Also what our brand marketing and sales teams wanted. Also what would lead to the cleanest, lightest code.
2. Inventory
What was frustrating to journalists was demystified by inventorying what our sites were actually doing at the time. We went on a detective mission that included the following:
Clicked every link on the site – what page templates did we have?
Studied each template – what components comprised each template?
Studied each component – what smaller visual patterns comprised each component?
Looked across all of the above – what foundational styles (type, color, icons) seemed to be needed everywhere?
Screencaps of every page and module on our sites at the time (Summer 2016). Not pictured: two additional walls similarly decorated!
What did we find? We found an overwhelming number of single-use templates, components, and styles. The image below is a representative example of the same sort of component – a promo to a story, i.e. a news site’s bread and butter – existing in 12 different forms.
Before – Doing the same thing 12 different ways – unintentionally!
The image below captures our habit of building multiple templates to meet the same basic need – in this case, the need to aggregate stories into a browsing experience:
“Before” screencaps of section front, topic page, author page, and another topic page – all meeting the same need of aggregation, all on the same site, all different from one another.
Designing the Design System
Once we had a better sense of underlying needs, we were ready to design. Many many team members were involved in the creative direction and design of the actual experiences that make up the site – the article page, home page, search results, etc. My job was to look across all of those and identify what the building blocks needed to be, and make sure they were all working together in harmony to meet site the needs of our sites.
Design System Goals:
Establish smart visual building blocks to meet site needs
Establish tooling and workflows to help us iterate over time
What We Did:
Distilled needs of the site into two main page types: front – browsing experiences such as home, section, and topic pages, and asset – content-consuming experiences such as story, article, and gallery pages.
Designed components that would be needed across both page types. We organized these into categories of promo, navigation, story, media, ads, messaging, and UI. The image below shows a small sample of the components we created in the “promo” category to get at different hierarchies and use cases:
Promos for story, gallery and video, and how they vary across small, medium, large, and preview use cases..
Designed foundational styles that could be reused across all of the above – type, color, icons, spacers – and implemented all of these as variables in code so that future changes could be made in one place. For type, we hopped on the fluid type bandwagon and developed a system that scaled with the user’s viewport:
Our default type ramp, and a look at the documentation that helped us track our use of type as we built more components.
And finally, we designed documentation to help us stay organized and to encourage reuse over time. In any given moment it is often easier to build something new from scratch, but our inventory taught us that this ultimately shows up to our users in the form of a fractured, slow experience. To help us avoid that fate again, we designed functional and visual documentation that any new component would need, effectively getting at questions of: What is it called? What variants are needed? What styles is it hooked into? What data powers it? How does it scale?
Sample of how we would functionally spec and visually “matrix” the behavior of any given component.
This documentation is what helped us build a new-to-us habit of reuse. As our dev lead put it, “you can only reuse something if you know that it exists.” In building out this design system, one of the most exciting things to me was gaining what felt like x-ray vision into our products. Team members can now look at any page and understand the parts that make it up:
Looking at any given page, we can identify its component parts. Knowing what the levers are, we are newly empowered to pull them!
Outcome
Our business goals with the redesign overall were to boost revenue and engagement, as well as set ourselves up for future innovation. On the design system side, our goal was to establish reusable parts that could be remixed to create additional experiences that would remain cohesive over time. On all counts, we succeeded!
Revenue and engagement both increased from previous versions of the mobile site.
Since the completion of the “renovation” phase, we have built in additional engagement features, dynamic messaging units, and more. We have also been able to iterate easily on nearly every component in the system – changing out colors to meet new accessibility standards, swapping fonts when we got a new typeface, adding new ad units, A/B testing layouts and UI across the board to optimize click-through.
Other teams beyond ours have reused and expanded upon elements of the design system to quickly spin up tentpole and other responsive custom experiences, including our 2018 Olympics coverage, 2018 Elections coverage, sponsored landing pages, and all of our longform storytelling.
Our 2018 Olympics coverage was the first big test of the design system!
Today, this design system is live on mobile for USA TODAY and all sites in the USA TODAY Network, plus on desktop for galleries and videos. The full desktop experience was ultimately de-scoped, but in the time since we have addressed desktop through the USA TODAY Redesign project, which has leveraged many of our learnings from this project.
To check out a live version of this experience, please visit usatoday.com or indystar.com on your phone, or in mobile inspect on desktop.