Election night can be an intense, epic adventure for users. It’s a massive labyrinth of information to navigate — with updates in every form and on every surface. Users often look to find a clear answer to one simple question: What’s the latest election result? Usually my role is a design lead, but I embraced this side quest to level up my skills.
A pixel version of me, Holly Braford.
Team
product designer (Me, Holly Braford)
product manager
iOS, core and elections engineers
politics editors
content designer
news designers
Election night brings a high volume of notifications to lock screens.
The challenge
Our quest was to make complex election night coverage more accessible and to make sure the audience stays connected to the most important updates. The solution was a live activity for mobile lock screens. This feature provides real-time election results at a glance, so that users stay informed without needing to unlock their phones or search through dense content.
It is dangerous to design alone and wise to take a product requirements document along.
The approach
Insights
To understand users needs for election visualizations, I turned to user interviews.
Many shared they want to understand things quickly and not do a ton of work to get the information.
Readers find The Post’s election coverage invaluable but want to lessen their cognitive load on election night.
Users want a range of visualizations on election night, but the balance of power was top priority.
Illustration of user interviewees.
“(I want) to understand who's gonna win, right? And like what are the factors in play that I should be watching for.”
Margery
“Politics is a big thing for me. I’m very interested in the balance of power . . . that combined with what's happening. I need help to unpack what I’m seeing.”
William
“I want to get a sense of what's the total.”
Heather
Ben Kirschner created candidate illustrations for The Washington Post.
Existing work
I audited election design work that was already in-flight. I used the established color palette and candidate illustrations, but had to abandon The Post’s typefaces to align with iOS requirements for live activities. The graphics team started concepts for visualizations but needed to align with iOS requirements for live activities.
Sketches and concepts for standby, expanded, lock screen, compact and minimal modes.
Concepts
I sketched and made wireframes then created medium fidelity designs. After reading and then rereading the requirements I refined and pressure tested the designs with real content.
In-app message
I designed the visuals for an in-app message and worked with a content designer to promote the live activity on Election Day.
Delivery
I worked with engineering to make changes to account for the dynamic Island requirements.
Images from the live activity on Nov. 5 and 6.
The results
Nearly a quarter of app users accepted the live activity. Among those users, 75 % clicked-through on the lock screen to get to the app.