USA TODAY Desktop Redesign

In 2019, we embarked upon a redesign of the USA TODAY desktop site, currently live on usatoday.com. An enormous team was involved, but my role as design systems lead was to help pull together all the parts into a cohesive whole. This was to some extent a v2 on the design system we set up in 2017, but this time with an emphasis on desktop.

Informing these goals were a variety of pain points, including:

• User comments flooded our inboxes daily with complaints of slow site speed, page jumpiness, and myriad usability issues.

• Seven years’ worth of design sprawl on our site made iterating difficult. We had three different navigations, ten different front templates, and countless styles in use. (Note: we became aware of many of these during the previous redesign, but as that was rescoped to mobile only, those problems all still existed, plus new ones had been added.)

• Advertisers and sponsors were not excited to appear on our site, which they felt was a poor and dated experience lagging behind those of our competitors.

My Role

The redesign was led overall by multiple leads across design, development and product, with many team members contributing across features, and scores of stakeholders chiming in. My specific role was to establish foundational styles that would support our goal of “fastest site in the industry,” then to help other designers apply those across individual feature sets.

My efforts included:

1. Partnering with our dev lead to develop foundational styles in accordance with principles of performance, a “stakeholder” we had never before considered. Design has a huge role to play in how fast a site can load. Our dev lead summed it up: “It’s up to dev to make the site as performant as possible, but it cannot be made more performant than the design allows.”

2. Pulling individual features into the design system as they were designed. Each feature was owned (designed, user tested, iterated upon) by a different designer, and I partnered with each to make sure designs were both informed by and informing foundational styles. With a performance mindset, the stakes are higher than ever to keep things cohesive.

3. Creation and ongoing maintenance of design tooling, including a Sketch library, master files and documentation, to help all team members share and contribute to design patterns as we continue to evolve the experience.

Foundational Styles

A major learning with this redesign is that the design choices we make as a team show up in how fast the site loads. One of the reasons our new site loads so quickly is the careful litigation of every element on the page! Hours of conversations with dev about how to handle breakpoints, type, color, spacing, and 1000 other details in as performant a manner as possible led to the visual building blocks currently in use on the site. For more information about the guardrails we set up, check out the poster we presented at DCUX 2019, called “Designing for Performance”.

Features

The new site was designed feature by feature, each tested in beta and then ramped up to full audience. Many of these were led by other team members, and my focus was on helping guide each to use foundational styles and accommodate all needed use cases. All features below can be experienced live by clicking around the USA TODAY site.

Article

The article page is our hardest-working page, and the entry point for the majority of readers. Our goals with article, in addition to upholding performance standards and supporting the existing ad map, included:

• Optimize for easy reading and scanning

• Allow images to shine

• Accommodate all editorial use cases - opinion, blog, branded content, etc, plus the infinite mix and match of text and media that come together to tell a story

Fronts

Fronts include any aggregate page that offers users a browsing experience – Home page, section fronts, feeds, and more. Our goal was to create a single template that could include more or fewer elements to accommodate different needs and content volume. We wanted to give users a clear hierarchy and offer up entry points beyond just stories – spots to promote newsletters, special coverage, and more.

Design Tooling

Developing some light tooling and documentation was incredibly helpful to us in staying cohesive and maintaining high performance standards across the many designers owning different parts of this puzzle. We built a Sketch library to capture the foundational styles we aligned upon in our early dev collaborations: color, type, icons, ui elements, and components.

Using the library, we built master files for all core experiences: articles, fronts, navigation, labeling, galleries, video, and sponsored content. When things change, it’s built into our design process that we update these master files. Where needed, we create additional design documentation to manage the many use cases that come with covering such a variety of topics and sharing content across our network.

Outcome

Our goals were to do no harm to revenue or engagement, while improving the experience and reducing site load times. Happily, we did what we set out to do!

• Revenue and engagement numbers are either flat or up with the new site. Scroll depth on key pages has nearly doubled!

• Many users have responded positively in both voluntary feedback and baseline user testing, sharing thoughts like: “much better after the update, everything loads much more smoothly,” “refreshing, easy to navigate,” and “new web site is easier to read!”

• This site is indeed the fastest news site in the industry! As of January 2020, USA TODAY’s first paint is at 0.5 seconds, ahead of our past selves and all major competitors. (See recent Speedcurve stats)

• Anecdotally, advertisers are more excited than before to have a presence on our page, and to take advantage of our new sponsored experiences. Time will tell if sales numbers agree.

This is just the beginning, and iterations are ongoing. Coming soon are new experiences for videos, galleries, search, special events, major breaking news and more. Eventually these will all be adapted for our local properties, which, at the time of this writing, include 300 papers in 48 states. We’ll keep evolving our styles and tooling as we go!