Congress.gov
Congress.gov
Improving exploration & analysis of legislative data
Improving exploration & analysis of the source of U.S. legislative information
Client
Library of Congress
My Role
Lead Interaction Designer
Team
3 Product Designers, 1 Product Manager, 1 UX Researcher
Duration
8 months
Problem
How might we use data visualization to improve the exploration and analysis of legislative information on congress.gov?
Congress.gov is a website used by more than 5 million unique visitors a month and is the source of all federal legislative information such as bills, members, committees, and house & senate floor proceedings. Lobbyists, political reporters, congressmen and even novice users come to this website to get accurate and the most up-to-date information on federal legislation.
However, the website faced stiff competition from several other websites that used innovative ways (eg. data visualization) for users to engage with the same information, and the Library of Congress UX team wanted us to increase user engagement and website traffic.
My Role
For this project, I served as the Lead Interaction Designer facilitating the ideation of product concepts from the research and creation of user flows and prototypes.
I was also the Communications Head serving as the main point of contact for all communications between the Director of UX at the Library of Congress and my team.
The Solution
We designed 3 key product features to help legislative analysts and political journalists better browse, explore, and analyze legislative data.
Curious about design decisions? Jump to hi-fidelity screens. ⟶
Bill text exploration & analysis
Users can easily navigate between sections of bill text, compare different bill versions and comment/highlight bill text. They can also export their analysis for improved collaboration with their teams.
Bill cosponsors visualization
An interactive timeline along with a map visualization helps users easily analyze supporters of a bill, the state they represent, their political affiliation, and the major activity that coincided with their support.
Personalized dashboard
A dashboard provides users with an easy way to stay updated on the legislative activities pertaining to their interest area and keep track of bills they follow.
Measuring Success
If this were a real-world project, this is how I would measure success. I propose using the following metrics:
- Engagement, number of monthly active users
- Retention, users who use the same features again
- Task success, number of users who successfully complete tasks
01 Selecting the right user group
The client had already conducted prior research and identified 5 different user types. We chose to focus on only those who aim to analyze legislation and find trends.
Data Analysts, like legislative analysts working at lobbying firms & data scientists who explore trends
Professionals, like policy advisors & political journalists that find & create stories from the data
Initially, we included the novice user type (people like you and I) thinking that if it can be made usable for people that are not familiar with legislative information then it may be usable for every other user too. However, that idea was quickly abandoned in order to stay true to the design objective of improving data exploration & analysis.
02 What do users do with legislative data?
After getting familiar with the US legislative system and analyzing competitive websites, we conducted 8 contextual inquiries—of which I conducted 1 interview—to understand what our users were doing with the data and their workflows.
We had to get really scrappy to recruit users because we didn't receive that support from the client and were on a tight schedule. We sent hundreds of emails and LinkedIn & Twitter requests everyday to finally get 8 responses!
Some key insights from the research:
- Users track individual bill sponsors (congresspeople), their affiliations, press releases and voting records
- Users stay updated about bills through newsletters, news websites and their company's internal tools (CQ RollCall, etc.)
- Users need a better way to organize their resources (links, articles, etc.) and bills they are tracking
- Users want to easily pinpoint changes made to new versions of bills
- Users usually share their work and collaborate with their teams to generate the final product (articles, reports, etc.)
These findings were presented to our clients and they shared some of their ideas with us too. Immersing them in the data we collected helped us better communicate the direction we were planning to go in.
03 Brainstorming solutions & storyboarding
Our team came up with 3 main solutions but following a discussion with our client and keeping in mind time constraints, we only went ahead with the following 2 design concepts.
Bill Page Redesign
Redesigning the bill page to include visualization elements for easier bill comparison & cosponsors analysis.
- Save bills to dashboard and subscribe to alerts
- Use bill text Analyze Mode to highlight and comment on bill text and share bill analysis
- Visualize co-sponsors of a bill to better explore member affiliation
- Compare different bill versions
My Dashboard
A personalized dashboard to explore and save legislative activities based on a user's preferences
- Set preferences for the type of bills interested in
- Personal dashboard
- Trending Bills based on preferences
- Saved/Subscribed Bills
- Events Calendar
- Member Activity
From these concepts, we created multiple storyboards to get a better sense of how they fit into our users day-to-day work life and to ensure that their activities were supported by our ideas.
04 Introducing structure & hierarchy
Next, information architecture & user flows were made to identify ways in which a user could navigate these features within the scope of the existing website.
Once a clear structure was in order, wireframes were made to establish each screen's layout, interactions, and functionality.
05 Testing & user feedback
We conducted 5 usability evaluations with 3 legislative analysts (expert users) and 2 novices to discover major functional and interaction issues.
Since there was a lot of feedback, I've shown changes that I majorly contributed to:
Cosponsors Visualization
This page showed an interactive visualization of congresspeople who had shown support for a bill.
Before
PAINPOINT #1
Users had to keep scrolling up and down between the map and list to see if the map interactions were filtering the cosponsors list.
Placed both the map and list side by side so that the changes were easily detectable.
PAINPOINT #2
Points on the timeline weren’t useful to users because they didn’t show the legislative actions↗ corresponding to when cosponsors were added.
Timeline altered so that it only showed those points when cosponsors were added and the corresponding legislative actions.
After
Dashboard - My Feed
This page showed personalized content like bills, committee meeting schedules and member activity based on topics of interest selected by the user.
Before
PAINPOINT #1
Users couldn't see how selected filters were reflected in the results.
Added details related to the filters to each Bill card to make it clear why those bills came up when a filter was applied.
PAINPOINT #2
Most users were interested in committee activities but this section was at the bottom and also included other events/schedules making it difficult to find committee activities of interest.
Section changed to show information relevant to the committees selected by the user and brought it to the top of the page.
After
06 Final hi-fidelity designs
A design system was made to establish the visual direction of our final designs and to ensure consistency across screens.
Since this was a government website and had to look objectively unbiased, we had strict instructions to balance the use of red and blue so that it didn't look like congress.gov favoured any one political party. So we had to pick several other accent colours to achieve the complexity of our designs and ensure that those colours did not coincide with some other political party!
Bill Page Overview
Although the content on the page is similar to that on the current website, the discoverability of certain options was improved to make it easier for users to keep track of bills they are interested in.
Bill Text Overview
A major pain point of our users was their inability to navigate to certain sections within the bill text (which can run into 100s of pages) and find the desired information. For this, features were added to help them easily explore bill texts and discover new additions.
Compare Bill Text
Users want to keep track of how a bill changed between versions i.e. amendments, as it moves through the legislative process. Bill Compare Mode allows users to easily navigate to modified sections.
Annotate/Highlight Bill Text
Users typically analyze bill texts by taking notes on external tools and sharing them with their teams. Giving users the ability to highlight and annotate bill text within the website provides them with a more convenient way to analyze bills which they can later export and share with their team. Annotating the bill also automatically saves the bill to their dashboard.
Explore Bill Cosponsorship
Users, in particular lobbyists, are interested in knowing more about people who sponsored/co-sponsored a bill. What are their political affiliations? When were they added as co-sponsors? What major activity led them to support this bill? These were the major questions our user group tried to understand while analyzing bill sponsors. Our new design would allow users to find answers to these questions.
Cosponsor Visualization
The cosponsor map visualization provides an easy way for users to filter co-sponsors based on their political affiliation and the state they represent.
Set User Preferences
Users keep track of bills from specific policy areas or member/committee activities as a part of their job function. With this feature, they can set their preferences and view a personalized feed on their dashboard.
Dashboard - My Feed
Users would scan news websites or receive newsletters to stay updated on the latest legislative activities. With My Feed, users can do the same AND stay at the primary source of this information to find accurate, up to date information such as new/trending bills, upcoming committee meetings, and recent member activity.
Dashboard - Saved Bills
Users can keep track of the bills they have saved or analyzed.
Saved Searches
Our user base made use of the advanced search feature on the website and needed a way to save and access those searches later on. We redesigned the search box to include easy access to saved and recent searches.
Reflection & conclusion
The final designs were presented to the Library of Congress in DC to their product team including designers, developers, and PMs. The team was impressed by the ingenuity, feasibility, and design aesthetic of the new concepts and were excited to take the next steps and possibly deploy these features in newer versions of the website.
It was a different experience for me to work on creating a whole new feature set of an existing product over the course of many months. It taught me the intricacies of working in a team and collaborate with clients better, how to design keeping constraints in mind, and how to present ideas/concepts to a diverse audience.