<-
Return back home
Home / abcnews
ABC News
The design system behind FiveThirtyEight's coverage
ROLE
Art and Design Intern
TEAM
Emily Scherer
DISCIPLINES
Product Design
Visual Design
TIMELINE
7 Months
ROLE
Product Designer
TEAM
Emily Scherer
DISCIPLINES
Product Design
Visual Design
TIMELINE
7 Months
ROLE
Product Designer
TEAM
Emily Scherer
DISCIPLINES
Product Design
Visual Design
TIMELINE
7 Months
Overview
A newsroom where design meets data
At ABC News and FiveThirtyEight, I collaborated directly with journalists, analysts, and editors to turn raw datasets into stories people could understand. I designed graphics for politics and sports, created art direction for major data stories, and explored prototypes for a refreshed FiveThirtyEight interface during my downtime.
Challenge
Two rounds of testing surface the same issue: navigation
To understand the landscape, I compared FiveThirtyEight with The Pudding, NYT Graphics, and Vox.
Across the board, the strongest experiences simplified their navigation, spotlighted key takeaways, and made interactive charts feel effortless
The Pudding led in usability — a benchmark that highlighted how much opportunity FiveThirtyEight had to simplify its experience.
User Interview
Readers want to understand the story, but dense data and complex layouts get in the way
I interviewed data journalists, editors, and frequent readers to understand how people actually experience FiveThirtyEight’s content today - and what gets in the way of clarity.
Competitive Analysis
What leading data-journalism platforms get right
The Upshot
Vox
The Pudding
To understand the landscape, I compared FiveThirtyEight with The Pudding, NYT Graphics, and Vox.
Across the board, the strongest experiences simplified their navigation, spotlighted key takeaways, and made interactive charts feel effortless
The Pudding led in usability — a benchmark that highlighted how much opportunity FiveThirtyEight had to simplify its experience.
Solution
Elevate 538 — Designing clarity into every touchpoint
I proposed a refreshed visual system and layout direction I called Elevate538. It streamlined navigation, reduced visual clutter, and made charts and story modules easier to scan, helping readers move from headline to insight with less cognitive load.
Design Decision
Charts that explain, not intimidate
I rethought key visualizations with clearer hierarchy, stronger contrast, and focused annotations. Instead of showing every possible variable at once, the designs highlight the main story first, then reveal deeper detail on interaction.
Design Decision
Finding the right story without feeling lost
The updated structure surfaces core areas like Elections, Sports, and Science more prominently and groups related stories more intuitively. Readers can move between big packages, explainers, and live updates without backtracking through cluttered menus.
Design Decision
Reusable system for breaking stories
Alongside the case study, I created a library of on-air and social templates for political and sports coverage. These frames gave the team a faster way to package polling updates, projections, and recaps while keeping typography, color, and composition on-brand.
Exploration
Trying richer interactions, then simplifying
I explored layered chart interactions, animated transitions, and more experimental layouts to help explain uncertainty and change over time. In collaboration with editors, we pared these ideas back to interactions that were easier to maintain and aligned with newsroom timelines.
Impact
Bring clarity and efficiency to digital journalism
What different did we make?|
Production speed
40%
faster graphic turnaround using templates
Adoption
100%
By the beginning of 2022, the FiveThirtyEight team adopted the design
We tested Elevate538 concepts with editors and readers across two rounds. The refreshed navigation reduced time-to-article in moderated sessions, and editors noted that the new chart hierarchy made it easier to identify the lead insight in complex datasets.
The template library I built for on-air and social graphics was adopted by the team for election night and midterm coverage — packaging polling updates, projections, and recaps in a fraction of the time it previously took.
More importantly, the work shifted the conversation. Before Elevate538, the team discussed redesign in abstract terms. The prototypes gave them something concrete to react to, critique, and build on.
What’s next
Further development
Using my templates and prototypes to further develop the site.
abc.news
Overview
A newsroom where design meets data
At ABC News and FiveThirtyEight, I collaborated directly with journalists, analysts, and editors to turn raw datasets into stories people could understand. I designed graphics for politics and sports, created art direction for major data stories, and explored prototypes for a refreshed FiveThirtyEight interface during my downtime.
Problem
Understanding where the experience breaks down
FiveThirtyEight's content was strong but the experience around it wasn't keeping up. Navigation was cluttered, charts were dense without clear entry points, and readers struggled to find the lead insight in complex stories.
User Interview
Readers want the insight, not the entire dataset
I interviewed data journalists, editors, and frequent readers to understand how people experience FiveThirtyEight today and where clarity breaks down.
Competitive Analysis
What leading data-journalism platforms get right
The Upshot
Vox
The Pudding
To understand the landscape, I compared FiveThirtyEight with The Pudding, NYT Graphics, and Vox. Across the board, the strongest experiences simplified their navigation, spotlighted key takeaways, and made interactive charts feel effortless. The Pudding led in usability, a benchmark that highlighted how much opportunity FiveThirtyEight had to simplify its experience.
Solution
Elevate538: a refreshed visual system for FiveThirtyEight
I proposed a refreshed visual system and layout direction I called Elevate538. It streamlined navigation, reduced visual clutter, and made charts and story modules easier to scan so readers could move from headline to insight faster.
Design Decision
Charts that explain, not intimidate
I rethought key visualizations with clearer hierarchy, stronger contrast, and focused annotations. Instead of showing every possible variable at once, the designs highlight the main story first, then reveal deeper detail on interaction.
Design Decision
Finding the right story without feeling lost
The updated structure surfaces core areas like Elections, Sports, and Science more prominently and groups related stories more intuitively. Readers can move between big packages, explainers, and live updates without backtracking through cluttered menus.
Design Decision
Reusable system for breaking stories
I created a library of on-air and social templates for political and sports coverage. These frames gave the team a faster way to package polling updates, projections, and recaps while keeping typography, color, and composition on-brand.
Exploration
Trying richer interactions, then simplifying
I explored layered chart interactions, animated transitions, and more experimental layouts to help explain uncertainty and change over time. In collaboration with editors, we pared these ideas back to interactions that were easier to maintain and aligned with newsroom timelines.
Impact
Bringing clarity and speed to how the team ships stories
What different did we make?|
What different did we make?|
Production speed
40%
faster graphic turnaround using templates
Adoption
100%
By the beginning of 2022, the FiveThirtyEight team adopted the design
We tested Elevate538 concepts with editors and readers across two rounds. The refreshed navigation reduced time-to-article in moderated sessions, and editors noted that the new chart hierarchy made it easier to identify the lead insight in complex datasets.
The template library I built for on-air and social graphics was adopted by the team for election night and midterm coverage — packaging polling updates, projections, and recaps in a fraction of the time it previously took.
More importantly, the work shifted the conversation. Before Elevate538, the team discussed redesign in abstract terms. The prototypes gave them something concrete to react to, critique, and build on.
What’s next
Further development
The templates and prototypes are now the foundation for the team's ongoing development of the site.
abc.news