Find My Rep is an app designed to help users find and contact their local and federal representatives. It empowers people to feel politically engaged, and enables them to make their voices heard.
This was a solo design challenge project to create a fictional app. I interviewed users, defined the problems to be solved, ideated solutions, created wireframes and mockups, created low- and high-fidelity prototypes, and tested my designs via usability studies.
Since this was a solo project for my UX certification class, I relied on friends and family for research and testing purposes, which is not a true representative sample of users. It does, however, give a good idea of the process that I would use if I were designing for a real product.
October – December 2023
I interviewed a small group of friends and family members to gain insights into the needs of my potential users. These are the common pain points that emerged during interviews.
I grouped together common themes and created personas from my research. Here is one example.
Rose is a tech-hesitant grandmother who needs an easy app experience to find her representatives’ contact info, so she can feel empowered to make her voice heard.
Goal: Find an app that will help her contact her congressperson.
I conducted a competitive audit to investigate products available on the market, and examined their strengths and weaknesses.
Our direct competitors are the apps 5calls and Pocket Congress. An indirect competitor is ResistBot, a chatbot.
To set ourselves apart from competitors and solve our users' pain points, we can present a list of personalized reps, including local officials, without a judgmental focus on issues, with multiple methods of contact information.
Rose is a tech-hesitant grandmother that needs an easy app experience to find her representatives’ contact info, so she can feel empowered to make her voice heard.
Our app will let users find their representatives’ names and contact information, which will affect civic-minded individuals by giving them the ability to easily make their voices heard.
Easy-to-use app design
Reliable, up-to-date information
Election reminders
3 methods of contact information
Initiate contact directly from app
Information about representatives
Location services or zip code entry for instant info retrieval
After empathizing with my users, and defining the problems to solve, I brainstormed and sketched out ideas for solutions.
First, I did a quick sketching exercise called a "crazy eight." In no more than 1 minute per scenario, I sketched 8 ideas that might help my persona Rose solve her problem.
I sketched out what the design solution would look like.
In order to plan out what screens I would need to design, I mapped out Rose's user flow.
Taking the time to draft each screen on paper ensured that I could easily iterate on multiple design ideas, before picking my favorite elements and combining them together into a wireframe that I was ready to build digitally.
After creating a paper wireframe for each screen, I built digital versions in Figma.
I connected the wireframe screens to create a working low-fidelity prototype so I could test the user flow.
Interact with the prototype here, or watch the video below.
I conducted moderated usability studies with 5 participants. I created a study plan, and carefully drafted my prompts and follow-up questions to avoid influencing my participants.
Open the app and see if you can find your representatives. Do your best to talk me through your thought process.
Select a representative and contact them.
Make your way back to the main screen.
How do you feel about the steps you took to find and contact your rep? What was easy and what was challenging?
How do you feel about the personalized main screen? Did you find anything confusing?
How do you feel about the app overall? What did you like and dislike about it?
I recorded each session, and re-watched them as needed, jotting down each statement and idea from every participant. I then grouped these into common themes in an affinity map.
I translated each theme from my affinity map into an actionable insight.
It was observed that 3 out of 5 participants felt that the reps needed some sort of differentiators. This means that most users would appreciate visual cues and filtering options are needed.
It was observed that 3 out of 5 participants found the wording confusing. This means that the wording should be more clear and direct.
It was observed that 3 out of 5 participants were confused by the options in the menu bar. This means that the menu bar navigation should be clearer.
It was observed that 4 out of 5 participants struggled with entering an address. This means that most participants need the location feature to be clearer.
It was observed that 5 out of 5 participants found the user flow to be intuitive. This means that the user flow is clear.
My original wireframes included a carousel for recently contacted representatives. But after some users were confused by it, and after learning more about the importance of negative space, I decided to move the “history” functionality to a separate tab. I incorporated this, and a “saved contacts” function, into a bottom menu bar.
I also tried to make the location screen clearer.
I created a "sticker sheet" in Figma detailing my colors, fonts, buttons, and icons, so I could quickly and easily reuse assets, while ensuring all elements stayed consistent.
I included high contract colors, to make sure that all text is easy to see and read.
Icons include text, which is important for screen readers.
I included multiple options for communication, which is useful to people with speech limitations, and also helpful for people who simply do not like to talk on the phone.
Under the app's settings menu, I included options to change the size of the font, or to change the language of the text. Civic engagement should not exclude people who aren’t strong English speakers.
I created high-fidelity mockups of the app, where the screens would appear as close as possible to the finished product. Due to the insight from the usability studies that the address entry process was confusing, I created more screens to try and improve the user flow.
I connected the mockup screens to create a high-fidelity prototype. I included a flow for a user who enables location services, and one for a user who prefer to enter an location manually.
Interact with the prototype here, or watch the video below. The user's prompt was to find and contact local councilman Russ Balthis.
I conducted a second round of usability testing with the high-fidelity prototype. I again used moderated studies, with 5 participants.
This time, users found the flow to be simple and intuitive. However, it was clear that they needed better visual cues to differentiate the welcome screen and the home screen, so I updated the design so that the menu bar was mostly greyed out on first open.
“I would definitely use this” – study participant C
“I love the color scheme” – study participant D
“It’s really simple and easy to use” – study participant E
The user is the most important person in the design process. If I had not spoken to potential users to discover their needs and frustrations, the app would have turned out completely differently; it would be much weaker.
It was a fun project, and a wonderful learning experience. I feel far more confident in my skills as a UX designer.
It’s clear there is a use for an actual app like this. There is no one database that collects and maintains all information on local, state, and federal representatives.
Since I do not have the technical knowledge, or funding, to bring the app to life, I may donate my design to a voting rights nonprofit, so they may develop it into a real app if they wish.