UX Design Project: Elected Officials Connect App

Jump to High-Fidelity Prototype in Figma

Challenge: Everyday citizens do not have a quick and easy way to find and connect with their elected officials at the state and federal level. 

a

Solution: Mobile application to allow citizens to search for their state and federal officials and provide a means to not only communicate with them but also a platform to hold them accountable to serving the community through the use of rating systems, comments and transparent information on the official’s service records.

User Research & User Pain Points

Completed initial user research and built out empathy maps to get a holistic understanding of the target user (everyone of voting age & those politically active in the community) and what their needs are. It was quickly revealed that most people do not know where to go to find information on their elected officials, let alone know who their elected officials actually are. Finding information on their elected officials is not easy because there is not one place to get all the information, therefore most people do not even bother to search for the information. Nearly every participant said they would be more active in their communities politics if they had an easy method of finding and communicating with their elected officials. 

>%
According to recent a survey, fewer than 20% of Americans can name their state legislators
%
The same survey showed only one-third were unable to name their governor

*Survey conducted by John Hopkins University in 2019*

No Single Source 
of Information

Information on elected officials are fragments and spread out across multiple online sources.

Quick Search Options

No place to search to find all of the elected officials for a citizens district. To get this information a citizens has to run multiple searches. 

Line of Communication 

Citizens do not feel like they have an open line of communication with their elected officials to notify them of community issues and concerns. 

Lack of Accountability 

Citizens do not engage or communication with their elected officials because they feel like there is no public forum to hold the official accountable to their communities. 

User Persona – Billy

Problem Statement: Billy is a concerned citizen who needs to contact his communities elected officials because he has witnesses a local chemical plant dumping chemicals in the lake at the park near his home.

Billy is a Master Plumber, who in his time off loves to go to nearby parks to fish on the lakes and rivers. He spends several hours fishing at least three days a week and as a father of two, he often brings his kids to fish as well. 

He is upset because he has seen a local chemical processing center dump waste into the river at one of the parks he fishes at. He wants to report this issue to the appropriate elected officials so action can be taken. However, he does not have an easy way to figure out which official represents the district where the park is located.

Goals

Quick way to find contact information for elected officials in the area.
In-app messaging system so there is no switching between apps to send & review messages.
Option to upload media files in messages.

Frustrations

“I have a hard time finding out how to contact my elected officials.”
“It is inconvenient switching back and forth between the browser and my email app to copy the contact info from a website on my phone.”
”I wish I had a fast way to alert my elected officials about a community issue so they could take action!”

Demographics

Age: 41
Education: College
Home Town: Chalfont, PA
Family: Spouse & Two Young Kids
Occupations: Plumber

Sitemap

Clear and concise navigation is important for the app since part of the target user group includes the aging population and others that may not be the most tech savvy. 

Paper Wireframes

In creating the paper wireframes the primary objective for the homepage was to bring the users focus to the search function, since that is the primary function of the site. Furthermore, the homepage was made for ease of navigation, but also have enough other options to make the site engaging to the user. 

From Paper to Digital Wireframes

In the transition from paper wireframes to digital wireframes it was critical to keep the user research in mind to address their pain points and to give the users the easy interactions that improve user experience.

Low-Fidelity Prototype

The creation of the low-fidelity it was important to make all the multiple connection for each page to demonstrate how versatile interconnected the site is; allowing the user to create their own flow based on their objectives.

Check Out the Low-Fidelity Prototype

Usability Study

A usability study was conducted once the low-fidelity prototype was completed to test functionality, and to identify any areas that required further development.

Study Type

Unmoderated Usability Study

Participants

Five Participants

Length of Time

20 – 30 Minutes

Location

Remote, United States of America

Usability Study Findings

Categorization

In the search results page, users noted that the results should be categorized by state or federal positions to make it easier to find the correct official.

Action Confirmations

Users felt unsure if their actions on the site were registered because they did not get any feedback on the action from the site.

Elections Information

Users felt that they would use the site more frequently during election cycles and wanted to see an area of the site that helps track information about upcoming elections.

Mockups Based on User Feedback

Adding the categorization in the search results and favorites was deemed a priority from the usability study. Search results are now stacked starting with State elected officials then moves down to Federal elected officials making the search results easier to read through. 

Based on the feedback from the usability study, the option to hide a users identity (similar to Apple’s “Hide My Email” option) when emailing a political official was added. Additionally, a new page was created and linked back to the profile page for an elections calendar equipped with the ability to export the calendar to the users phone.

High-Fidelity Prototype

The high-fidelity prototype maintained the same interconnected pages which is paramount to allow the user to  create their own flow based on their specific needs. The addition of the  “My Elections Calendar” page based on the usability study. Further revisions were included based on user feedback such as action confirmations.

View High-Fidelity Prototype
~ The Making of This Project ~

Ryan was the UX Design Team Leader on this project. Responsibilities included Conducting Interviews & User Research, Ideation, Paper & Digital Wireframing, Low and High Fidelity Prototyping, Accessibility Inclusion, Usability Study, and Iterating on Design.