-05.svg)
Hopper
Hopper is a mobile application concept that provides Californians with concise and timely information about proposed legislation and laws in their jurisdictions. The platform aims to simplify the complex world of legislation and make it more accessible to the general public, allowing the opportunity for action prior to legislation enactment. This UX case study presents the design process and considerations undertaken to create a user-centered experience for Hopper.
01. Project Overview
The Problem
Proposed legislation and laws in the United States are notoriously complex in their language and format. To add fuel to the flame, take a look at your state’s legislative website. If you’re lucky, it might look something like Colorado’s, which allows users to browse bills by subject or view them collectively, with options to sort by relevancy, action date, or bill number.
While it seems standard for a state to make its legislation easily accessible to its constituents, Colorado stands out as one of the few states with a remotely user friendly legislative website. In contrast, to access a bill on California’s legislative website, you first have to know the bill number, typically denoted by “AB” or “SB” followed by the respective numerical identifier. Once you track down the bill you are looking for, your next challenge is to decipher the text itself.
Laws and bills frequently contain complex concepts and technical terms that, by their nature and to ensure precision, can be difficult for the general public to understand. This creates a significant disconnect between the government and its citizens. Hopper strives to address the complexity and inaccessibility of legislative information that plagues the general public.
The goal
The goal of Hopper is to simplify legislative information and foster civic engagement. The platform aims to achieve the following objectives:
1. Provide Concise & Timely Information:
Offer users easily digestible and summarized information about proposed legislation and laws in their jurisdictions. By condensing complex legislative texts into concise summaries, Hopper enables users to quickly grasp the key points and implications of bills, saving them time and effort.
2. Foster Community Engagement:
Create a platform that encourages active participation and engagement from its users. By allowing users to comment on bills, engage in discussions, and express their opinions, Hopper creates a sense of community and fosters constructive dialogues around legislative issues.
3. Facilitate Informed DECISION MAKING & Democratize Legislative information:
Empower users to make informed decisions about proposed legislation and make legislative information accessible to a wider audience beyond legal and political experts. By providing unbiased summaries and facilitating discussions, Hopper helps users understand the potential impacts of bills, enabling them to form well-informed perspectives and engage with the legislative process.
My role
I completed all tasks for this project, from conducting surveys and interviews during the empathize phase, to developing and testing low and high fidelity prototypes during the ideate and prototype phases.
02. Understanding the User
USER Research
To gain insights into potential users' understanding of the United States legislative process, opinion formation, self-education methods, and the potential adoption of a platform like Hopper for learning about proposed legislation, a quantitative research approach was employed. A survey was conducted among a sample of 80 individuals to gather data on these aspects.
Questions were presented to participants to assess their knowledge, behaviors, and attitudes across the following six categories:
Regarding information seeking habits, participants were asked about the frequency in which they seek information about political issues before casting their votes. Additionally, they were asked to identify the sources they primarily rely on to gather information about political issues. The survey also assessed the participants' likelihood of fact-checking the information they come across, and their responses when encountering conflicting information about political issues.
These inquiries aimed to explore the sources individuals rely on, their level of engagement in seeking information, and their approach to reconciling differing viewpoints.
Participants were asked to rate their level of confidence in understanding proposed legislation or policy initiatives. Additional questions explored respondents' habits of reading or researching the full text of proposed legislation before forming an opinion. Awareness of Congress.gov, the official United States Congress website for accessing legislative information and documents, was also assessed.
Furthermore, the survey inquired about the factors that contribute to participants' understanding of proposed legislation and whether they engage with their elected representatives to share their views on such legislation.
Participants' knowledge of the United States government was also explored, including their familiarity with the structure and functions of the government. The survey sought to determine if participants actively engage in discussions or debates with others to gain different perspectives on political issues.
Perception of media was another important category examined. Participants were asked to rate the overall trustworthiness of the media when reporting on political issues.
Critical thinking skills were assessed by asking participants how often they evaluate the credibility of sources before accepting their information as reliable.
Additionally, the survey investigated whether participants had ever changed their stance on a political issue after engaging in a discussion or hearing an opposing viewpoint, and if so, the factors that contributed to that change.
Finally, the survey assessed the likelihood of participants using a platform that provides concise summaries of proposed legislation and allows for discussions and debates. Participants were asked to identify the features and functionalities they would expect from such a platform to make it more useful and engaging.
It also explored whether participants would find it valuable to have access to additional resources, such as relevant research articles or historical context, alongside the legislation summaries.
Finally, participants were asked if they believed that having a platform like this could positively influence their overall engagement in civic affairs and political decision-making.
Participants were asked about the frequency in which they seek information about political issues before casting their votes. Additionally, they were asked to identify the sources they primarily rely on to gather information about political issues.
The survey also assessed the participants' likelihood of fact-checking the information they come across, and their responses when encountering conflicting information about political issues.
These inquiries aimed to explore the sources individuals rely on, their level of engagement in seeking information, and their approach to reconciling differing viewpoints.
Participants were asked to rate their level of confidence in understanding proposed legislation or policy initiatives. Additional questions explored respondents' habits of reading or researching the full text of proposed legislation before forming an opinion. Awareness of Congress.gov, the official United States Congress website for accessing legislative information and documents, was also assessed.
Furthermore, the survey inquired about the factors that contribute to participants' understanding of proposed legislation and whether they engage with their elected representatives to share their views on such legislation.
Participants' knowledge of the United States government was also explored, including their familiarity with the structure and functions of the government. The survey sought to determine if participants actively engage in discussions or debates with others to gain different perspectives on political issues.
Perception of media was another important category examined. Participants were asked to rate the overall trustworthiness of the media when reporting on political issues.
Critical thinking skills were assessed by asking participants how often they evaluate the credibility of sources before accepting their information as reliable.
Additionally, the survey investigated whether participants had ever changed their stance on a political issue after engaging in a discussion or hearing an opposing viewpoint, and if so, the factors that contributed to that change.
Finally, the survey assessed the likelihood of participants using a platform that provides concise summaries of proposed legislation and allows for discussions and debates. Participants were asked to identify the features and functionalities they would expect from such a platform to make it more useful and engaging.
It also explored whether participants would find it valuable to have access to additional resources, such as relevant research articles or historical context, alongside the legislation summaries.
Finally, participants were asked if they believed that having a platform like this could positively influence their overall engagement in civic affairs and political decision-making.
The following graphs summarize my findings from this survey:
Pain Points
From my research, I was able to identify the following four pain points that are common among United States residents.
1
Information Overload
Users are overwhelmed by the complexity and sheer number of bills and laws being circulated on their states' legislative websites.
2
Significant Time Commitment
Fully comprehending proposed legislation is a time-intensive task, involving in-depth research and analysis, which can be challenging for individuals with busy schedules.
3
Disconnect from Representatives
It is cumbersome for the average person to engage with their elected representatives, bill authors and sponsors, and legislative committees.
4
Archaic Government Websites
Respondents are dissatisfied with the usability of their states' legislative websites, especially their search functionalities.
User Personas
Based on the research insights, I developed three user personas to enhance my understanding of the target audience's needs, behaviors, and goals.
Evelyn
Mark
Naveen
03. Market Analysis
Market Research
To initiate the design process, I examined how existing platforms approach summarizing legislative information.
Quorum
Quorum is a public affairs software that offers local, state, and federal legislative tracking to users. Intended for corporations, trade associations, and nonprofits, Quorum is not available to the general public. While they do have a mobile application for paying users, their primary legislative tracking dashboard is designed for desktop use.
FiscalNote
FiscalNote State allows organizations to monitor state legislation and regulations. Also a corporate tool only available to paying users, FiscalNote makes it easy for clients to compare bill versions, perform legislative research, and access legislative analysis reports.
LegiScan
LegiScan is a website that offers real-time legislative tracking for both citizens and professionals. Their free service, OneVote, allows users to track legislation in their home state and Congress. They also offer multiple subscription tiers for individuals interested in tracking legislation across multiple states and for organizations with multiple users.
Bill Track 50
Like LegiScan and FiscalNote, Bill Track 50 is a legislative tracking tool that offers state and federal regulatory tracking, along with other features, to paying subscribers. Their subscription options range from $600 a year for single state legislation tracking to $5,500 a year for unlimited legislation tracking.
Key Takeaways
1
Inaccessible to the Average American
Many of the existing legislative summary and analysis tools are intended for corporate use. The high subscription fees associated with them pose a barrier to individuals wanting to stay informed about proposed bills in their states.
2
Desktop Oriented Platforms
While Quorum and Bill Track 50 do have limited mobile applications for on-the-go tracking, most legislative analysis tools are desktop oriented. This is appropriate for their intended demographic – corporate users – but may not be the best approach for casual users.
3
Opportunity for UI Improvement
Among the existing tracking tools, the majority rely on extensive data tables to present proposed legislation. They lack social features and, while less text heavy than many state legislative websites, can still be daunting for users to navigate.
04. Starting the Design
Paper Wireframes
I began by creating a series of initial sketches to roughly outline the architecture and arrangement of Hopper, specifically focusing on the content within the app's four bottom navigation tabs.
User Flow
In order to comprehensively chart the architecture and interaction design, establishing a solid foundation for an enjoyable and straightforward user experience, I developed a user flow diagram encompassing all the envisioned pages within Hopper. This user flow meticulously outlines the user's path within the application, ensuring each route is smooth, efficient, and intuitive.
Sign In & Onboarding
Enhance Feed
Home Tab
Explore Tab
Discuss Tab
Profile Tab
Post
Digital wireframes
With my paper wireframes and user flow completed, I moved on to drafting digital wireframes of each main screen within Hopper. I iterated upon these designs between my first and second rounds of usability studies.
Jakob's Law
Considering Jakob's Law, my goal was to incorporate a sense of familiarity into Hopper's explore page, mirroring the architecture of a news application. Users can browse bills in a manner reminiscent of reading news articles.
In later iterations, I replaced the individual policy area sections with a comprehensive "Explore Your Policy Areas" section with chips indicating a user's selected interests to reduce confusion.
Bill Page Screens
Though this iteration is considerably streamlined in comparison to the final mockups of Hopper's bill pages, lacking various legislative details necessary for users to fully understand each bill, the general structure of this page remained consistent throughout each iteration.
Final Digital wireframes
Low Fidelity Prototype
Once I finished sketching out the digital layout, I moved on to crafting a basic prototype for Hopper's main user flow, setting up an account and taking the first steps in exploring bills.
Usability Study Findings
Throughout this project, I conducted two rounds of usability studies. The initial round assessed the functionality of my low-fidelity prototype, focusing on the overall architecture and flow of the app. The second round revolved around my high-fidelity prototype, and respondents helped me pinpoint particular areas where the mockups needed additional refinement.
Round 1 Findings:
1
Add keyword alerts & demographic questions like employment status, homeowner status, etc. in the feed enhancement flow.
2
Users wanted "profile" pages for each legislator to see their voting history, sponsored bills, etc.
3
Allow messaging between users in addition to responding to comments.
Round 2 Findings:
1
Allow users to explore the app without making an account - defer the onboarding process and open up the app straight to content.
2
Too many clicks to get to discussion section; add comment button to feed bill cards.
3
Feed and explore page were too similar – respondents suggested adding discussion threads and bill updates to feed.
05. Refining the Design
Mockup Iterations
Bill Pages and Cognitive Load
To reduce cognitive load, I organized the content on bill pages using tabs. Each tab contained components that streamlined and organized voting history data, author and co-author details, and other information, enhancing readability and visual appeal.
Early Iterations
After Second Usability Study
Gradual Engagement
To bolster user engagement and mitigate the risk of users abandoning the platform prematurely, I implemented a deferred onboarding process. This modification is designed to offer new users a more flexible and accommodating introduction to Hopper.
New users now land on the feed screen and can explore many of Hopper's features without having an account. This initial screen allows users to immediately delve into the content and features Hopper has to offer, encouraging them to explore and become familiar with the platform. When users try to interact with others, comment on bills, or engage with content (such as liking or disliking), they are prompted to log in or create an account.
Final Mockups
Guest Legislative Feed
.png)
Guest Explore Page
Guest Discussion Feed
Sign In to Continue
Sign In
Continue Signing In
Sign In - Phone Number
Sign In - Verification Code
Sign Up - Phone Number
Sign Up - Verification Code
Name
Username
Date of Birth
Password
Legislative Feed
Explore Page
New Post
Post Policy Area
Post with Policy Area
Discussion Feed
My Profile
Settings
Messages
Message
User Profile Example
Bill Page Example - AB-65
Bill Page Example - AB-24
Legislator Profile Example - About
Legislator Profile Example - Authored Bills
Legislator Profile Example - Committees Membership
Bill Page Example - AB-717
Bill Overview Tab Example - SB-58
Bill Summary Tab Example - SB-58
Bill History Tab Example - SB-58
Bill Full Text Tab Example - SB-58
Bill Discussion Tab Example - SB-58
User Profile Preview
Enhance Feed
Enhance Feed - Policy Interests
Enhance Feed - Education/ Reading Background
Enhance Feed - County
Enhance Feed - Key Word Alerts
Enhance Feed - Employment Status
Enhance Feed - Sector/ Industry
Enhance Feed - Homeowner Status
Enhance Feed - Household Size
Enhance Feed - Children
Enhance Feed - Groups
06. Visual System
Typography
In order to maintain clean and accessible typography, Hopper primarily employs Nunito, a sans-serif typeface. Anonymous Pro, a monospaced font, is utilized as an accent font for added emphasis.
Color palette
When developing Hopper's color palette, I chose to utilize neutral tones for the primary app interfaces. This choice served two key purposes: firstly, to prevent overwhelming users with excessive colors, and secondly, to provide a calm visual backdrop for the content.
With a neutral base for the app, I was able to assign distinct colors to each policy area to facilitate easy navigation and establish visual cues. These colors were integrated across bill pages, chips, and checkboxes, creating a cohesive visual language. Striking a balance between neutrality and strategic color application was critical in the design process.
Components
I kept the components clean and simple. All the buttons and chips have fully rounded corners, keeping a friendly, playful tone throughout the app.
Accessibility Considerations
1
Icons
Functional icons all have at least a 3:1 contrast ratio with the background and are simple, intuitive, and consistent shapes.
2
Consistency
Repeated components such as the home button, back arrows, and the bottom navigation bar occur in the same location on each screen within the user flow.
3
Typography
The fonts used throughout my design are accessible, clean, and simple.
07. Takeaways
The Impact
Hopper has the capacity to bridge the gap between complex legislative documents and the general public. By democratizing access to legislative information, the platform has the potential to serve as a valuable resource for advocacy groups, educators, and journalists. This accessibility would enable them to disseminate accurate and understandable information about proposed legislation and laws to a wider audience.
Next Steps
1
Expand to Other States and to Federal Level
Develop Hopper to be available to users across the United States and expand Hopper's content to include federal legislation.
2
Multi-Lingual Support
Incorporate the capability to provide summaries and information in multiple languages, making legislative content accessible to a global audience.
3
Collaborative Advocacy Initiatives
Hopper's community engagement features have the potential to facilitate collaboration among advocacy groups.
4
Legislative Analytics & Trends
Provide data-driven insights and analytics on legislative trends, voting patterns, and historical data to give users a deeper understanding of political dynamics.