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.
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.
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.
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.
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.
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?
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?
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.
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.
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.
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.
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.
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.
Along with other findings and insights we gathered in the above researches, we came to point where some clear themes began to appear:
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)
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:
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:
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.
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.
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.
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.)
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
Our team held several sessions of usability tests. Below were our learnings and actions taken, which were already addressed in the above versions:
Here are some highlights through our short but intense journey:
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.
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.
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.
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.
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.