Elections 2016

Reimagining USA TODAY NETWORK’s 2016 general elections and outlook experiences for desktop and mobile web.

Elections 2016 on desktop
Elections 2016 on mobile

My Role

I was the lead user experience architect from the inception of the elections outlook experience to the night of general election results.


Presidential elections is one of the most pivotal times for any news organization. Happening once every four years, it is well anticipated but advancements in web capabilities make it a new and different challenge every time. With the political climate of 2016 being as contentious as it was, it only upped the ante even more.

The Challenge

How do you balance the conventions of the past elections along with the innovative new web? Many elections websites look very similar. Elections are often red and blue with hints of yellow or green, but what really sets one website apart from the other is the way it functions. Crafting this experience is pivotal to making a successful elections experience.

Elections 2016 in two phones

The Approach

Interviews, Competitive Analysis, Sketches, & Wireframes

Knowing that this experience was going to be a multi-month complex two-part project, I created a user experience strategy that would match the depth necessary to create a premier elections experience. In the initial phase, I created questions for user interviews, completed an extensive competitive analysis, and collected analytics for past experiences that culminated in multiple presentations for stakeholders.

Site Map

Election 2016 site map


I brainstormed and created sketches by synthesizing the information I gathered from data analytics, competitive analysis, and user interviews. This resulted in a series of modular components that would enable stakeholders to stack and rearrange them as desired based on priorities that still needed to be determined.

Election 2016 sketches


Once a direction had been set, I created a series of low-fidelity wireframes and a wireflow to show how a user would go through the experience. Since the website was released in two phases with the outlook experience launching first, the structure of the site (i.e., navigation and layout) needed to scale in order to accommodate both sites. In addition, the wireframes needed to incorporate the users’ and editorial needs. Editorial, who was programming all of the content and stories, was a major stakeholder for this project.

Election 2016 wireflow
Election 2016 wireframes Election 2016 wireframes Election 2016 wireframes

Final Steps

Taking the wireframes and turning them into an InVision prototype, I wrote and facilitated user tests to see how the new design resonated with USA TODAY’s users.

Repeating the Process

Once the outlook section was in development, I went directly into wireframing the general elections night experience. Since much of the design work and the placement of modules were completed within the outlook phase, I was able to focus primarily on the navigation changes and edge cases.

Election 2016 wireframes Election 2016 wireframes Election 2016 wireframes
Election 2016 wireframes

The Solution

Mobile First Experience

All of modules, including the large election results data sets were created to look like they were meant for mobile viewing (and to look great on desktop too).

Election 2016 mobile first 1 Election 2016 mobile first 2

Snapshot to Detailed View

We created an experience that had two levels, one for users that wanted a summary of what was happening with the election and another for those who wanted a deeper dive into the details.

Elections 2016 snapshot

Exposed Navigation

Election night happens in a blur, so the exposed navigation allowed users to get to their destination quickly and helped to increase discoverability.

Elections 2016 Exposed Navigation on Desktop Elections 2016 Exposed Navigation on Mobile

The Response

The 2016 election night experience had the highest engagement of any previous election experience.

Case Study


Creating a user experience strategy for a mobile app that sends letters to military service members.

View Case Study

Case Study

VR Stories

Redesign of USA TODAY NETWORK’s mobile app featuring virtual reality (VR) videos and 360 degree photos.

View Case Study