VOTESMART
by
FiveThirtyEight
Timeline: 2 weeks
Platform: Mobile with HIG
Tools: Figma, Asana, Toggl
Team: Sonia, John, Howard
My Roles: Product Owner, Feature Research, UX/UI Design, Prototyping, Branding.
Context
Nate Silver, the founder of FiveThirtyEight (as there are 538 electors in the US electoral colleges), was a data scientist whose forecasting system predicted election outcomes favoring President Obama in 2008 and President Trump in 2012 contrasted most of the other data analysts. Now owned by ABC News, FiveThirtyEight continues to whet the world through statistical analysis from politics to sports and pop cultures.
Today America is once again passing through a divided and sensitive time, the upcoming election day will determine the power balances within the political parties, as well as hosting several critical ballot measures. FiveThirtyEight, as a venerable source to political statistics, wishes to create an app that helps informing voters on the candidates and ballot measures, as well as helping them to get the votes in.
Objective: Deliver an app design and a prototype at mid~hi-fidelity in two weeks.
Kickoff
The stakeholder’s mission was to inform and assist voters, but there was no clear vision or direction on how the app will work and what services it would give. Within two weeks, we needed to figure out the app’s direction and create a detailed design and prototype. To accomplish this, each step of the design process is critical, and we must stagger these steps wisely in order to efficiently meet the deadline.
As the product owner, I created a milestone calendar to help everyone agree on the timeframe for achieving the goal. Then we used Toggl to measure individual time-spent and set us up with Asana’s kanban board to track sprint tasks.
Stakeholder's Quandries
Starting with a blank slate, there were several high-level quandaries to consider before deciding on the app’s core directions. The political voting field is a complex space to navigate in. We wanted to make an app that not only fills in the blanks, but also embodies FiveThirtyEight’s mission and expertise. The following four items were the biggest point of discussions.
Target Users
Who will be interested in our app? Should we gear our app toward a specific audience, such as young voters, infrequent voters, issue-oriented voters, etc? Is our app nonpartisan or has leaning toward certain ideals or parties.
Voter Information
What does it mean to be “informed” as a voter? Is this an app that keeps people up to date on voter registration and polling locations? Does it provide information about the issues on the ballot? Or does it provide further information in order to broaden voters’ perspectives?
Journalism
FiveThirtyEight is first and foremost a data journalism publication. A direct conversion of it to a mobile app would be a newsfeed app, which also informs voters on issues and candidates sporadically. Will the actual app also provide the same content?
Activism
A well-informed public would want to do more than just vote. Should our app direct users to various groups in order to encourage them to become more involved? If that’s the case, will the app’s impartiality be jeopardized?
Having these considerations in mind, we began our research seeking leads and insights.
RESEARCH
Competitive & Comparative Analysis
Our first step was to conduct a comprehensive research on voting-related apps. Moreover, we searched through shared articles and discussions on how apps can be used to engage voter participations. One lively discussion even within the team was whether it was sensible to have social features that goes so far as to encouraging “ballot selfies.”
Additionally we constructed a feature/criteria inventory, in which we graded how different app categories approached the aforementioned items. With this we got a better grasp of what was out there, what was being done, and things we could try or might avoid.
Interviews and Survey
Concurrently we ran surveys and conducted interviews with a diverse group of people. The quantitative and qualitative data gathered were significant and compelling, pointing us a clear direction for how the app can best serve the voters and use FiveThirtyEight’s resources and achieve its objective.
Vote Preparation
- Overwhelmed with research and no time to prepare.
- Difficult to find unbiased info.
- Desired to be unpluged from the news.
- Dislike using voter guide booklet.
Asking for help and downloading app
The good news was that people genuinely wanted to be educated. They wanted a tool that can provide them with unbiased, nonpartisan knowledge. And they would prefer the education to be as clear and simple as possible… and catering to their locations.
Motivated to make a difference
What was also encouraging was that whether they believe their votes mattered or not, they would vote to do their part. Many admitted when they are not as informed, they voted along their party line. However, they wish they rather trust their own judgements if they have the means to learn.
Opinions on polling
Since FiveThirtyEight is a data analysis wizard, they can potentially provide trusted polling data for the public. Our researched showed that while people guard themselves on the potential influences, they would still utilize the poll datas to make rational decisions on ballots or incite emotional motivations to vote.
ANALYSIS
Converging on Themes
Along with other findings and insights we gathered in the above researches, we came to point where some clear themes began to appear:
- Majority of voters admitted that they did not know how to vote on every item in the ballot. They have the eagerness to learn and feel the responsibility to cast the vote with full clarity. But they never had time to fully research and were overwhelmed by it.
- They want to download an app that can help them learn, but they want materials that are objective and neutral.
- The app needs to work its educating process into their life style, servicing them digestible knowledge.
- When in doubt, many voters admitted that they would vote along party lines. They did not, however, condone this method of voting and admitted regrets to not having done enough preparations beforehand.
- Research also showed the procedures of registering to vote, selecting voting methods, and filling out the ballots were already common knowledge. This matched with our tech findings, which reveals that this is already a saturated info in most apps.
Personas
Next, we were able to establish two personas based on our empathized insights on our users’ needs. Meet Melanie and Theo, for whom we will build our designs around…
(Click on Slides to Pause)
How Might We...?
To better communicate how we want to resolve the problems for the voters represented by the two personas, we can boil down to these “How Might We” questions:
- How might we help voters to be educated on candidates and issues?
- How might we work the education program into their daily routine at a bite-sized portion?
- How might we incite broader interests on various issues that they are less aware of?
- How might we utilize FiveThirtyEight’s statistical strength as useful data for users?
- How might we assist voters to accurately filling out their ballots during election days?
DESIGN
VoteSmart
An App that Enlightens All
The app we are designing for FiveThirtyEight and ABC News has become a passion project for us. This app has the potential to impact and broaden the perspectives of voters who use it by giving them information and angles to consider on every topics. This app can end old habits of voting along party lines and instead empowering voters to make informed choices on the ballot.
We wanted to provide a digestible and satisfying experience for voters to consume contents by completing tasks on a routine basis. Users would be motivated to keep finishing the tasks and gradually will find themselves more knowledgeable by the days.
Our starting prototype drew inspiration from 3 main sources:
- ActiVote: This was a similar voter preparation app. We loved its info architectures. But it was still short on incentivizing users to return.
- Duolingo: We sampled the visual affordance and education mechanics that bring success to its users.
- FiveThirtyEight: We wanted to utilize data visualization for many purposes, including user acquisitions, voter motivations, visual rewards, and user retentions. FiveThirtyEight can develop the accurate metrics to provide the datas that tells the right stories.
Info Architecture
The graphic above depicts the app’s high-level sitemap. The Dashboard, which serves as a home base, allows users to complete a small number of tasks at a time in one of the three branches.
- My Elections: Tasks in the Election branch are at highest priority. This is where users are informed of candidates and ballot measures, and jotting down user preferences for the election day ahead.
- Polity (Offices/Bills/Policies): Second in priority. Here the users can visit its immense library learning and polling on all government officials, passed bills, and hot-buttoned policies. Here the users get to learn more and broaden their perspectives.
- FiveThirtyEight Publications: These are regular FiveThirtyEight contents. Although very insightful, they are not always directly related to the election. Thus they are lowest in priority.
Melanie's Task Flow:
Election Preparation
Melanie’s flow demonstrates the primary usage of this app as she taps through the tasks to learn about the the candidates and ballot measures, record her educated decisions and eventually fill out her ballot.
Election Preparation
Design Breakdown
Upbeat & Intuitive
The dashboard interface is simple and intuitive when you first open the app. It shows a bar, which fills up over time as more election preparation tasks are completed. Then it displays a few daily tasks that can be tackled with a short amount of time.
Flow A.1 - Learn and Poll on Candidates and Measures
This section of of the demo shows how a user completes several daily tasks which involves with learning about a proposition and a couple of candidates.
Once the users polled on a measure or rated a candidate, the public poll will be revealed. This serves as a visual incentive as well as a drive to vote. (At any point, users can change their polled preferences.)
Officeholder's Roles and Responsibilities Explained
The “info” button opens up a popup window, which explains the roles and responsibilities of that specific office. The popup also includes assessment guidelines on how to evaluate candidates on aspects such as their positions on issues, the characters & leadership needed for the office, as well as their endorsements and affiliations.
Flow A.2 - Time to Rank The Candidates
VoteSmart will prompt the user to rank their favorite candidates after examining the bulk of the candidates. The ranked candidates will appear in the Voter Cheatsheet for future references.
As more tasks are completed, rewards and badges may be earned. Occasionally and sometimes unpredictably, some positives feedbacks are given to encourage the users.
Voter Cheat Sheet
The cheat sheet keeps track of the user’s polls on the propositions and candidate rankings. This cheat sheet will be used by users to fill out the physical ballots as a reference.
Flow A.3 Voting with VoteSmart
VoteSmart will finish the election preparation tasks before the election day draws near. When ready, the app will notify the users that they can start voting.
They can access the cheat sheet to remind them of what they support. They can sign off on the voting task on VoteSmart once the real ballot has been filled out, which will complete the overall progress bar. A digital “I Voted” sticker will be awarded to the users!
Theo's Task Flow
Acquiring Insights
Today on the internet, everyone is continuously exposed to various controversial topics in the society. VoteSmart provides an interactive knowledge bank for individuals like Theo to understand each topic from multiple angles, and it offers the users a chance to poll on their solutions. And they choose, post their insights back on social media to spark informed conversations. The task flow starts with an onboarding flow, which will take Theo directly to the “Polity” branch, where he can learn more. The Weekly Bonus on the Dashboard also assigns users to more learning and polling on current issues and elected officials.
Acquiring Insights
Design Breakdown
Acquisition Channels
Users who joins VoteSmart with an exploration and learning aspiration usually come through promotion posts in social media channels. These posts usually offers several angles to an issue, accompanied with polled datas, and a chance to contribute to the polls as well. Eventually they will be led to a landing page for installations
After the onboarding sequence, the users will be dropped directly into policies, bills, or official description screen. (As shown in Flow B) Here they can have a concise but clearer understanding of the said item and poll based on their discernments.
Flow B.1 Learning, Polling, and Sharing
Based on the category of the promotion post he clicked on, Theo was directed to examine more topics related to labor laws. Each topic description though brief, still provides views from different angles. Next, users can poll from a multitude of solutions. Once polled, they will see the total percentage spread across every solutions. The line graph depicts how the public opinions has changed over the last few weeks.
Sharing Thoughts and Insights
Users may want to share their findings and increase awareness of the topics they read or polled on. The post will display the same descriptions and data as the basis of the discussions.
Political Matrices
Base on how a user poll, FiveThirtyEight provides a reliable metrics that depicts how the user stand in relation to other officials or candidates in the race. These diagrams can be used as visual reference.
The bar graphs shows that while individuals may lean more toward a certain side, they still could have polled on choices that leans toward other side as well. This adds 3 dimensionalities to a candidate.
Flow B.2 Exploring Bills and Officials
Continuing on with Theo’s flow, he then explored other categories including passed bills or government officials, where he learns more about who they are and what they do in their positions.
Government officials, like candidates in elections, can be graded. It will disclose their overall rating once they have been polled. As to bills, the user’s polling will unravel how the measure was previously voted.
Flow B.3 User Autonomy
Eventually the users will find their way to the Dashboard. They can opt to prepare for elections, or look into more politics topics via Weekly Bonus tasks, or read articles and videos published by FiveThirtyEight, which are also excellent sources of information.
VALIDATION
🔧 Usability Test
Our team held several sessions of usability tests. Below were our learnings and actions taken, which were already addressed in the above versions:
- People really liked the idea and the effectiveness of the app and said they’d use it in real life when it was ready.
- Data visualizations needed explanation, but once users understood them they found them valuable.
- Our response: Optimized the copy and added information links
- Cheat sheet for voting was positively received, but it was hard to find for some users.
- Our response: Linked voters’ cheat sheets directly from dashboard prompt.
- Some users asked for simplification, others liked the multiple functions of the app.
- Our response: Adjusting the colors to help people focus on one task at a time.
- One user requested a “Turbo Tax” style progress bar with more segmentation.
💡 Takeaways
Here are some highlights through our short but intense journey:
- The research tell us that the voters shared sentiment about their inability to vote perfectly. However they are not indifferent, deep down they want to improve and vote with informed decisions.
- It’s a love and hate relationship with the Voters Info Guide book. Incomprehensible and dense, but often the only source of information.
- The voter cheatsheet was not the most expensive feature, but it definitely was the most appreciated one.
- As a project owner I was able to connect the researcher and designer cohesively, providing sufficient advice to move everyone forward. However I felt to have over-functioned on the design area. I look for future opportunities to better draw out every teammate’s best selves.
📆 Next Steps
A two-week effort would not be enough to accomplish everything we wanted to do. Here are a few more nice-to-have features that can improve the app further for user satisfaction.
Candidate Profiles
Unlike the ActiVote app, VoteSmart backed by FiveThirtyEight ought to provide more detailed profile on candidates without users to use external links.
Another feature is to add search field on candidate profile for users to skip to informations pertaining to their interests.
Original UI Solutions
Duolingo-styled progress bars are definitely a universal affordance, but I believe we can still find attractive and intuitive UI branding to give VoteSmart’s Dashboard a different and unique appearance.
Epic Calling: Onboarding Video
The onboarding video should provide an upbeat and pleasant animation, which instill new resolve to vote properly and make the right impact they want for their community and the world.
Achievement Collections
The achievement badges in the prototypes are placeholders. I would like to increase fulfillment and motivations with the right visuals. One idea is to collect illustrated portraits and stories of great historic public figures such as Muhatma Ghandi, Martin Luther King Jr., Alice Paul, and so on.