Content Design Case Study: Spectrum News App – Voter Guide

A new “Politics Hub” app section was nearing release

The original "Your Politics Hub" landing screen, with buttons leading to subsections for Elections, Explore Your Government and Politics News.

In 2021 I was a UX Writer at Charter Communications, best known for its Spectrum internet, TV, mobile and news brands. As one of my first assignments, I joined a project to add a new section of politics and elections info to the Spectrum News mobile app.

The new section was initially conceived as a “Politics Hub”, combining pre- and post-election info, details about elected representatives and politics news – all tailored to the user’s local municipality.

Designs were already mature, but the team was in the midst of reducing project scope and adapting to development constraints for first release ahead of the 2021 local elections.

Current designs were still using the placeholder “Politics Hub” name. I was asked to finalize a name for the section and review several entry points and introductory screens. Most of the remaining content was filled in by a 3rd-party API (CivicEngine).

My questions and research led to a new name

I began by asking questions of the lead visual designer and product owners, to understand the user journey and confirm exactly what politics- and elections-related content would be included in the first release.

Screenshot showing voting deadlines, polling locations and other info for the 2021 New York City primary election.

The scope had been reduced to focus on pre-election info, which did not yet exist in the app. Post-election info (i.e. results) and political news were to remain in their current sections, and detailed info about elected representatives had been de-scoped.

The name “Politics Hub” was clearly too broad. It created an expectation for a wider variety of content, obscured the specific utility of the info this section did contain, and would easily be confused with pre-existing section labels like “Election Results” and “Politics”.

I considered the pre-election info that remained in-scope – polling locations, current races and candidates, ballot measures – and realized this kind of info already has a common name: It’s a voting guide.

I checked several local and national news outlets to see what terms they used to title pre-election info. I found a cluster of variations: voter guide, ballot guide, election guide, etc.

I then used Google Trends to compare the relative popularity of these terms. “Voter guide” was the clear frontrunner.

Google Trends graph comparing the relative popularity of "voting guide" and related search terms from 2004 to 2021. "Voter guide" is consistently the most popular.

I rewrote the entry points and landing screen

Along with the rename, I wrote new microcopy for the entry point card on the app homescreen and for the Your Voter Guide landing screen.

My goal was to be more specific about the info Your Voter Guide contained and highlight why it was useful.

Side-by-side of the entry point card. Original: Your Politics Hub. View Local & National Politics Content Revised: Your Voter Guide. Learn about the candidates, the issues, and how and where to vote
Left: The original entry point. Right: The revision with the new name and my microcopy.
Side-by-side of the landing screen search modal. Original: Explore Your Government. Please provide your home address in order to get you the most accurate ballot and elections information. (CTA with search icon: Home Address) Revised: Find Your Voter Guide. We'll create a personalized guide with the tools and info you need to stay informed about the candidates, the issues, and how and where to vote in your neighborhood. Enter your home address to get started. (CTA with search icon: Home Address)
Left: The original landing screen search modal. Right: The revision with the new name and my microcopy.

I added clarity where I could

Although most of the content in the Your Voter Guide screens was filled by API, my questioning revealed that we did have control over some of the section headers within each screen. This opened the door to a few other improvements, like improving this section header on a screen that explains a ballot measure.

Side-by-side of a ballot measure screen, which explains what a Yes or No vote means. The vague header "Measure Votes" was rewritten as "Understand Your Vote".
Left: The original header is vague and scans poorly. Right: A scannable, action-oriented header becomes an anchor of clarity to help voters navigate the legal-ese above and below.

We created new empty-state screens

During development, we identified a need for empty-state screens in a few places where the API might not be able to return info on a specific race, candidate or ballot measure.

I used consistent phrasing in each message, while also explaining the content voters could expect to see on each screen as the election drew closer.


Drag the slider to compare the API-populated screens vs. my empty-state messages.

We also needed an empty-state for the landing screen, in case the user provided an address we couldn’t find or closed the search modal without providing an address.

I realized these were distinct interactions, and we ended up implementing two empty-state messages to help the user in each scenario understand why they weren’t yet seeing voter guide data.

If the user enters an address we can't find, the empty state says "Voter Guide Not Found. We don't currently have voter guide information for the address you provided. Please check back later or enter a different address." The CTA below is "Search for a different address". If the user closes the search modal without providing an address, the empty state says "Please Provide an Address. To create your personalized voter guide, we need to know where you plan to vote." The CTA below is "Enter your home address to get started".
Left: The search modal. Middle: Empty state if we can’t find the address. Right: Empty state if the user closes the search modal without providing an address.

We added a fallback for tricky news markets

The variant landing screen leads with the CTA "Check Your Personalized Voter Guide", followed by explanatory text: "If voter guide data isn't available for your area, use the resources below to learn more about the candidates, the issues, and how and where to vote."

Lastly, we discovered that in some of our news markets, voter guide data wasn’t universally available via the API – in some municipalities within those markets, searching for voter guide info was guaranteed to fail.

For those markets, we designed a variant landing screen so users entering the section wouldn’t land on the search modal right away. Instead they’d see messaging caveating the search function and redirecting them to curated news content if their search came up empty.

Result: A cohesive and engaging “Voter Guide”; more data TK

The updates I contributed helped make the new Your Voter Guide section more cohesive, highlighted its usefulness to voters, and brought the designs in line with Content Design best practices ahead of first release.

Your Voter Guide was added to the Spectrum News app on Monday, October 25, 2021. As of Friday that week, people who engaged with the Voter Guide section had spent an average of 13 minutes in the app per visit, up from 3 minutes for general visits (a 433% increase).

I’ll add more notes on user engagement and usability as data becomes available.