Politik

In 2021 during my time at Thinkful I worked on an applied project for a client looking to explore how to make legislation information from the United States Congress more accessible online.

Duration & Deliverables
4 weeks (August 2020)

User research report, journey + flowcharts, wireframes, prototypes, usability testing
Role
I took on this project on my own as part of my capstone for Thinkful. I provided a client with research insights as well as design deliverables to guide their product out of the ideation phase.
Key Tools & Software
Figma
Google Forms
Adobe Creative Suite
Scope
With a growing political conscience in the US, about 60% of registered voters don’t know what the representatives and senators they voted into office do on the Congress floor. When uninformed voters continue to vote their incumbents without proper knowledge, they become a problem when those incumbents begin working for special interests versus the needs of their citizens.
Outcome
The Politik app concept provides users with a diverse set of features to parse across and interact with information on legislation. Citizens can track legislation from formulation as a bill through its lifespan until it is passed into resolution as an Act.
Something I learned

Delight in public information makes it all the worthwhile to read

Publicly available information above all should be easy and accessible. But for users who may not understand the context of all information or might be new to learning more, that information should also be engaging and welcoming to novice users in an interface that communicates that.

To continue working further on the usability and design of the platform, I proposed to add further legislation, specifically those at local and state levels. Federal legislation consists of wide-spanning issues, while state and local legislation aim on more specific issues that directly impact its residents.

Process

Discovery & research

What can we learn directly from voters’ understanding of Congress as well as their daily behaviors to propose innovative design solutions?

User survey

I created a user survey to find out exactly who my users would be. I never lived in Chicago nor had I ever been, so I wanted to find out more about them as people, asking questions about what they do on a daily basis, how they use public transportation to get those things done, and how they go about planning those trips on public transit.

I collected 28 user responses, and put together some insights based on the responses received.

Many users said that they’d go about finding more information about their legislators through online methods: the most popular was Google as it shoots out to other sources, while some people mentioned direct .gov websites that would provide pertinent information.

There's a polarization in terms of who believes their voice would affect the actions of Congress. This provided a design opportunity, using the interface as a medium to approach the challenge of whether we can make it easier for common voices to have an impact on federal legislation.

The survey highlighted trends, but extended further questions to ask in my research with potential users and competing platforms. These questions fed into interviews with users as well as with isolating solutions in competitive analysis.

  • How do citizens explore and interact with the political atmosphere, digitally or physically?
  • What motivations drive citizens to become a part of the political community? What do they need to achieve this?
  • What solutions do citizens use to understand Congress activity? What are their frustrations with it?

Interviews, personas, & user stories

I asked questions to 3 participants to dig further into their experiences in the U.S. political landscape. While overall motivations were discovered, distinct goals were established between each interviewee.

These goals, aligned with many statistics from the survey, provided user stories that would assist in ideating Politik as a political platform. These personas displayed below showcase the goals of each user.

Competitive analysis

Several apps and platforms provide its users with value in connecting and engaging with their political community. I looked at the top three platforms that users in both surveying and interviewing pointed to previously using to look at their strengths, weaknesses, and opportunities.

Causes.com

Causes.com provides users with a direct method of checking what bills are on the house floor, arguments for and against the bill, and an overview of the legislation.

It has advantages in providing an informative and concise platform for people to voice their concerns. Users are able to engage with each other in a social media style comment section.

However, this platform suffers from clean moderation: there are often sections where two opposing sides are battling it out with personal attacks and curses not meant for a respectful community.

Congress.gov

Congress.gov is the go-to tool to discover legislation active on the floor and in process of passing through Congress.

It’s strong as a database of all current and previous legislation, where several details are displayed on a bill's progress, supporters, and votes.

However, as a database it suffers usability and ease of use: this is a tool made for power users versus those who want to briefly take a look at what affects them today.

Google News

Google News helps to provide several articles and opinion pieces on everything politics, including legislation.

It’s an easy-to-filter tool to determine the latest news in any particular legislation.

It’s not a very centralized tool for searching politics, as opinion pieces and biased news sources tend to populate the top search results.

Information display

What are the best methods of providing information to fulfill the needs of our users?

Sitemap

Research helped to define a scope as to what issues and needs to approach. Next, I had to observe and design for the relationship between information and interface.  Federal legislation is a lot of text to read, and I wanted to discover and implement best ways of providing this information to users to meet their goals. 

I first put together a sitemap, which helped me with organizing the different points of information I wanted to display across the interface. This prepared me better for ideating how to achieve these goals through simple tasks and determining what information would be prioritized for certain detail views.

As displayed on the sitemap, users at the homepage would have access to multiple views that would provide details on a legislator or a bill. There are also customizable parameters that allow for users to control or modify their experience in the app. This map was ideated as the easiest way of providing multiple avenues of finding the same information while accounting for flexibility desires by the user.

User flows

User flows helped me determine the easiest way to get a user to achieve their goal in mind. I took apart the user stories and broke them down into simple tasks. The sitemap helped me determine what users would be interacting with in tasks, and the actual flow helped with determining what they’d be doing and how much I could simplify their usage.

Wireframes

Wireframing was the easiest method of putting together solutions that would incorporate information provided to users within a reliable interface. I began putting together screens immediately after I concluded on information architecture, thinking about components to moderate ease of use, navigation, and content layout.

The Dashboard provides users with a collection view to view their legislators and active bills.

I initially had a condensed view to display as many bills as possible, but changed it to add in more legible details about bills.

Wireframing a Tab bar helped me determine the views of different screens:

  • Dashboard: relevant bills and legislators from onboarding data
  • Browse: freedom of searching for specific legislator or bill
  • Activity: serves as notifications for user activity
  • Settings: user freedom of modifying parameters

Visual design

How can we enhance our solution to better meet goals for user functionality?

Visual design goals

The goals for incorporating visual design were geared toward making interface design more meaningful while also enforcing functionality standards. I listed them down before diving deeper into deliverables.

  • Creating hierarchy for important information: While IA has solved what information is available, visual design will determine the importance of certain text bodies.
  • Sense of identity and seriousness: Politik should be an engaging interface while also preserving a seriousness of and immersion in politics.
  • Communicating meaningfulness and reliability: Users may spend brief or longer amounts of time on the platform. Politik should provide users with data that is both meaningful and reliable to them during their session.

The brand was a tough challenge to overcome.

After discussing with the client, we had to ideate visuals for an app that had no political stance, while being reliable and accessible at the same time. We also needed to create a modern feel with dynamic and changing information.

Color palette

Typography

Combined two sans fonts. Serif fonts are great for print, but to communicate modernity and punctuality, two sans fonts of different weight were required.

Aktiv Grotesk was a perfect font to increase readability and contrast of information areas.

Putting it all together

  • Included accenting colors for Yea/Nay and Progressive/Conservative
  • Contact button redirects to a new screen, where users can send a message to their legislator’s office
  • Users are supported by agents that gets into faster contact with the legislator's office 

Delivering results

How can we iterate and refine our solution and prepare it for public use?

User testing

An interactive prototype was tested on new set of 3 users to to see their success and errors in performing the tasks I discovered and designed for through user stories. I evaluated metrics of task success, time, and errors to map out the efficiency of the flow created, as well as the reliability as the interface.

Tasks were divided into the tabs, and I recorded metrics down according to each task:

You've just logged into the app for the first time, and you're interested in learning more about the Families First Coronavirus Response Act. How would you go about finding an overview of the bill and following it?

3 successes, 0 errors, 6.0 seconds on average

Navigate to the Browse tab, and under the Civil Rights category, find the Law Enforcement Accountability Improvement Act of 2020. Make sure to read up on its overview. The community would like to hear your perspective on this bill. Find the place where you would leave a comment.

3 successes, 2 errors, 40.5 seconds on average

Your local legislator is voting against the Families First Act, which would not require workers to receive paid leave due to COVID. Do you agree or disagree? Send a message to your legislator stating your concern and why they should consider it.

3 successes, 1 error, 94.0 seconds on average

Changes to UI from test feedback

Users pointed at certain parts of the interface to ask questions of how they would do certain things. These weren’t things I considered in my initial design process, but these points of feedback helped enhance the interface through isolating and accommodating the interface to the desires these users had.

Unfollow button

One user asked how they could unfollow legislation once they were no longer interested in following it.

This was easily approached by creating a method to confirm a user wanted to unfollow the bill, where the screen greys out to isolate the decision users wanted to make on whether they’d unfollow by pressing a simple button.

Political stance indicators

Another user saw the political chart in the Overview tab and desired seeing where their legislators stand on the Issues tab with political spectrum.

I initially created the issues tab on the Legislator view to only incorporate issues and the direct quotes those legislators have made about those topics. I squeezed in colored tags that denote progressive, moderate, or conservative stances so users can quickly glance and understand what type of legislator they are dealing with. 

Voted bills vs. unvoted bills

I initially didn’t account for what a voted-on bill would look like, and only included bills with placeholders saying "No Vote" for each legislator. So when a user noticed it, I knew I had to throw in design considerations to meet the need.

The Families First COVID Response Act turned out to had already been voted on, and I was able to incorporate the Yea/Nay votes as additional accent colors, green & red, on the interface.

Onboarding flow

Lastly, I enhanced the overall experience by incorporating an onboarding process to better highlight the curation of the content on the Dashboard, which is populated by the three legislators each voter is assigned as well as certain topics and collections of bills they might be interested in.

Overall takeaways

My client was very pleased with the outcome of this project. As part of the client package, I was able to deliver these resources and prototypes in a development handoff to the client who would hire a team to implement these screens into a working mobile app on iOS.

To continue working further on the usability and design of the platform, I proposed to add further legislation, specifically those at local and state levels. Federal legislation consists of wide-spanning issues, while state and local legislation aim on more specific issues that directly impact its residents.

I'm hoping to partner again soon with a more mature Politik team, and I will update this case study with more progress. Stay tuned and don't forget to subscribe to my mailing list if you'd like to hear more. Cheers!