Congress.gov

OVERVIEW

Our client - the Library of Congress (LoC) was seeking innovative ways to offer better user experiences on Congress.gov. In this project, we collaborated with the LoC product team and designed a new feature set to improve the exploration and analysis of legislative data (bill texts, sponsorships, events) on Congress.gov.

TEAMMATES

Aannesha Satpati
Anam Bhatia
Anavi Kajla
Janki Desai

MY ROLE

I participated in all steps. Apart from that, I was also the Task Manager and Visual Lead of the team.

Background

As the official website for U.S. federal legislative information, Congress.gov is visited and trusted by 2 million unique visitors per month who conduct remote research of current and historical legislative data including bills, legislative events, sponsors, etc.

Nevertheless, these data can be hard to comprehend and track. Users have to refer and subscribe to different legislative sources as supplementary. Therefore, our client - the Library of Congress was seeking innovative ways to help users use Congress.gov more efficiently.

A glance at users' needs

In this project, we were focusing on legislative professionals and data analysts who study different kinds of data throughout the whole legislative process:

Our newly designed Congress.gov provides an effective way to find and analyze these data!

1. Easily read and analyze bill texts

 • A secotion-by-section menu is provided, which highlights bill updates, and allows quick navigation to a desired part of the bill

• Users can compare different bill versions side by side, and highlight & annotate bill texts.

2. Explore bill sponsorship and members affiliation

 • An interactive timeline and a map visualization help users easily study the (co)sponsorship of a bill: the states the sponsors represent, their political affiliation, and the major activity which led them to support this bill.

3. Personalized dashboard providing quick access to all information the user care

• Users will be encouraged to customize their interest to receive targeted content (e.g. follow members, save bills..).
• In the dashboard, users can get recent updates of followed bills, committees, and members at a glance.
• Based on the policy subjects the user is studying, trending bills are suggested so users won’t miss hot topics

Looking back: How we get there

The current Congress.gov users can be sorted into 5 groups: Expert, Data Analyst, Professional, Novice, and Hill Staffer.

After discussing with the LoC (Library of Congress) product team, we decided to focus on Data Analysts and Professionals for now because these two groups use the website relatively more often.

We interviewed 8 users. Here are the main findings:

Interested in reading more user research results?

1. How to make the complicated Bill Compare Page informative and intuitive

Before

• Each bill text version has a comment section next to it.
• Differences between two bill versions, and highlighted bill texts are marked on the same scroll bar on the right.

X The comment sections take up much space, which makes it harder to read long bill texts as it will require a lot of scrolls.

X When adding comments on both bill text versions, different comments will be marked on the same scroll bar and they might overlap.

After

• Comments are marked as icons and are displayed only when hovered over.
• Each bill text has its own scroll bar with highlighted texts marked there. Bill differences are marked in the middle of two bills.

√ The new page has a higher information density and users can read more bill text within one viewport.

√ It’s easier to locate a specific comment on a bill version.

2. Design a efficient & easy tool kit for the bill text page

Before

There are two tools: 1) the markup tool for highlighting text and adding comments. 2) the select tool works as a normal cursor. The main function of the select tool was for users to stop using the markup tool.

X “I don’t understand what the arrow icon means. What is the difference between it and the markup tool?”

X “I want a search function so I can search for keywords or phrases within the bill.”

After

• We removed the select tool. The markup tool will be highlighted when it is in use. Users can click the markup tool again to stop using it.
• The search function is added.

√ Users can easily understand the new tool bar, and the search function will help users to find needed information more quickly.

3. Design a practical (co)sponsorship visualization that aligns with the real use context

Before

The map at the top has (co)sponsors marked as dots. The timeline below serves to filter (co)sponsors who joined the sponsor list at different stages. At the bottom, there is detailed information about (co)sponsors. It will change accordingly when users interact with the map or the timeline.

X “I want to see the (co)sponsors detailed information first as it is more important to me. The map is useful but it is more like a supplementary tool.”

X “I have to keep scrolling up and down between the map and list to see if the map interactions were filtering the cosponsors list.”

After

The sponsor detailed information is prioritized, and users can open or close the map based on their needs.

√ Important information is shown first. The map becomes collapsible so it is less distracting especially for users who don't need the map to analyze sponsorship in detail. 

√ A real-time change of the (co)sponsors can be seen when interacting with the map without scrolling up and down.

Before

The horizontal timeline has time nodes of the main actions of the bill. Users can drag the cursor to see how (co)sponsors are joining throughout the time.

X “Instead of having timeline periods based on broad bill events, have it based on specific actions would make more sense. Because those are when new cosponsors add their name to the list.”

X “I want to know how many cosponsors are added at different points.”

After

The new timeline has time nodes based on specific actions. Numbers of new (co)sponsors at each time nodes are shown. By hovering over the time nodes, detailed information will be displayed. Click a time node and the member cards section will automatically scroll accordingly.

√ The timeline was adjusted to show more important time nodes that reflect the evolvement of sponsorship.

√ More information is provided: specific event name, numbers of cosponsors joined, their affiliation, etc.

Style guide

Design principle 1. Congress.gov should look apolitical

To avoid applying one political color to large spaces, we were using mainly black, grey, and white. Red and blue were used as accent colors, whose proportions were carefully balanced. Purple and green were chosen to represent the Senate and the House as label colors because they are not connected to any major contemporary ideology in the US.

Design principle 2. As a government website, accessibility matters a lot

An example: Explorations about showing unread new updates of saved bills in the dashboard

In the first design, the updated date was highlighted in a different color to indicate that this is an unread update. However, we later realized that this design was not friendly to color-blind users.

We then explored alternative ways to show the updates while most of them were rejected. They either took too much space thus decreased the information density of this page (the second design), or the label is too small and is not clear about what it’s representing (the third design).

Final design

We referred to many designs of existing applications. The final design was to use a thick line to highlight the unread messages, while viewed updates will have a greyer background. In this way, we have provided two ways for users the identify new updates easily. It’s not taking any extra space, and color blind people can understand as well.

Future work

1) Collaboration feature on bill text annotation. 

3 users in the usability testing mentioned that they want to have a google drive like function. Allowing users to analyze and annotate a bill text collaboratively with their colleagues will help to increase their work efficiency. 

2) Allow users to have more control over the dashboard to make it more personalized.

2 users suggested that being able to adjust the content they have in different parts would help them to better focus on the most important ones. For example, one user wants to adjust actions he can see in the saved bill updates so that he will not receive other unrelated actions that he does not care about.

Thank you!