Rep Guider: A UX Approach to Boosting Voter Engagement and Civic Knowledge

Project Overview

Rep Guider is a mobile application designed to simplify civic engagement by helping users identify their local government representatives, stay updated on local government news, and learn about policies and government assistance programs.

Role

I assumed dual roles as both UX designer and researcher, leading the entire process from concept development and ideation to prototyping and usability testing for the Rep Guider app.

Timeline

This was a three-week solo project.

Challenge

Although we live in the information age, citizens still often struggle to access accurate and clear information about their government representatives and policies. The challenge was to develop a user-friendly solution that simplifies finding representatives, tracking important government dates, and staying informed on governmental  news.

Methodology

I applied the Design Thinking methodology for this project, moving through the key phases of empathize, define, ideate, prototype, and test. This iterative approach allowed me to revisit each phase as needed to ensure I developed a clear and user-centered solution. Through multiple iterations, I refined the product based on feedback and insights to create a more effective design.

Goal

The goal of the Rep Guider app is to empower users by providing them with easy access to their local government representatives, policy information, and important political events, fostering greater civic engagement and informed decision-making.

Target Audience

a. Civically Engaged Individuals
b. Young Adults and First-Time Voters
c. Community Advocates
d. Busy Professionals
e. Seniors or Vulnerable Populations
f. Educators and Students

Key Challenges or Constraints

a. Data Accuracy and Updates
b. User trust and security
c. Navigating complex government systems
d. Engagement and user retention
e. Accessibility and inclusivity
f. Balancing information overload

Phase One: Building Empathy
[Empathy Maps, User Personas, Journey Maps]

To gain a solid understanding of potential users, I needed to explore their thoughts and feelings regarding the challenges they face when trying to access information about their representatives and candidates. Given that Las Vegas is a bustling tourist city with a diverse population, I conducted mini-interviews with random people to gain insights into their understanding and experiences. With the information gathered, I was able to develop an empathy map.

User Personas

After conducting interviews with various individuals and developing an empathy map, I created fictional user personas. These personas helped me identify behavioral patterns and revealed common pain points experienced by users.

User Journey

Building on the insights from the empathy map and personas, I created user journeys to better understand the user's perspective. Creating a user journey helped me minimize any biases I might have had during the app design process.  The following user journey illustrates the process Samira (one of the personas) might follow when trying to learn more about their representatives.

Phase Two: Defining User Challenges
[Problem Statement, Hypothesis, Value Proposition List, Journey Maps]

After completing the empathy phase, I then moved on to the Define phase where I focused on identifying specific user problems and hypothesizing possible solutions.

User Journey

Using my user persona, Samira, I crafted a problem statement to help establish clearer goals for designing the app.

Samira Patel is a busy guidance counselor and community activist for the disabled who needs an easy app to provide quick information about her government representatives because she would like to get more involved politically for her community.

Hypothesis

If Samira, a busy school counselor who struggles to find reliable information about her government representatives, uses the app, then she will be able to quickly and easily access accurate information about her local and federal representatives, leading to increased engagement with political processes and more informed decision-making.

Value Proposition

I created a value proposition lit to clearly define the unique benefits the app offers to users. It helps communicate how the app solves a specific problem, why it’s valuable, and what sets it apart from other solutions. By focusing on the user’s needs, the value proposition ensures that the design and development stay aligned with delivering meaningful outcomes.
  • Allows for the a creation of a personal profile
  • Easy lookup of government representatives
  • Up to date news coverage, only on government representatives or candidates  only
  • Calendar of local government hosed events
  • Pages/profiles of local/state/national officials
  • Information on ‘how’ to do things within government (example: run for office, seek assistance, petition, etc)
  • Provide governmental addresses/phone numbers/emails (this will include embassy’s, senators, governors)

Phase Three: Creative Ideation and Brainstorming
‍[Goal Statement, & Competitive Audit]

During this phase of ideation, I was able to generate creative solutions and explore a variety of approaches to address user pain points. Through brainstorming and idea generation, I was able to refine my understanding of user needs, uncover new perspectives, and validate the potential of different design concepts. This phase played a critical role in shaping the direction of the project, ensuring that the final design was both innovative and user-centered.

Goal Statement

I created a goal statement to provide a clear focus and direction for the design process. It serves as a guiding principle, outlining what the app aims to achieve and ensuring that every design decision aligns with the overall objectives.

"Our Rep Guider app will enable users to easily learn about their government representatives, helping those who are too busy to research on their own. By providing concise summaries on who their representatives are, what they stand for, and how they intend to use their power, the app will create more informed voters. We will measure its effectiveness by how quickly it retrieves information, even when users provide limited details."

Competitive Audit

I conducted a competitive audit to analyze similar products in the market and identify opportunities for differentiation. By evaluating the strengths and weaknesses of competitor apps, I gained insights into industry standards, user expectations, and potential gaps. 
Click Here to Download the Competitive Audit

Phase Four: Designing A Low Fidelity App
‍[User Flow Chart, Storyboards, IA (Site Map), Wireframing Sketches, Prototyping/Lo-Fi]

During the design phase, I focused on several key steps to ensure a comprehensive and user-centered approach for the app. First, I created a user flow chart to map out the steps users would take to achieve their goals within the app. This helped visualize the user’s journey and identify potential pain points or inefficiencies. Next, I developed storyboards to illustrate various user scenarios and interactions, providing a narrative that highlighted how different features came into play in real-world situations.

Following that, I constructed a sitemap to outline the app’s structure and hierarchy, ensuring that content was logically organized and easily accessible. With these foundational elements in place, I moved on to wireframing sketches, which served as low-fidelity visual representations of the layout and functionality of each screen. These sketches allowed me to experiment with different design ideas and iterate quickly. Finally, I created a lo-fi prototype to bring these sketches to life, offering a clickable, interactive model of the app. This prototype will be instrumental in gathering feedback and making iterative improvements before progressing to more detailed design phases. Through these steps, I aimed to develop an intuitive and engaging user experience that aligned with user needs and goals.

User Flow Chart

To kick off the design process, I began by creating a user flow chart to map out how the app is intended to function. This helped visualize the user’s journey through the app, ensuring that each interaction is intuitive and aligns with the app’s objectives.

Storyboards

I created storyboards, both big picture and close-up, to help me outline an ideal flow for my design. I used storyboards to visualize the potential solutions to problems the user may have that my app would solve. Below are the storyboard sketches I created.  

Information Architecture (Site Map)

One of the key steps in UX design is establishing a clear information architecture (IA). My goal was to create a sitemap with a limited number of pages, keeping it as simple as possible. This aligns with the app’s objective of making it easy for users to quickly find the information they need.

Wireframing - Sketches

At this point, I had gathered sufficient research and information to begin designing the basic structure of the app's web pages. I started by creating multiple sketches for each page. Below is the conceptual sketch for the home page.

Prototyping - Digital Low Fidelity

After combining the best elements from my sketches, I transitioned to Figma to create a low-fidelity (lo-fi) digital prototype. This prototype will be used in the upcoming initial usability study.

Phase Five: Testing & Further UX Research
[Research Plan, Usability Study, Affinity Diagram]

With the low-fidelity prototype complete, I now had a design ready to test the basic functionality and structure of the app. During the testing phase, I conducted usability testing sessions to observe how users interacted with the prototype, focusing on whether the core features were intuitive and easy to navigate. By using task-based scenarios, I asked participants to complete specific actions, such as finding a feature or navigating through the app's main functions, allowing me to gather valuable feedback on how well the design aligned with user expectations.

Throughout this phase, I closely monitored user behavior, noting any friction points, confusion, or areas where users struggled. This feedback was crucial in identifying opportunities for improvement, particularly around usability, flow, and accessibility.

Research Plan

I developed a comprehensive research plan for the usability testing of the prototype. This included previously established key elements, along with gathering new information such as:
  • Defining the project title and identifying stakeholders
  • Outlining the project background and objectives
  • Setting KPIs
  • Identifying characteristics of the usability test participants
  • Establishing the methodology, scripting, and tasks for conducting the usability study

Moderated Usability Study of low-fidelity prototype

I headed toward the Fremont Street Experience, a popular tourist destination known for attracting a diverse range of people. In line with my research plan, I approached five individuals from different demographic backgrounds and asked each to spend 10 minutes answering a few questions and testing the low-fidelity prototype. Below is a downloadable transcript of one participant's test session.
Download transcript

Affinity Diagram

With the extensive feedback gathered, I decided to create an Affinity Diagram to organize the pain points identified by the participants. This helped me group similar issues and gain a clearer understanding of the key areas that need improvement.

Returning to Phase 4 & 5: Designing the High-Fidelity app.

After receiving feedback from the lo-fi prototype testing, I returned to the design phase to refine and improve the app based on user insights. This involved reviewing the feedback to identify common pain points, areas of confusion, and any functionality that didn’t align with user expectations.
‍
Incorporating this feedback, I revised the wireframes to ensure that the interface was more intuitive and user-friendly. I also revisited the user flow chart to streamline certain interactions, making the experience smoother and more efficient.

Modifying low-fidelity prototypes based on insights.

Drawing on the insights from usability testing and the affinity diagram, I made several adjustments to the prototype:
  • Enhanced the hamburger menu with additional functionality
  • Implemented a confirmation message for sent communications
  • Introduced a page for comparing representatives
  • Added a dedicated news page
  • Created a detailed news article page
  • Enlarged the font size for improved readability

Final Prototype: Mockup /
High Fidelity Prototype

With the updated low-fidelity design in place, I proceeded to create a high-fidelity mockup or prototype, incorporating text, images, and a comprehensive presentation of the app's appearance. After building the high-fidelity prototype, I revisited Fremont Street Experience to recruit participants for the usability study of the high-fidelity prototype. This time, I included additional tasks for participants to complete and refrained from asking rapport questions to minimize potential biases. Based on the insights from usability testing and the affinity diagram, I made a number of adjustments to come up with a final prototype.