Find My Reps
Find My Reps
App and Responsive Website
App and Responsive Website
App and Responsive Website
UX Case Study
UX Case Study
UX Case Study
Contents
Contents
Contents
Project Overview
Project Overview
Project Overview
The Product
The Product
The Product
The prompt for my final project was to “Create an app and responsive website for social good,” and out of a list of topics I chose an app/website that lets users find who their elected representatives are because it seemed extremely relevant this year.
The prompt for my final project was to “Create an app and responsive website for social good,” and out of a list of topics I chose an app/website that lets users find who their elected representatives are because it seemed extremely relevant this year.
The prompt for my final project was to “Create an app and responsive website for social good,” and out of a list of topics I chose an app/website that lets users find who their elected representatives are because it seemed extremely relevant this year.
The Problem
The Problem
The Problem
Searching for your elected reps can be hard. You have to google each branch of government and find out which district you’re in to find your rep for that branch, and then you have to do that for each branch.
Searching for your elected reps can be hard. You have to google each branch of government and find out which district you’re in to find your rep for that branch, and then you have to do that for each branch.
Searching for your elected reps can be hard. You have to google each branch of government and find out which district you’re in to find your rep for that branch, and then you have to do that for each branch.
The Goal
The Goal
The Goal
The goal of my app is to create a way for users to easily and quickly find all of their reps in one place without having to worry about which districts they are in.
The goal of my app is to create a way for users to easily and quickly find all of their reps in one place without having to worry about which districts they are in.
The goal of my app is to create a way for users to easily and quickly find all of their reps in one place without having to worry about which districts they are in.
My Role:
My Role:
My Role:
UX Designer
UX Designer
UX Designer
Responsibilities:
Responsibilities:
Responsibilities:
Initial research, ideating,
wireframing, mockups,
prototyping, user testing
Initial research, ideating,
wireframing, mockups,
prototyping, user testing
Initial research, ideating,
wireframing, mockups,
prototyping, user testing
Project Duration:
Project Duration:
Project Duration:
May 2024
May 2024
May 2024
Understanding the User
Understanding the User
Understanding the User
User Research: Summary
User Research: Summary
User Research: Summary
I conducted interviews with users about their experience trying to search for their representatives. I knew going in that manually searching each rep would be a hassle but what surprised me was how much of an obstacle districts were.
Users were not always able to figure out which district they were in, and they can’t know which rep is theirs without knowing their district. Users had to repeat this for each individual rep, and that assumes they are familiar with each level and branch of government.
I conducted interviews with users about their experience trying to search for their representatives. I knew going in that manually searching each rep would be a hassle but what surprised me was how much of an obstacle districts were.
Users were not always able to figure out which district they were in, and they can’t know which rep is theirs without knowing their district. Users had to repeat this for each individual rep, and that assumes they are familiar with each level and branch of government.
I conducted interviews with users about their experience trying to search for their representatives. I knew going in that manually searching each rep would be a hassle but what surprised me was how much of an obstacle districts were.
Users were not always able to figure out which district they were in, and they can’t know which rep is theirs without knowing their district. Users had to repeat this for each individual rep, and that assumes they are familiar with each level and branch of government.
User Research: Pain Points
User Research: Pain Points
User Research: Pain Points
1
1
1
Districts
Districts
Districts
Finding your districts is a pain but you have to know your district to know which rep is yours.
Finding your districts is a pain but you have to know your district to know which rep is yours.
Finding your districts is a pain but you have to know your district to know which rep is yours.
2
2
2
Each Rep
Each Rep
Each Rep
Users had to manually search for each individual rep, so they had to endure these frustrations many times over.
Users had to manually search for each individual rep, so they had to endure these frustrations many times over.
Users had to manually search for each individual rep, so they had to endure these frustrations many times over.
3
3
3
Google Reliability
Google Reliability
Google Reliability
Simply googling the position wouldn’t always return results for that position and it couldn’t tell you which rep is yours
Simply googling the position wouldn’t always return results for that position and it couldn’t tell you which rep is yours
Simply googling the position wouldn’t always return results for that position and it couldn’t tell you which rep is yours
4
4
4
Knowledge
Knowledge
Knowledge
If a user isn’t familiar with state level government, they won’t know to search for their state-level representatives.
If a user isn’t familiar with state level government, they won’t know to search for their state-level representatives.
If a user isn’t familiar with state level government, they won’t know to search for their state-level representatives.
Persona: Ben
Persona: Ben
Persona: Ben
Problem Statement:
Problem Statement:
Problem Statement:
Ben is a HVAC technician that isn’t familiar with state politics who needs to find out who his elected representatives are because he wants to prepare for the upcoming election and be an informed citizen.
Ben is a HVAC technician that isn’t familiar with state politics who needs to find out who his elected representatives are because he wants to prepare for the upcoming election and be an informed citizen.
Ben is a HVAC technician that isn’t familiar with state politics who needs to find out who his elected representatives are because he wants to prepare for the upcoming election and be an informed citizen.
User Journey Map
User Journey Map
User Journey Map
My design should allow users to find their districts via their location/address and show all their reps in one place.
My design should allow users to find their districts via their location/address and show all their reps in one place.
My design should allow users to find their districts via their location/address and show all their reps in one place.
Starting the Design
Starting the Design
Starting the Design
For this project, I designed the mobile app first and then the responsive website after. It took longer than doing them simultaneously, but it allowed me to take what I learned from the app and apply it while designing the more complex responsive website.
For this project, I designed the mobile app first and then the responsive website after. It took longer than doing them simultaneously, but it allowed me to take what I learned from the app and apply it while designing the more complex responsive website.
For this project, I designed the mobile app first and then the responsive website after. It took longer than doing them simultaneously, but it allowed me to take what I learned from the app and apply it while designing the more complex responsive website.
Paper Wireframes
Paper Wireframes
Paper Wireframes
I tried a few iterations of each screen and then combined what I liked into the final version. Paper wireframes are important because they allow you to figure out or redo your designs before you make them.
I tried a few iterations of each screen and then combined what I liked into the final version. Paper wireframes are important because they allow you to figure out or redo your designs before you make them.
I tried a few iterations of each screen and then combined what I liked into the final version. Paper wireframes are important because they allow you to figure out or redo your designs before you make them.
Digital Wireframes
Digital Wireframes
Digital Wireframes
Users can enter their address or use their location which will automatically find their districts and pull up a list of all their elected representatives.
Users can enter their address or use their location which will automatically find their districts and pull up a list of all their elected representatives.
Users can enter their address or use their location which will automatically find their districts and pull up a list of all their elected representatives.
Users can also easily find full lists of reps and district maps from the home screen.
Users can also easily find full lists of reps and district maps from the home screen.
Address/Location search is the first thing users see.
Address/ Location search is the first thing users see.
App Home Screen
App Home Screen
All of the user’s reps, based on their location, are displayed in one place to make finding them all as easy as possible.
All of the user’s reps, based on their location, are displayed in one place to make finding them all as easy as possible.
All of the user’s reps, based on their location, are displayed in one place to make finding them all as easy as possible.
Each of the user’s reps are given for each level and branch of government specific to their district location.
Each of the user’s reps are given for each level and branch of government specific to their district location.
Search Results Screens (App)
Search Results Screens (App)
The profile page displays basic information about the rep and a link to their website.
The profile page displays basic information about the rep and a link to their website.
Rep Profile Page (App)
Rep Profile Page (App)
For the desktop and tablet screen sizes I did a split-screen style two-column layout to utilize the extra screen space.
For the desktop and tablet screen sizes I did a split-screen style two-column layout to utilize the extra screen space.
For the desktop and tablet screen sizes I did a split-screen style two-column layout to utilize the extra screen space.
Search Results/Profile Page (Desktop)
Search Results/Profile Page (Desktop)
I had already designed the app so I used the text styles from that in the responsive website wireframes.
I had already designed the app so I used the text styles from that in the responsive website wireframes.
Low-fidelity Prototype
Low-fidelity Prototype
Low-fidelity Prototype
View the App Low-Fidelity Prototype that I used for user testing.
View the App Low-Fidelity Prototype that I used for user testing.
View the App Low-Fidelity Prototype that I used for user testing.
View the Responsive Website Low-Fidelity Prototype, also used for testing.
View the Responsive Website Low-Fidelity Prototype, also used for testing.
View the Responsive Website Low-Fidelity Prototype, also used for testing.
Usability Study: Findings
Usability Study: Findings
Usability Study: Findings
I first designed the app, then took what I learned from the app to design the responsive website. For both I conducted a usability study with a lo-fi prototype based on wireframes, then moved on to mockups and conducted a usability study with a hi-fi prototype.
I first designed the app, then took what I learned from the app to design the responsive website. For both I conducted a usability study with a lo-fi prototype based on wireframes, then moved on to mockups and conducted a usability study with a hi-fi prototype.
I first designed the app, then took what I learned from the app to design the responsive website. For both I conducted a usability study with a lo-fi prototype based on wireframes, then moved on to mockups and conducted a usability study with a hi-fi prototype.
Round 1 Findings
Round 1 Findings
Round 1 Findings
1
1
1
Users found it way easier than googling.
Users found it way easier than googling.
Users found it way easier than googling.
2
2
2
Some users were skipping the location button.
Some users were skipping the location button.
Some users were skipping the location button.
3
3
3
Users were happy with the design overall.
Users were happy with the design overall.
Users were happy with the design overall.
Round 2 Findings
Round 2 Findings
Round 2 Findings
1
1
1
Some users were still skipping the location button.
Some users were still skipping the location button.
Some users were still skipping the location button.
2
2
2
Some users thought the homepage could use more visuals.
Some users thought the homepage could use more visuals.
Some users thought the homepage could use more visuals.
3
3
3
Some colors were darker than I realized due to my monitor settings.
Some colors were darker than I realized due to my monitor settings.
Some colors were darker than I realized due to my monitor settings.
Refining the Design
Refining the Design
Refining the Design
Mockups
Mockups
Mockups
Some users went right past the location button and others thought the homepage could use some more visual appeal so I added some color and visual hierarchy to draw the eye to the location button more.
Some users went right past the location button and others thought the homepage could use some more visual appeal so I added some color and visual hierarchy to draw the eye to the location button more.
Some users went right past the location button and others thought the homepage could use some more visual appeal so I added some color and visual hierarchy to draw the eye to the location button more.
App Home Screen V1
App Home Screen V1
App Home Screen V2
App Home Screen V2
Responsive Web V2
Responsive Web V2
I realized while user testing on other devices that my designs were darker than I thought because of my monitor settings, so I changed the settings and adjusted all the designs to reflect what they should look like.
I realized while user testing on other devices that my designs were darker than I thought because of my monitor settings, so I changed the settings and adjusted all the designs to reflect what they should look like.
I realized while user testing on other devices that my designs were darker than I thought because of my monitor settings, so I changed the settings and adjusted all the designs to reflect what they should look like.
Search Results/Profile V1 (Tablet)
Search Results/Profile V1 (Tablet)
Search Results/Profile V1 (Tablet)
Search Results/Profile V2 (Tablet)
Search Results/Profile V2 (Tablet)
Search Results/Profile V2 (Tablet)
Key Mockups - App
Key Mockups - App
Home Screen
Home Screen
Search Results
Profile Page
Full List (F Senate)
Search Results
Profile Page
Full List (F Senate)
Key Mockups - Mobile Website
Key Mockups - Mobile Website
Home Screen
Home Screen
Search Results
Profile Page
Full List (F Senate)
Search Results
Profile Page
Full List (F Senate)
Key Mockups - Tablet Website
Key Mockups - Tablet Website
Home Screen
Search Results
Full List (F House)
Home Screen
Home Screen
Search Results
Search Results
Full List (F House)
Full List (F House)
Key Mockups - Desktop Website
Key Mockups - Desktop Website
Home Screen
Search Results
Full List (S Exec)
Home Screen
Home Screen
Search Results
Search Results
Full List (S Exec)
Full List (S Exec)
High-fidelity Prototypes
High-fidelity Prototypes
High-fidelity Prototypes
View the App High-Fidelity Prototype used for testing.
View the App High-Fidelity Prototype used for testing.
View the App High-Fidelity Prototype used for testing.
View the Responsive Website High-Fidelity Prototype used for testing.
View the Responsive Website High-Fidelity Prototype used for testing.
View the Responsive Website High-Fidelity Prototype used for testing.
Accessibility Considerations
Accessibility Considerations
Accessibility Considerations
1
1
1
I used fonts from government websites and tried to keep the design government-like and simple.
I used fonts from government websites and tried to keep the design government-like and simple.
I used fonts from government websites and tried to keep the design government-like and simple.
2
2
2
I checked color contrast as well as font sizes to make sure text was legible to users.
I checked color contrast as well as font sizes to make sure text was legible to users.
I checked color contrast as well as font sizes to make sure text was legible to users.
3
3
3
I designed the app in such a way that anyone can find their reps regardless of how much they know about the government, for example, if they aren’t from America.
I designed the app in such a way that anyone can find their reps regardless of how much they know about the government, for example, if they aren’t from America.
I designed the app in such a way that anyone can find their reps regardless of how much they know about the government, for example, if they aren’t from America.
Going Forward
Going Forward
Going Forward
Takeaways
Takeaways
Takeaways
Impact:
Impact:
Impact:
All participants said my designs were way better than trying to manually search for their reps. “1000% nicer than googling.” “Couldn’t have been easier.” “How could I not know what to do?”
Some of my participants were my 70 y/o neighbors who had never used a laptop, and they said they were able to use the website perfectly fine “which is saying something.” “If we can do it anyone can do it.”
All participants said my designs were way better than trying to manually search for their reps. “1000% nicer than googling.” “Couldn’t have been easier.” “How could I not know what to do?”
Some of my participants were my 70 y/o neighbors who had never used a laptop, and they said they were able to use the website perfectly fine “which is saying something.” “If we can do it anyone can do it.”
All participants said my designs were way better than trying to manually search for their reps. “1000% nicer than googling.” “Couldn’t have been easier.” “How could I not know what to do?”
Some of my participants were my 70 y/o neighbors who had never used a laptop, and they said they were able to use the website perfectly fine “which is saying something.” “If we can do it anyone can do it.”
What I Learned:
What I Learned:
What I Learned:
Color schemes were something I had to grapple with a lot on this one. Trying to make it visually interesting with different shades while keeping to a government-like seriousness was constricting. I learned a lot about picking different shades of the same color for accents, background, etc.
I also saw firsthand how the device you use can alter your experience, and the value of viewing designs on different screens, even of the same type. My monitor was showing lighter shades differently than on other devices and I had to fix it.
Color schemes were something I had to grapple with a lot on this one. Trying to make it visually interesting with different shades while keeping to a government-like seriousness was constricting. I learned a lot about picking different shades of the same color for accents, background, etc.
I also saw firsthand how the device you use can alter your experience, and the value of viewing designs on different screens, even of the same type. My monitor was showing lighter shades differently than on other devices and I had to fix it.
Color schemes were something I had to grapple with a lot on this one. Trying to make it visually interesting with different shades while keeping to a government-like seriousness was constricting. I learned a lot about picking different shades of the same color for accents, background, etc.
I also saw firsthand how the device you use can alter your experience, and the value of viewing designs on different screens, even of the same type. My monitor was showing lighter shades differently than on other devices and I had to fix it.
Next Steps
Next Steps
Next Steps
1
1
1
I took what I learned from the app to make the website better, so I might return to the app if I feel it needs an upgrade.
I took what I learned from the app to make the website better, so I might return to the app if I feel it needs an upgrade.
I took what I learned from the app to make the website better, so I might return to the app if I feel it needs an upgrade.
2
2
2
I would annotate the designs for the engineers and get them ready to hand off.
I would annotate the designs for the engineers and get them ready to hand off.
I would annotate the designs for the engineers and get them ready to hand off.
3
3
3
I would complete the district maps user flow and other parts of the site If I was working wth engineers and launching the site.
I would complete the district maps user flow and other parts of the site If I was working wth engineers and launching the site.
I would complete the district maps user flow and other parts of the site If I was working wth engineers and launching the site.
Lets Connect!
Lets Connect!
Lets Connect!
Thank you for reviewing my work on the Find My Rep project! If you’d like to see more or get in touch, you can copy my email address to your clipboard below or find me on LinkedIn.
Thank you for reviewing my work on the Find My Rep project! If you’d like to see more or get in touch, you can copy my email address to your clipboard below or find me on LinkedIn.
Thank you for reviewing my work on the Find My Rep project! If you’d like to see more or get in touch, you can copy my email address to your clipboard below or find me on LinkedIn.