USA Today

JP.
Agency

“We are reimagining and reinventing our digital experiences.  Not just redesigning news websites; but developing products that will attract new audiences, build enduring relationships with them, and better connect people to their communities.”

Jason Jedlinski
VP Product Management · USA Today Network

Product
Brief

Business Challenge

We are competing for the attention of our new segments. USA Today’s website and apps are secondary to preferred aggregators (social, reader apps, and digests) and when users do engage their attention span and visit is short lived.

The Problem

The current mobile template is ​inflexible​,  ​limits our content creators​ and delivers a ​poor user experience​ to the readers.​

Solution

Leverage Gannett’s access to 109 local newspapers to provide users with a one of a kind experience that allows them to quickly digest unique perspectives across the country on issues that matters to them.

Our Goal

To honor the brand’s iconic heritage while also conveying the freshness and sense of urgency readers expect, enhancing the mobile experience.
Make USA Today top-of-mind in America through a perceptive experience that exposes users to diverse but relevant perspectives.

About
USA Today
Network

The Client

USA TODAY is a multi-platform news and information media company. Founded in 1982, its mission is to serve as a forum for better understanding and unity to help make the USA truly one nation.

USA Today Network

In March 2017, USA TODAY sites had nearly 92.3 million unique visitors* and 860MM page views*.

Users across the spectrum know and trust USA Today.

86%

Have heard of USA Today

38%

Trust USA Today

8%

Distrust USA Today

Design 
Principles.

These are the primary design principles that guided us to explore the USA Today Network redesign. From a creative standpoint, consistency under these principles will make our design better, easier to use, and practically invisible.

1

Design System

Develop content iteratively as a product through hypothesis driven experimentation, iteration and validated learning. Employ a “systems” approach to design, considering implications of design beyond an immediate project.

2

Prototyping

To accelerate the design process, the team focused in create prototypes before implement the visual system. This process enabled us to explore the product's design possibilities more quickly, conduct more frequent user testing. For the client presentation, we choose Webflow as the primary tool to prototype in HTML and Principle to create short videos and gifs to explain our ideas.

3

Visual Exploration

Consider following the USA TODAY guidelines as a tool was helpful to design team make the right choices when creating communications—what to do and what not to do with the logotype, colors, typography and other visual elements.

4

Iterative Approach

We know not everyone consumes news in the same way. We focus our attention on what grabs yours, and create experiences that make the news the most accessible you’ll find.

Visual
Exploration.

Besides of delivering an amazing user experience, the team focused on creating tons of design/visual exploration under the USA TODAY brand guide, mainly based on the newspaper's style heritage. As a result, we achieved a unique look-and-feel for the product.

Visual
Identity
System.

In order to ensure the fidelity of the brand guide and to design for scales, we create a particular visual system to the digital application, this practice makes able the revising, testing, and evolving the components of the visual identity.

Color Weight

Below the USA TODAY Master brand, there are 6 verticals—News, Money, Sports, Life, Travel and Tech—are known as Sub-brands.
Revamp the USA TODAY color palette and apply them to the brands and products of the local markets.
We have an opportunity to distinguish our bold, colorful brand and how we visualize content.

News
Money
Sports
Life
Travel
Tech
Weather
Opinion

Typography

Futura Today is the new family of fonts. It is a contemporary, more legible and flexible update of our heritage font, Futura. It's applied for main headings, while for the body text, is used Chronicle Family.

Color Weight

Below the USA TODAY Master brand, there are 6 verticals—News, Money, Sports, Life, Travel and Tech—are known as Sub-brands. Revamp the USA TODAY color palette and apply them to the brands and products of the local markets. We have an opportunity to distinguish our bold, colorful brand and how we visualize content.

Prototype First

"I do believe that designing with code is essential to ensure the quality of the designs, facilitate the comprehension of the user needs and learn with the real world constraints."

Mobile Redesign

According to some internals researches, has been targeting a significantly raise of users on mobile, the USA Today has launched the first phase of the redesign project totally focused on mobile experience.

Home Feed

We created a feed on the home page separated by categories to value the density of content that the USA Today offers around their 160 local channels. The main navigation is based on "hot trend tags" at the top of the page. The core of this idea is to give more dynamism of the user immersion among the various themes of the day.

Navigation

We created a new way to navigate between the editorials. Instead show the categories, we provide a list of the trends of the day. As soon as the user start to consume news, the list update automatically.

Iterative
Approach.

Working within the guidelines of the original product brief we created 4 concepts for the USA TODAY Network:

Business Challenge.

We understand that you are more enriched, responsible and entertained from a broader point of view so we curate a content experience driven by your personality as much as your behavior. We look past the next click and focus on what will bring you back tomorrow and every day.

After presenting and receiving feedback on these initial concepts we decided to move forward with Pulse of the Nation as it fell most in-line with the strategy and business objectives.

End-user Need.

Our target users have a transactional relationship with news that only improves with a broader, more diverse perspective.

Solution.

Leverage Gannett’s access to 109 local newspapers to provide users with a one of a kind experience that allows them to quickly digest unique perspectives across the country on issues that matters to them.

Our Goal.

To honor the brand’s iconic heritage while also conveying the freshness and sense of urgency readers expect.

Make USA TODAY NETWORK top-of-mind in America through a perceptive experience that exposes users to diverse but relevant perspectives.

Pulse of the Nation.

Description.

Pulse of the Nation is a unique digital experience that lets users observe how different parts of the country are talking about a national issue. We do this by surfacing the most popular content across the USAT Network (not limited to usatoday.com) written about a national issue or topic.

Solution.

Most popular content can be determined using page views. Examples topics for this feature may include the Women’s March, Grammys or the Super Bowl. The Pulse of the Nation page is accessible via a topic tag on the navigation ribbon.

Solution.

If a topic is “pulsing” it will have a special animated icon. Clicking on the tag will bring the user to view all the articles that are trending across the nation under the tagged topic.

Solution.

After engaging with a particular article the user can navigate between all the content within the package via a recirculation reel at the top of the page.

Add to Queue.

Description.

As a further exploration of how to keep users engaged through a story-reading experience, we created Add to Queue. Many competitor websites offer users the option to “save” stories they’d like to read later, but statistics show that users rarely, if ever, go back to their “saved” articles once they’ve left the initial article page. 

This solution guarantees that the story following the user’s current article will be one in which they’ve expressed interest.

Since the new article page features an infinite scroll, the solve to the “one and done” behavior is a way for users to add related stories to immediately follow the article they’re currently reading. This solution guarantees that the story following the user’s current article will be one in which they’ve expressed interest, thus leading to a continuous reading experience that keeps the user engaged past their first click.

The experience does not interrupt the immediate reading experience, but rather allows the user to build their own customized queue of articles personalized to their interests.

Navigation

The feature manifests itself as an “Add” button on the side of in-line related articles that when pressed show the user that the article is now waiting for them immediately following their current story.

Solution.

As an additional benefit, clicks on the Add to Queue feature could be tracked and analyzed to better serve up interesting/popular content to users in the same segment as the clicker.

Personal Hub.

Description.

The breadth and depth of news can often be overwhelming, and throughout its history USA TODAY has pioneered ways to make the news more easily digestible, approachable and visually exciting. As technology evolves to allow us to more easily tailor news content to the individual, we thought through a concept called Personal Hub.

Navigation

Users can access their Personal Hub via an ever-present icon in the top right corner of their screen that indicates there are 5 headlines picked specifically for their interests. The headlines refresh themselves once a user has read any of the listed stories, allowing for a condensed form of navigation on the USAT platform.

Dan Hou

VP, Product Strategy

Rich Bloom

Creative Director

Catherine Colwell

Senior Product Manager

JP Teixeira

Senior Visual / Product Designer

Fernando Castro

Art Director

Theo Robinson

Visual Designer

Jess Jung

Senior Interaction Designer

Jessica Royals

Interaction Designer

Jenny Madorsky

Project Manager

Tiffany Scourby

Group Engagement Director

Todd Coen

VP, Client Services

Sarah Buckler

Associate Program Director

Charlie Pinnix

Senior Web Engineer

Erica Schlaikjer

Creative Strategist

Mike May

VP, Strategy
Next: Design Craft