A Clear Path to Informed Voting

How might we foster political participation without political division?

8 minute read

Project Overview

The Brief

Develop a minimum variable product for a new edtech app. With no client research, I was tasked to uncover a compelling user problem, brainstorm solutions and develop an end-to-end application.

My Role

UX / UI Designer

My Role

8 weeks

The Challenge

100-hour deadline to transform essential, context-heavy political information into user friendly layouts.

The Problem

Youth voters, aged 18-34, make up a significant part of the electorate, yet are the least engaged. Barriers like information overload, distrust and exposure to harmful rhetoric create a sense of disconnection from democracy, making it difficult to capture and sustain their interest

The Solution

A comprehensive political education app designed to empower young voters by offering an accessible, trustworthy and engaging way to navigate the complexities of politics and participate in democracy.

DISCOVERY

Secondary Research

Inspired by the intensity of the 2024 election, I set out to understand youth voters' perspectives on the political environment and uncover common pain points.

To do this, I began with secondary research to define the problem space, then conducted user interviews to validate it as a genuine issue worth addressing.

85%

Say they have limited access direct civic information, causing lower levels of confidence to participate.

User Interviews

Building on secondary research, I conduced user interviews to validate the problem space that is something worth solving.

Interview Approach

Methodology

In-person & remote.

Duration

30 minutes each.

20%

Feel supported to act on political concerns, with only 1 in 5 receive guidance from parties or community.

Number

6 participants

Age

5 aged 18-30 ; 1 aged 49

Interview Goals

01. Understand how they learn & engage with politics.

02. Detect needs, pain points & opportunities.

03. Identify information & learning preferences.

Key Findings

75%

Say social media is their primary source of political information, but only 8% trust its’ credibility.

Question Strategy - 3 Groups

01. Voting experiences & behaviors.

02. Engagement & learning preferences.

03. Mass media impact & information overload.

User Feedback

I created an affinity map to organize feedback into categories so I could discover common themes and patterns around user motivations, challenges and preferences.

Affinity Map – Key Patterns

Core Pain Points

Core Needs

01. Information Overload

The abundance of political information makes them feel overwhelmed and discourages them from active participation.

02. Distrust in Primary Sources

They distrust most information due to the prevalence of biased or unreliable information, causing disconnection.

Frequent exposure to hate speech makes a constructive democratic experience feel out of reach.

03. Social Media Hostility

DEFINE

Synthesizing Insights

Although the target audience spans from 18 to 34, they share common challenges. To capture this, I crafted a unified user persona that reflects their core experiences.

Sarah wants to participate in democracy, but is discouraged by the complex & intimidating nature.

IDEATE

Brainstorming Soultions

With key user pain points and needs identified, I rapidly explored design solutions to provide a clear, engaging and unbiased view of elections, candidates and policy stances.

Opportunity Areas

Candidate Profiles

Background info, campaign initiatives & policy stance.

User Reporting

Up and downvote post containing hate speech or misinformation. 

Customizable Notes

Annotate candidate profiles to track likes and dislikes.

Misinformation Analysis

Flag trending news or social posts with potential bias.

Educational Resources

Micro-learning tools for effortless political education.

Community Discussions

Discussion forums, simulated debates, Q&As with experts.

Empathizing to Refine Opportunity Areas

To narrow down the scope, I mapped the target audiences current (before Electify) and future (after Electify) user journey, to help me identify the most valuable opportunities to guide the design direction.

MVP Feature Set

Visualizing their current journey allowed me to pinpoint how and when pain points arise, which revealed the importance of a candidate comparison feature and guided the design direction:

Essential personal details and political history.

Policy stance quiz and candidate matching based on user answers.

Campaign summary, policy focus, goals if elected.

Policy categories with side-by-side descriptions of candidates’ stance.

Current Journey

Future Journey

01. Candidate Comparison:

02. Candidate Matching Quiz:

03. Campaign Overview:

04. Comprehensive Policy Stance:

User Flow

Once the design focus was defined and approved, I structured the user flow to clarify how users discover and interact with the core comparison feature.

DEVELOP

Layout Exploration

After establishing the user flow and core feature, I quickly sketched layout concepts before developing wireframes.

Both the home and comparison screen are the most context heavy screens, so the goal was to explore the structure of information and lay a foundation for the two most essential screens in executing the concept.

Version 1

Version 2

Version 3

Content-First Wireframes

Since this is a content-heavy application I adopted a content-first approach. I started developing mid-fidelity wireframes, fully populated with text.

This strategy allowed me to refine the structure and flow around real content, making it possible to conduct more effective usability test with context-rich feedback on the apps’ core functions.

Home Screen Sketch Exploration:

Version 1

Version 2

Version 3

Comparison Screen Sketch Exploration:

VALIDATE

Testing the Concept

Testing unfinished screens allowed me validate early design decisions and hone the bones of the platform, before developing high-fidelity wireframes. This way, participants could focus on the concept effectiveness rather than the aesthetic.

This enabled users to give rich feedback on foundational elements that did not meet their needs, leading to impactful iterations that brought the concept to life.

Test Approach

Methodology

In-person ; moderated.

Duration

30 minutes each.

Objectives:

Number

6 participants

Age

5 aged 18-30 ; 1 aged 49

Evaluate if access to comparison feature by clicking on candidate avatar is clear to users.

Evaluate if users can effectively and easily compare the candidates.

Evaluate if users can save their comparison progress and locate it in profile easily.

6/6

1/6

4/6

Test Goals

01. Validate concept & design decisions.

02. Measure task completion.

03. Discover potential usability issues.

04. Evaluate effectiveness of comparison feature.

Pass/ Fail:

Measurable Results:

Participants click candidate avatar to begin the task with no missed clicks.


Participants successfully compare candidates with little confusion or assistance.


Participants save and locate their progress in their profile within 15-30 seconds.

Key User Insights

Participants validated the concept, expressing a great need for a simple and neutral place to learn about candidates, but they reveled significant usability issues with the comparison feature that needed tweaking.

Cluttered Layout

Poor organization hindered usability and required high cognitive load.

Ineffective Comparison

Structure limits ability to easily compare candidate differences.

Media Skepticism

Including news decreased the value of the app and caused distrust.

ITERATIONS

01. Background Card Iterations – The comparison screen

Version 1

User Insight

“The background card is cluttered and includes information I don’t find useful. The only background information I really care about is their age, degrees, stuff like that.”

Version 2

Background Content Focus

Refined focus to only essential details, that promote a comprehensive understanding of candidates. Added a link to their official site and their elected vice president.

Information Hierarchy

Categorized content into drop drown, reducing the cognitive load of the card and giving user greater authority over displayed content.

Value of Change

These iterations improve the user experience by reducing visual clutter, allowing for quick grasp of minor details, with an option for further investigation via candidates official website.

02. Policy Section Iterations – The comparison screen

Version 1

User Insight

“It would be more helpful to have a policy categories with detailed descriptions so I can easily compare stance on specific issues, rather than only policies that the candidate focuses on.”

Version 2

Comprehensive Policy Categories

Curated a list of trending policy topics displayed by default, paired with an extensive range of other categories. Organized details with dropdowns.

Candidate Matching Quiz

Added second access point for policy stance quiz to reduce chances of users overlooking an important element for their personal stance discovery.

Value of Change

These iterations improve the user experience by making it easier to explore a wide-rang of policy topics and compare candidates’ stance. This enables a lower cognitive load to compare, contrast and for personal stance discovery.

MID-FI SCREENS

VALIDATE

Usability Test

As the first test focused on assessing the effectiveness of the content and app concept, the goal of this usability test was to observe how user interact with the high fidelity prototype to see how easily they can navigate the iterated candidate comparison feature.

Test Approach

Methodology

In-person ; moderated.

Duration

30 minutes each.

Objectives:

Number

6 participants

Age

5 aged 18-30 ; 1 aged 49

Evaluate if the revised feature enhances users’ ability gain comprehensive overview.

Evaluate if users can easily discern candidate differences via comparison sections.

Evaluate if it’s intuitive that the media section included only candidate-speaking content.

6/6

5/6

4/6

Test Goals

01. Validate iterations.

02. Assess ability to compare candidates.

03. Discover potential usability issues.

Pass/ Fail:

Measurable Results:

Participants click candidate avatar to begin the task with no missed clicks.


Participants utilize the policy section to pinpoint candidate differences without assistance.


Participants express trust in the apps’ neutrality without needing an explanation of concept.

Key User Insights

Participants validated an effective app concept and user friendly comparison feature. Their feedback revealed minor cosmetic issues to iterate on.

Biased Color Scheme

Users associated blue with Democratic Party; adjust color scheme to reduce perceived bias.

Source Disclaimer

Clarify that information is directly from candidate campaign site to enhance user trust.

Policy Section Priority

Place policy stance section before campaign highlights, as user’s find it more valuable.

ITERATIONS

01. The Selection Screen – Source Disclaimer and Color Scheme

Version 1

User Insight

“The all blue color scheme makes the app seem biased towards the Democratic Party since it’s traditionally blue, so I would change the color to something that won’t make users question the app’s neutrality.”

Version 2

Neutral Color Scheme

Updated the color scheme to a neutral palette with purple accents to ensure a nonpartisan look and feel.

Source Disclaimer

Added disclaimer before the starting the comparison feature to reinforce transparency and trust with users.

Value of Change

Purple was selected intentionally, as it symbolizes neutrality by blending both traditional party colors (red and blue). The change in color scheme and adding a source disclaimer coveys transparency and builds trust with users.

02. The Comparison Screen – Source Disclaimer and Color Scheme

Version 1

User Insight

“I think the policy section should come before the campaign highlights that way you can compare the candidates in detail right away. If I were using this I would want to access this section with minimal scrolling.”

Version 2

Built Policy Dropdown

Prototyped the policy stance dropdown to enhance the concept effectiveness.

Campaign and Policy Section Reorder

Placed comprehensive policy section before campaign highlights to enable quick assess to the most revenant information for comparing candidates.

Value of Change

This prioritization enhances the user experience by making it easier to evaluate candidate positions at a glance, supporting a smoother, more intuitive comparison process.

DESIGN SYSTEM

01. Color Palette

02. Typography

03. Layout Grid and Spacing System

8pt Spacing Grid

Spacing is based on baseline grid for vertical rhythm. When spacing out components use a figure of 8 to keep consistency.

04. Component Library

PROTOTYPE

REFLECTION

Personal Sentiment:

As a youth voter myself politics is a topic I often avoid, a sentiment shared by many of my peers who are turned off by the divisive rhetoric. Witnessing the heightened divide and hate speech during the 2024 election inspired me to develop a solution to this problem.

With free range to choose a problem space, I saw an opportunity to design an impactful solution to this problem where youth voters could embrace democracy rather than avoid it.

Personal Growth:

This project greatly improved my skills as a designer, particularly in developing and adhering to a design system. Electify’s context-heavy nature, with limited design space, made it essential to follow a design system to maintain consistency, clarity and usability.

Project Challenges:

This project presented a major challenge to overcome: condensing large amounts of complex information into small, visually appealing and digestible card components. The comparison feature made this even more challenging as it required side-by-side displays of two different sets of information.

To overcome this challenge, I stuck to a strict design system and heavily relied on collaboration, embracing both minor and major feedback to consider for iterations. I believe this collaboration greatly helped me in balancing opposing views while designing minimalist.

Previous
Previous

Samaritan's Purse Inspires Change by Streamlining Donations