Overview

The Problem

U.S. legislation (state and federal) is notorious for being complicated, both in language and presentation. To see this firsthand, try navigating your state's legislative website. If you're lucky, it might be somewhat user-friendly like Colorado's, where you can browse bills by topic or sort them by relevance, action date, or bill number.

Unfortunately, Colorado's approach isn't typical. Many states, like California, look like they have't been updated since they were first created... To find a bill on California's legislative site, you need to know its bill number beforehand—usually something like "AB" or "SB" followed by numbers. And even after you track down the bill, you're faced with dense text filled with complex ideas and technical terms designed for accuracy but difficult for the average person to understand.

This complexity creates a significant gap between governments and their citizens. Hopper aims to bridge this gap by making legislative information clearer and easier for everyone to access and understand.

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. Encourage Civic 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:
   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.

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:

Category	Research Focus
Information Seeking Habits	How often participants look up political issues before voting Main sources they trust for political info Likelihood of fact-checking political information How they handle conflicting or contradictory info
Understanding of Proposed Legislation	Confidence in understanding new bills and policies Whether they read or research full legislative texts Awareness of Congress.gov or state legislative websites as a resource Factors influencing their understanding of legislation Whether they contact elected representatives about proposed laws
Knowledge of U.S. Government	Familiarity with government structure and functions Participation in discussions or debates to hear different views
Perception of Media	Level of trust in media reporting on political topics
Critical Thinking Skills	How often they evaluate credibility of sources If and why they've changed opinions after hearing opposing views
Potential Platform	Interest in a platform providing concise summaries of legislation Desired features and tools to enhance usefulness Value of additional resources (like articles or historical context) Belief that platform would increase civic engagement and participation

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.

1. Evelyn, Persona #1

Evelyn is a 30-year-old graduate student studying political science. She is passionate about understanding legislative processes & staying informed about proposed bills. Evelyn is tech-savvy and often uses mobile apps to access information on the go.

Goals	Challenges	Motivations	Needs
To access summarized information about proposed legislation to save time & understand key points quickly. To engage with legislative community by commenting on bills and participating in discussions.	Finds it overwhelming to read lengthy legislative texts due to her busy schedule. Struggles navigating complex political jargon & would benefit from concise, clear summaries.	Seeks a platform offering well-curated bill summaries, user-friendly interface, & a vibrant community to engage and learn from others.	Personalized feed of legislation summaries based on her interests. Notifications for bill updates & comments. Simple commenting system to express opinions.

---

2. Mark, Persona #2

Mark is a 50-year-old working professional with limited knowledge of politics. He is interested in understanding how legislation affects his daily life and community. Mark prefers simple and straightforward information to keep informed.

Goals	Challenges	Motivations	Needs
Easily access summarized information about proposed bills & understand their potential impact. Voice concerns about specific legislation without being overwhelmed by complex political language.	Intimidated by complex legislative processes & struggles to find easy-to-understand reliable sources. Hesitant to join discussions due to fear of judgment or appearing uninformed.	Motivated by civic duty & desire to be an informed citizen. Wants a platform with user-friendly summaries, a supportive community, & intuitive commenting system to encourage constructive discussions.	Simplified interface with clear summaries in plain language. Tooltips/explanations for political jargon. Welcoming environment for questions & friendly responses.

---

3. Denise, Persona #3

Denise is a 45-year-old community activist who is actively involved in grassroots organizations & frequently engages with local politicians to voice concerns about proposed legislation.

Goals	Challenges	Motivations	Needs
Stay updated on relevant bills & laws impacting his causes. Track politicians' voting records & activities to assess alignment with his values. Connect with like-minded individuals & organize collective actions.	Time-consuming & overwhelming to gather info from various sources to fully understand proposed bills.	Driven by desire for positive impact. Wants comprehensive legislative info, personalized tracking of politicians, & connection with other activists to amplify voices.	Categorized system to browse bills by cause. Notifications on specific politicians or bills. Features supporting collaboration & coordination with fellow activists.

Market Analysis

Existing Legislative Information Platforms

Service	Analysis
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.
BillTrack50	BillTrack50 provides tools for researching and tracking legislation across all states and Congress. It offers public-facing widgets and limited free use, with premium features for organizations. The interface focuses on usability and accessible search/filter tools.
Plural	Plural is a public policy collaboration platform that includes legislative tracking for state and federal bills. It emphasizes user-friendly visualizations and is one of the few platforms offering limited free access for civic tech and public use.
FastDemocracy	FastDemocracy is a newer legislative tracking tool focused on usability for non-lobbyists. It offers free tracking of bills at the state and federal level, with intuitive design and some data visualizations geared toward general users.

Key Insights

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.

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.

Sign In & Onboarding

Enhance Feed

Home Tab

Explore Tab

Discuss Tab

Profile Tab

New 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.

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.

View the wireframes/low-fidelity prototype in Figma: Figma Low-Fidelity Prototype

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.

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.

Initial Interations

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.

High Fidelity Prototype

View the mockups and final high fidelity prototype in Figma: Figma High-Fidelity Prototype

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.

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.