Democrus: Website Design for Political Engagement
By Linda Voigt
How user experience design can be used to inform and empower voters
Democrus: Website Design for Political Engagement
by Linda Voigt
Filed Under:

Imagine the last time you tried to find information on a government website. Did you quickly find what you were looking for, or even at all? Did you come away from the interaction feeling more informed than you had before? For many people, the answer to these questions is often “no way, are you crazy?”. That’s where Democrus comes in. Democrus is a non-profit, independent website that provides users with easily and quickly accessible information about Congress and its actions. This service democratizes information that was previously not designed with the average voter in mind, closing the gap between the people and the legislators that represent them.

The Problem

While a majority of U.S. citizens believe that exercising their right to vote is key to being a good citizen, voter turnout rates in both general and midterm elections have been generally trending downward or stagnating. How might we make politically-relevant information more accessible in order to encourage involvement and thus make the government more representative of the people’s will?

Users and Audience

The primary audience of Democrus is 17-29 year olds of all backgrounds. This group historically has the lowest turnout rates out of any age group, with 2018 midterm rates at 35.6% as compared to the next highest group (30-44) at 48.8%. Selecting an audience based on the broad qualifier of age allowed the scope of this project to be general enough while still having some constraints that guided the discovery process. The secondary audience then is the other age groups that are considered when measuring voter turnout rates (30-44, 45-64, 65+). The needs of this group were considered in the process, but did not compromise any decisions made to address the needs of the primary audience.

User Personas

After analyzing the types of people surveyed from these audiences, I created three user personas that represented two main groups from the primary audience and a third from the secondary audience. Check out their detailed backgrounds in the full case study

Roles and Responsibilities

As the sole member of this project, I was responsible for each stage of the UX process. I conducted each aspect of the project management,  creating an overview project roadmap that allotted specific weeks of the semester for each stage of the project. I also conducted all aspects of the research required to understand the problem area which included conducting numerous surveys, competitive analysis of existing applications, researching statistical data, and forming user testing scenarios. I was also responsible for contextualizing all of this research into key UX takeaways by defining a problem statement, identifying primary and secondary audiences, creating three user personas representative of these audiences, and designing the interactions. The last major role I filled was as a UI designer. I created a visual language that was cohesive, delightful, accessible, and expressive of the core values and function of the project.

Scope and constraints

Limited schedule: Like all of my peers, this project was abruptly and fundamentally impacted by unprecedented world events. This posed the challenge of adapting to new class and work structures, adjusting to the limited exposure to classmates face-to-face, and in general balancing responsibilities and needs.

Technical limitation: With the limited schedule came an even tighter time constraint to learn the skills necessary in developing a fully baked and functional site with dynamic information powered by ProPublica API. I adjusted to this challenge with the following plan:

  1. Now: Mockups of key screens to communicate functionality
  2. Near: Complete mockups with added interactivity for testing purposes. Improve technical skills and leverage a javascript framework like Vue.js to create a responsive frontend website.
  3. Next: Integrate data feed from ProPublica API into frontend for added functionality

Process

Discovery

Define problem area: This problem encompasses numerous aspects and spans several decades. The key aspects addressed are:

  1. Low voter turnout rates
  2. Accurate representation of the American public
  3. Local involvement in politics
  4. Minimal trust in the political system and fellow Americans’s political knowledge
  5. Accessibility/ease of use of existing resources

Research: A notable part of the research focused on gathering statistical data on voter turnout in order to identify what portions of the population participated least in elections. This would inform who the website should be designed for. Here are some key takeaways from this research:

  • 53.4% of all eligible voters participated in the 2018 midterm election
  • 35.6% of voters age 17-29 participated in the 2018 midterm election
  • 39% believe voters are knowledgeable about candidates and issues
  • 56% have “little to no faith” in the American public’s political knowledge
Sources: The Public, the Political System and American Democracy and Behind the 2018 Census Midterm Election Turnout

The Takeaway: People believe strongly in the importance of voting, but don’t always exercise their right. Sometimes it is a question of prioritization, resources, and trust.

The Objective: Develop an experience that voters trust to engage them in the political system, making them feel like an empowered and informed citizen. Make the government more representative of the country as a whole.


Surveys: I conducted anonymous surveys through Google Forms asking the surveyee if they agreed or disagreed with a series of statements on political involvement and informedness. These were the key takeaways that informed the problem statement: 

  • Lack of information leads to uncertainty
  • Uncertain voters are more averse to voting
  • Voters care deeply about politicians’ stances on issues
  • Accessibility/ease of use is a blocker

Competitive Analysis: I conducted an audit of three main competitors within the space: The Congress App, TrackBill, and US Federal Law. This audit consisted of screenshots and screen recordings which I then used to analyze with 4 main criteria:

  1. Accessibility
  2. Discoverability
  3. Appearance
  4. Overall Interactions and Ease of Use

After analyzing each of these competitors, I compiled the common strengths and weaknesses which I would use to guide the design process. These were the results:

Common strengths

  • Tabular layout makes sense
  • Show/hide information
  • High contrast text

Common weaknesses

  • Unclear navigation
  • Loose hierarchy 
  • Unclear signifiers (e.g. buttons)
  • Low contrast text

UX Design

Site map & Wireframe Sketches: Having a solid information architecture on which to build the interface of the site was important in this project. To do so, I developed a site map that was the culmination of findings from a card sorting activity conducted with 5 individuals from the primary audience group. The site map then informed what pages needed to be wireframed through a series of sketches.

Site map visualizing the architecture of the site


User Test Plan: In conjunction with site mapping and wireframing, I created a user testing script in which I would ask a series of initial questions on the user’s background followed by a short task list. The purpose of the initial background questions were to get a deeper understanding of the user’s perspective as it pertained to online interaction and information gathering. The scenario-based tasks were intended to test the usability of the site with more of a focus on discoverability of features. You can read the full test script here. Due to the limitations caused by the unforeseen circumstances surrounding this project, I was unable to conduct the extensive user tests intended for the first pass. With this in mind, I’m including these tests as part of the project plan for the second phase of this project as the development of the website is modeled closely to an agile process.

UI and Visual Design

Visual language: The visual language of an user interface plays a vital role in expressing the core values of the experience. It helps shape the tone and voice of any application, affecting how the user feels when interacting with your experience. This is why the core principles of Democrus acted as guideposts for the visual language. Everything from the logo, the color palette, typography, iconography and UI elements needed to make the user feel confident, trusting, and clear-minded as they interact with Democrus.  

The Mockup: View the full case study or key screens to see the views outlined below.

  • Home View: The landing page introduces the user to Democrus, giving them a brief overview of the site’s function. After familiarizing the user with the site, we call the user to sign up for a profile to make full use of Democrus’s follow feature. Once a user has signed up and started following legislators, bills, or committees, they will see the latest activity from this following list on their home page. 
  • Profile: The Profile page allows the user to edit their information as well as quickly manage the legislators, bills, or committees that they’re following.
  • Congress: The Congress tab allows the user to quickly navigate to either the House or Senate pages where the list of representatives and senators are categorized by state. This allows the user to only see what they need to and disregard what they don’t. From these lists, they can click on any legislators card to view more details on that legislator’s personal page. 
  • Bills: The Bills page gives the user the ability to see an aggregate list of all bills flowing through Congress, past or present. Click on any bill to view more details, such as who proposed the bill, who co-sponsored it, and any activity taken on it. 
  • Committees: The Committees page, similar to the Congress tab, allows the user to navigate to a view of committees categorized by House, Senate, and Joint committees.

Conclusions

Centralizing the resources to objective information that voters need reduces uncertainty. The predominant theme throughout this case study, whether voters self-identified as well-informed or not, was that they didn’t know where to even find information about who their specific representatives were, nor what bills were being voted on. They reported senses of uncertainty: Is this information true? Is this information relevant to me? By creating an approachable, predictable, and centralized resource, Democrus addresses these feelings of uncertainty.

Balancing wishful thinking with pragmatic design yields better implementation. You have to keep in mind that the pixels you’re pushing have to be realized through hundreds or thousands of lines of code. If you have a design system of components at your disposal, familiarize yourself with the general properties and limitations of these components. Incorporating this line of thinking, however, does not mean you must sacrifice delightful user interface design; rather, it gives you guideposts that allow you to focus your creative energy into solving the user problem.

Linda Voigt was repsonsible for posting the content on this page. Any inqueries should be directed to the contact information listed above.