Welect

An icon of a magnifying glass with an eye in it

Project Overview

Picture this.

You’re an American voter unsure of who to support in the upcoming election. You want to make informed decisions up and down your ballot and vote for candidates who will fight for the causes you care about.
‍
That’s where Welect comes in.

Problem

In an era defined by political polarization and widespread misinformation, voters often struggle to find:

Accessible, unbiased info about candidates and their policy positions.
Trustworthy, impartial news coverage about government and politics.

Solution

Create a mobile app that serves as a central hub for trustworthy, easily accessible, policy-driven information about politics. Voters will be able to:

Quickly find out who will be on their ballot.
Compare where candidates stand on the issues.
Browse credible news with sources rated on bias and reliability.

Only 39% of Americans said it was easy to find reliable information about the 2024 election.

(Pew Research, 2024)

SCOPE

Mobile app design, Branding

ROLE

End-to-end UX/UI designer, UX researcher

TOOLS

Figma, Adobe Illustrator, Adobe Photoshop, Miro, Google Workspace

PHASE

Empathize

Goal: Gain a deep understanding the context of the problem, including users’ needs, behaviors, and pain points surrounding finding information about politics and elections.

Research

Major Questions to Answer

How do voters currently gather information about candidates and issues?

What significant frustrations do voters face when seeking election information?

How do voters personally prioritize different types of information about candidates?

What features would users find most valuable in an election information app?

What are potential competitors doing well and poorly, and what gaps do they not fill?

Competitive Analysis

User Interviews

I conducted interviews with 6 American voters to answer my questions about how they gather election information and firmly center the project around users.
I transcribed the interviews in preparation for analysis of the results.

Affinity Diagram

I organized key points from my user interviews into an affinity diagram to identify themes like voters' desire to stay informed about politics and frustrations with lack of information about down-ballot elections. These findings informed my design process by giving me a clearer picture of users' needs and priorities.

By analyzing quantitative data from my interviews, I then ranked the importance of seven key factors voters consider when choosing a candidate. Focusing on the most important information ensures users receive content that adds the greatest value.

Bar graph called Importance of Info on Candidates to Voters

Research Synthesis

I brought together all my research data to uncover key pain points, identify opportunities, and answer the major questions driving the project. Since I want my designs to be heavily research-driven, these conclusions will be a crucial factor in addressing user needs and providing a better product than competitors.

Pain Points

😣

Lack of info about down-ballot races
Lots of opportunity to fill the void of attention on smaller elections, like state & local

😣

Specifics are hard to find
Lack of a popular central place to reliably find candidates’ positions on major issues & compare politicians, leading to voters having a hard time choosing who to support

😣

Time constraints in researching candidates
Some busy voters rely on last-minute searches or surface-level information to make decisions

😣

Too much bias & misinformation
Voters across the spectrum are frustrated with media bias & misinformation, leading to a lack of trust in info

😣

High volume of media
An overwhelming amount of news & other media makes it difficult to sort through and find what a user is looking for

Other Main Conclusions

Here are some of the other major insights -- you can read the complete list here.

Voters want to stay informed about politics, and many want be more informed than they are.
There is space in the market and demand for a central platform where they can better actively learn about politics and candidates instead of passively learning through news, social media, etc.
The top factor voters care about while choosing a candidate is their stances on major issues -- rated an average of 9.5/10 in importance

Key Insight
Until this point, I had been unsure of whether inclusion of a news component would broaden the project's scope too much and distract from the core election information. However, a major frustration for research participants was a lack of trust in the news media they consume due to widespread misinformation and partisanship, validating the inclusion of a news system that rated sources based on reliability and bias.

PHASE

Define

Goal: Taking everything I’ve learned from my research, complete a concrete understanding of what users truly need and articulate the problems I'll solve.

Personas

I crafted two full research-based persona profiles. I'll use these to better humanize the target audience, ensuring user-centered design decisions throughout the project.

Persona 1: Meet Jennifer!

User story: "As a close follower of news and politics, I want to have a central source for reliable information about candidates and unbiased analysis so that I can keep up with the latest developments and find out which politicians share my values."

Persona 2: Meet Sam!

User story: “As a busy worker who doesn't have much interest in following politics, I want to learn about and compare candidates quickly and easily so that I can make an informed decision at the voting booth without spending much time or energy."

User Journey Map

Mapping the journey of a persona attempting to accomplish a main goal using only products currently available allowed more in-depth contemplation of the user's experience and highlighted specific opportunities for improvement.

Persona: Jennifer, the Political Hobbyist
Goal: Using her phone, view and compare candidates for U.S. Senator from Pennsylvania (without this app)

Problem statement

After developing such a strong understanding of the needs of my users, I was finally able to develop an overarching problem statement to focus my designs around solving:

Voters face two major barriers to making confident, well-informed decisions at the voting booth:

Difficulty accessing reliable, digestible summaries or side-by-side comparisons of candidates’ stances on key issues, especially in down-ballot races
Frustration with a media landscape dominated by sensationalism and partisanship, leaving them mistrustful and underserved when seeking clear, unbiased reporting.

PHASE

III

Ideate

Goal: Generate creative solutions to address voters' challenges in accessing clear candidate information and trustworthy news.

Ideation: How Might We's, Brainstorming Features, Value Propositions, & Goal Statement

In this ideation mega doc!, I began the ideation process by crafting How Might We questions based on my research and problem statement and brainstormed feature ideas to answer these questions.
‍
I then narrowed down the features, categorized them by the overarching value they provided, and created value propositions by connecting each of them to a user need or pain point from my research.
‍
From there, I constructed a goal statement based on the core value propositions that were most integral to solving my problem statement.

Simplified Goal Statement: Our election info app will let users view information about candidates running for office and view news rated by bias and reliability which will affect how voters engage with politics by allowing them to be more informed. We will measure effectiveness by analyzing how familiar users feel they are with candidates and issues.

Sitemap

Now that I had a good idea of the app's content, I organized the information hierarchy into a sitemap to serve as a high-level blueprint.

User Flow

I then visually mapped a flow a user might take through the app with a few decision points to validate the sitemap and find any problems or friction.

Storyboards

Big-picture

Close-up

Paper Wireframes

To begin visualizing potential solutions in a quick, low-risk fashion, I loosely sketched screens and elements on graph paper.

PHASE

Prototype

Goal: Create interactive designs to test functionality and gather feedback from users.

Mid-Fidelity Wireframes

Referencing and refining the ideas I had down on paper, I built black and white wireframes in Figma and made them into a functioning prototype to test my designs before committing to more time-consuming high fidelity screens.

Mid-Fidelity Prototype Testing

To evaluate the effectiveness of the mid-fidelity prototype, I conducted usability testing to gather insights on user interactions, navigation, and overall functionality.

I wrote a research plan with two major two-part tasks and a few additional questions, then recorded tests with 5 participants. I then transcribed them to identify key points and patterns.

Mid-Fi Prototype Testing Results

Some quick KPIs:
Each task had a 100% completion rate.
Error-free rate: Task 1A: 3/5, 1B: 5/5, 2A: 3/5, 2B: 5/5
Time on task (average): Task 1A: 39 seconds, 1B: 5 sec, 2A: 43 sec, 2B: 4 sec
‍
Here are some examples of revisions I made based on this round of testing, shown in screens from the first high fidelity prototype (they would be slightly modified after hi-fi testing):

Before

After

Comparison of mid fi and hi fi Senate pages showing note at top of page

Due to some participants erroneously using the Senate tab to try to access the NC State Senate, I added a note at the top of the Senate page instructing users to go to a different tab for state senates. I also added titles to most pages so the screens' purposes would be more obvious.

Confirmation dialogue to view the Senate race for Pennsylvania

Since one participant was hesitant about her ability to tap the correct state on the Senate map, I added a confirmation dialog so users can be sure they're going to the page they intend to.

Branding

Before proceeding to high fidelity screens, I needed to fully flesh out the branding of the app.
Since the app is attempting to address partisanship in politics and media reliability, I grounded the brand in the principles that had motivated my design decisions so far -- neutrality and trustworthiness. And as it's focused on United States politics in government, I wanted to give the app a slight sense of American patriotism.

Style Tile & UI Kit

This combined style tile and UI kit shows branding elements along with most of the major components used in the final interface. It would serve as a main guide for brand consistency and a resource for further product development.

PHASE

Test & Iterate

Goal: Test the usability of my high fidelity prototype, synthesize insights from users, and use this information to make changes that will improve the product.

High-Fidelity Prototype Testing

Just like my process for testing my mi-fidelity prototype, I planned usability testing for my hi-fi build.
In order to gain more experience with remote testing, in addition to 3 in-person tests, I also conducted 5 remote tests that participants completed through Google Forms and my Figma prototype.

The in-person tests included 6 tasks (4 main tasks and 2 subtasks) and subsequent questions about their experiences.

Results and Revisions

Time to iterate! Based on testing feedback, I identified areas that needed improvement and implemented a series of changes to address them. Some key updates include:

Before

After

Clearer language for main election button as some users weren't sure what "Election Center" meant.
Added button to give direct access to the sample ballot, addressing the high importance placed on this feature by participants.
Greatly expanded the use of tertiary buttons for lower-priority actions, ensuring a clear hierarchy and minimizing visual distraction.

Before

After

Participant 2: "Maybe if you put a little tab up at the top stating what was down there..."

- Added anchor links for each section of the ballot.

Remote Participant 4: "Everything just seems medium or semi-bolded and it kind of messed with my assumption of what piece text is more important than this text..."

- Added cards at top to better organize info and diversified text size and weight in headers and other elements across the entire prototype.

Before

After

Participant 1: "I assumed that when I chose a state, everything that pertained to that state would come up, including federal races."

- Multiple users expressed this sentiment, so I changed the State & Local Elections feature to Browse by State, which would show all races for the selected state, including national-level.

Removed some buttons and converted others to tertiary buttons as to not confuse users or overemphasize non-crucial actions.

Remote Testing Round 2

The remote responses were from anonymous UX students and they were noticeably more critical than the in-person participants, but their analyses were helpful and motivated me to improve the product.

After completing my iterations, I ran a second round of remote tests with 5 users through Google Forms. This time, I received significantly more positive feedback from respondents.

Prototype Testing Wrap-Up

After one round of mid-fi testing, two rounds of hi-fi testing, and revisions after each round, I was satisfied with the final product.

✅

29% average improvement in quantitative responses
The mean rating of agreement level with positive statements about the app on a scale of 1 to 5 increased from 3.5 to 4.5, or 29%, between Hi-Fi Rounds 1 & 2.

✅

100% task completion rate
Each task had a 100% completion rate in each round. Users gave increasingly positive responses about ease of use with each successive round of testing.

✅

Successfully fixed error points
After major iterations like changing the "State and Local" section & page to a "Browse by State" feature, the error-free increased to 5/5 for all but one subtask.

Final Screens

Here's the final product -- seventeen screens in all their glory! 😊🎉 (Some cropped for length; you can view all full pages in the prototype below.)

Try out the final prototype!

Task 1A: Navigate to where you would compare the 2024 U.S. Senate candidates for Pennsylvania on Foreign Policy. Talk through your actions and thought process.
Task 1B: Now, navigate to Bob Casey's profile and view only his positions on climate and energy
Task 2A: Locate the race for North Carolina State Senate, District 10. Note: This is not for U.S. Senate but the state-level race.
Task 2B: Find the Republican candidate in this race and view their stance on the Second
Task 3: Navigate to the section for more information about and the latest stories from NBC News.
Task 4: View the state-level elections on the sample ballot for the address provided: 245 College Rd, Smithfield, NC 27577.

An icon with a swerving arrow leading from one circle to another

Conclusion

Final Thoughts & Evaluation

I believe I succeeded in providing a successful solution for the problems I described in the project overview: difficulty finding reliable, straightforward facts about candidates and where they stand on key issues, and lack of trust in media coverage about politics and government.

This was a challenging project since its content was both wide in breadth and deep in depth. It certainly suffered from some scope creep, increasing from eleven pages in the original mid fidelity prototype to seventeen pages (!!) in the final version, but I believe it was all necessary to show a fully-fleshed out product.

This project really helped me grow as a designer -- and I'm not just saying that! It pushed my skills forward in virtually every aspect of the design process, especially in prototyping, research, and the small, low-level details in crafting a polished UI. One of the most important lessons I learned was the importance of multiple rounds of prototype testing, beginning in early stages. Each round had a significant impact on the final designs.

Next Steps

Further action would include the developer handoff and filling in the rest of the content, which would require a team or well-built AI due to the massive amount of offices and candidates.

If I had more time to work on the project, there are plenty of things I'd like to add or refine. Some priorities would be to:

Further evaluate the information hierarchy surrounding low-level state and local races. Finding the race for State Senator for North Carolina's District 10 was the only task that caused users difficulties in final prototype testing and I'm still not completely convinced that there isn't an easier way that doesn't involve just using the search bar.
Add plain language explanations for more offices and especially referendums.
Do more testing around questions like how much users value polling data and other kinds of information that could either be de-emphasized or emphasized further.
Explore more ways to simplify the overall experience in order to lessen any feeling of being overwhelmed by too much information.