Spill the Bill

PRODUCT DESIGN | CAPSTONE PROJECT  •   2023

Objective

A majority of Americans access political news through traditional news outlets and social media platforms, which often provide fragmented or biased information.

Our team set out to develop a novel solution that simplifies how users research and track congressional bills.

ROLE

Spill the Bill is an ongoing project, being completed as part of course work at the University of Michigan-Dearborn.

TEAM
• Lea Gray, UX/UI 
• Allan Kochanek, UX 
• Abigail Lorincz, UX/UI 

CHALLENGE

Trust in American news organizations is nearing record lows. Yet, most Americans still rely on mass media to follow politics in real-time. Our team wondered, how might we develop a political tracking product that brings unfiltered, engaging information to users in real-time.

CONTEXT

Connecting people to the source of political news

To kickstart our research, the team first analyzed existing political trackers to understand their features and target audiences. We found a lack of products covering congressional news, leading us to wonder how we could better connect people to the resources offered by Congress.gov.

Existing political trackers are not designed to build trust with users

Political trackers have faced numerous challenges, including evolving political landscapes, privacy concerns, and technological limitations. In response, our team conducted a literature review to learn how people build trust in online political sources.

Americans trust printed news most but consume more news online

58% of Americans obtain news using a smartphone or computer. Americans prefer online and television news, yet trust these formats the least. Twice as many respondents reported high emotional trust in local news organizations than national outlets.

CHALLENGES WITH MASS MEDIA

  • Half of Americans find it difficult to separate fact from fiction and stay informed
  • Perceived imbalances between business and civic purpose erodes trust in news outlets
  • Low emotional trust correlates to greater skepticism of experts and the political process

COMPETITIVE ANALYSIS

Identifying gaps in the market

Knowing trust was critical to the success of any political tracker, we assessed top competitors to uncover opportunities for building credibility and reliability into our own platform.

Goals

• Identify strengths and weaknesses in products
• Understand target audiences and user preferences

Insights

• Congress.gov is comprehensive but clunky
• Most products are utilities, not consumer facing

SURVEY

Learning how people select political sources

We identified a need for a free and accessible consumer product with advanced research tools. However, we still didn't understand know how individuals select political sources so we designed a survey to address unanswered questions from our literature review and competitive analysis. In total, we received 99 responses.

People want to fact check sources but lack the time and tools

A strong pattern emerged from our survey. Respondents cared about the reputation of the news outlet, fairness of reporting, and preferred to do their own fact checking but often lacked the time or had difficulty finding sources they perceived as credible.

Focus groups validated our survey respondents' concerns about source credibility

Allan moderated two focus group sessions, where 9 individuals discussed 17 questions over 90 minutes on Zoom. The participants reflected on the survey questions in depth. Interestingly, we found that focus group one valued local sources most, while focus group two trusted their personal network of friends and family.

We spoke with congressional representatives and their constituents

Our participants varied drastically in age, political affiliation, and occupation. Two of our nine participants previously served in office and echoed the same concerns as the other participants. To assess the responses more deeply, we conducted sentiment analysis on the focus group transcripts to pinpoint emotionally intense responses.

Participants were most optimistic discussing products that would help them understand the impact of congressional bills and most negative when asked if technology could change the political process for the better.

The patterns in our research were clear - we had validated the root problem

THE ROOT PROBLEM

• Time constraints limit how often people willingly engage in political fact-checking
• Lack of source transparency and user-friendly interfaces erode trust in political news
• Inability to customize political trackers prevents users from tailoring content to their interests

IDEATION

Translating requirements into low-fidelity designs quickly

Our team had many ideas and needed an efficient way to prioritize essential features. Using a Miro board, we categorized over 100 ideas by importance and feasibility. Several rounds of dot voting narrowed our ideas down to those that enhanced search functionality, source transparency, and research capabilities.

Combining the familiarity of online news with novel political tracking tools

Originally, the team designed a home page layout comparable to Congress.gov. However, early feedback from users reinforced the importance of providing an experience that felt familiar to online news websites.

Helping users find and contact representatives

We wanted each representative to have a profile that displays their activity in Congress, including their voting record, committee assignments, and personal bio. We opted for a more visual and compact view that allows users to toggle between representatives and senators, as well as apply filters to narrow their search.

Breaking bills down into bite-size pieces

To differentiate ourselves from competitors, we knew it was paramount that we make legislation more comprehensible. Our first version allows users to activate research tools in the sidebar. However, we believed version one didn't go far enough in helping people understand the immediate impact of the bill on their lives. Version two corrects this with more elements highlighting and summarizing key parts of the legislation text.

VISUAL DESIGN

Building for scale with Material 3

In preparation for higher-fidelity mockups, the team decided Google Material 3 would help us build a more consistent, scalable, and accessible design. We also anticipated that should our project be developed in the future, having a documented design system would be beneficial.

HIGH-FIDELITY PROTOTYPE

Designing key user flows in Figma

Lea and I collaborated to create high-fidelity mockups that would be used for testing. Our primary goal was to design a familiar experience that users of online news websites would find intuitive.

Leveraging UI patterns from top news websites

We opted to follow the traditional UI pattern of modern news websites (e.g., CNN, NBC, Reuters, etc.). We did so to make the content scannable, responsive, and engaging via an infinite scroll.
Dashboard mockup

Building trust with users through a modern, neutral design

Although we heavily drew inspiration from conventional news websites, we heard from users in our interviews that they appreciate clean, simple interfaces. We built a design that provides a modern aesthetic and neutral color palette to build trust with target users who value less biased news sources.

Aiding content exploration with a mega menu

Our website's information architecture is large, which led us to create a mega menu that enables users to browse legislation categories and access Congressional livestreams. We supplemented the navigation bar with a mega menu because it was the best solution to organize and present a significant amount of information in a more structured and visually appealing manner, making it easier for users to find what they are looking for.
MORE UI MOCKUPS
Dashboard mockup

Legislation Overview

Users access this page to quickly view legislation sponsors, voting records, summaries, and the bill's status.
Dashboard mockup

Representatives Directory

Here, users can search, browse, and filter representatives to find current and past politicians. Each individual has their own profile page, which shows past voting records, committee assignments, and contact information.  

REITERATION

Testing our novel features with target users

We used Useberry to observe how users flowed through our website and interacted with the research tools. We recruited 6 participants of varying backgrounds and political affiliations to complete timed tasks, fill out a system usability scale assessment, and provide open-ended feedback on our prototype.

Assigned User Tasks:
• Creating an account
• Searching for specific bills
• Interacting with the voting record chart
• Finding and contacting a representative
• Identifying bill cosponsors and their amendments

Based on testing results, we made several revisions. A selection are shown here:

A second round of testing showed our changes improved usability by 8 points

We couldn't confirm that the revisions we had made would improve the website's information architecture and research tools. The team decided to conduct another round of usability testing with 6 more participants. For direct comparison, we followed the same protocol as the first round of testing. The results showed a modest improvements in average SUS scores and task completion times.

LIVE PROTOTYPE

Most recent version of Spill the Bill

Personalized News Feed

• View suggested congressional bills
• Explore bills or conduct a search

Compare Bill Amendments

• View bill text that's been added
• View bill text that's been removed

Research Legislation Text

• See businesses, departments, and representatives highlighted in the bill
• Hover to activate pop-up glossary

View Election Results

• See current balance of political power
• Check election results at the federal and state levels

Connect with Politicians

• Track politicians' congressional activity
• Explore politicians' committee assignments

Congressional Calendar

• Be notified of upcoming votes
• See daily congressional schedule

Congressional Calendar

• Be notified of upcoming votes
• See daily congressional schedule

LESSONS LEARNED

We present our work to faculty members on December 14th

We are currently preparing our final presentation of Spill the Bill, which will be shared with friends and faculty. This year long project provided numerous opportunities for me to grow as a designer and communicator:

Practical takeaways for personal growth

Identifying and understanding constraints early. Our team faced obstacles while wireframing because we hadn't fully grasped the depth of tools provided by Congress.gov. This complicated our efforts to build features that helped users visualize legislation information. Spending more time considering how sources like Congress.gov are designed would have alleviated this issue.

The value of delivering familiar experiences. Our users were most receptive to the product when it felt consistent with other news platforms. Following conventional UI patterns for our website helped us deliver a more familiar experience that translated to lower task completion times.

Communicating brand values through strategic UI choices. The research we conducted with users prior to creating the high-fidelity designs led us to use Material 3 guidelines and a neutral color palette. The result was a product our target users perceived as being more modern and void of problematic political bias. This reinforced for me the value of making strategic UI decisions that reflect the brand's mission.

Literature Review References
1. American views 2022: Part 2 trust, media and democracy. Knight Foundation. Retrieved February 20, 2023 from https://knightfoundation.org/reports/american-views-2023-part-2/

2. Andreu Casero-Ripollés. 2018. Research on political information and social media: Key points and challenges for the future. El Profesional de la Información 27, 5: 964. http://doi.org/10.3145/epi.2018.sep.013. Burcu Turan and Hafize Keser. 2015. Academic Congress Guide Mobile Application

3. WCDAE Sample Congress. Procedia - Social and Behavioral Sciences 177: 29–37. http://doi.org/10.1016/j.sbspro.2015.02.3264. Jakob Ohme, Erik Albaek, and Claes H. de Vreese. 2016. Exposure Research Going Mobile: A smartphone-based measurement of media exposure to political information in a convergent media environment. Communication Methods and Measures 10, 2-3: 135–148. http://doi.org/10.1080/19312458.2016.115097

4. Monica Anderson and Brooke Auxier. 2020. 55% of U.S. social media users say they are 'worn out' by political posts and discussions. Pew Research Center. Retrieved February 20, 2023 from https://www.pewresearch.org/fact-tank/2020/08/19/55-of-u-s-social-media-users-say-they-are-worn-out-by-political-posts-and-discussions/

5. Masahiro Yamamoto, Matthew J. Kushin, and Francis Dalisay. 2018. How informed are messaging app users about politics? A linkage of messaging app use and political knowledge and participation. Telematics and Informatics 35, 8: 2376–2386. http://doi.org/10.1016/j.tele.2018.10.0087. Reem Nadeem. 2020.

6. U.S. adults who mostly get news through social media lag behind others in attention to election and pandemic news. Pew Research Center's Journalism Project. Retrieved February 20, 2023 from https://www.pewresearch.org/journalism/2020/07/30/2-u-s-adults-who-mostly-get-news-through-social-media-lag-behind-others-in-attention-to-election-and-pandemic-news/

7. Sara Atske. 2022. U.S. media polarization and the 2020 election: A nation divided. Pew Research Center's Journalism Project. Retrieved February 20, 2023 from https://www.pewresearch.org/journalism/2020/01/24/u-s-media-polarization-and-the-2020-election-a-nation-divided/9. Sara Atske. 2021.

8. Americans who mainly got news via social media knew less about politics and current events, heard more about some unproven stories. Pew Research Center's Journalism Project. Retrieved February 20, 2023 from https://www.pewresearch.org/journalism/2021/02/22/americans-who-mainly-got-news-via-social-media-knew-less-about-politics-and-current-events-heard-more-about-some-unproven-stories/

9. Sujeet Kumar Sharma, Ali Al-Badi, Nripendra P. Rana, and Laila Al-Azizi. 2018. Mobile applications in Government Services (MG-app) from user's perspectives: A predictive modelling approach. Government Information Quarterly 35, 4: 557–568. http://doi.org/10.1016/j.giq.2018.07.002

10. Sara Atske. 2020. Confidence in public acceptance of election results connects to following political news, relying on social media. Pew Research Center's Journalism Project. Retrieved February 20, 2023 from https://www.pewresearch.org/journalism/2020/02/12/confidence-in-public-acceptance-of-election-results-connects-to-following-political-news-relying-on-social-media/

11. Thomas J. Johnson, Magdalena Saldaña, and Barb K. Kaye. 2021. A galaxy of apps: Mobile App Reliance and the indirect influence on political participation through political discussion and trust. Mobile Media & Communication 10, 1: 21–37. http://doi.org/10.1177/20501579211012430

I appreciate your time!

To everyone who has ever read, critiqued, or shared my work - thank you.