Product Design + User Experience
influence cover.png

Influence Texas

Responsive web design

 
 
 

Influence Texas

A web directory that contextualizes Texas legislators, bills, donors, and issues.

Role: Interaction Designer

Design Team: Solo

Project: Influence Texas

Tools: Sketch App, Invision, Flinto

influence cover.png
 
 

Project Background

Information about Texas policy decisions is available to public through official state resources. Unfortunately, these resources are wholly outdated and unwieldy. Using them to find the legislative information you are looking for is almost impossible. Without adequate resources, we rely on outlets that are incomplete or worse, bias.

Influence Texas aims to put legislative information back into the hands of the public by making information about our legislature available and accessible. It also helps illustrate the financial relationships that exist in Texas politics. In 2018, Influence Texas released the first version of a web app. I joined the project in 2019 to help redesign its interaction and update its visual design for the next release.

 
 
The official resources for information about Texas legislators, bills, donors, and issues

The official resources for information about Texas legislators, bills, donors, and issues

Influence Texas Use Cases

Influence Texas Use Cases

 
 

 
 

Understanding the Content

To start, I ran a content analysis on the Texas Legislature Online [TLO]. TLO lets you search the Texas legislature for bills, subjects, committees, actions..etc. This exercise helped me understand how information exists and is displayed in the system. It helped me draw out the essential metrics of the Texas legislature and understand how they all fit together. It also helped me recognize the actual weight of data I was designing for. All of this influenced how I approached interface.

 
search tools.png
numbers.png
 
 
 

Heuristic Evaluation

Next, I evaluated the current release of the Influence Texas app to find the interface elements that needed an update. The evaluation helped me identify the ways I could further display and emphasize the data through interface. These are some of the key standouts:

  1. I identified to the content for each category (legislators, bills, donors) is not filterable. These categories are too big to scroll through so the user must rely on the search function.

  2. Tables are not responsive. At smaller breakdowns, information wraps non-uniformly or is cut off completely.

  3. General spacing affected readability and button selection.

  4. In a desktop environment the app doesn’t utilize the extra space well or visually prioritize the importance of specific data.

 
heuristic.png
 
 

 
 

Core Experiences

  1. Individual search tools for legislators, Bills, Donors, and Issues.

  2. Expanded functionality for metric comparison and insight gathering.

  3. Data Visualization for each category to emphasize the significance of the data.

 
 

 
 
 

Information Architecture

I used legislators, bills, donors, & policy areas (issues) as the first and highest categories of content. The hierarchical structure allows users to moves down from these broad categories into more specific information. This facilitates immediate and versatile use. Immediate because the information is always in front of the user. Versatile because this structure gives users different ways to angle into information.

At the second level of content, A specific piece of content from one category is compared in context to other categories. This interaction mirrors the top level of content in structure an interface. I wanted to make using this directory a brief and simple experience.

 
Every legislator has a bill history, a list of donors, and list of issues he/she/they have championed.

Every legislator has a bill history, a list of donors, and list of issues he/she/they have championed.

 
 
 

Sketches & Iteration

I started forming the design with only a clear conception of the categories of content and the individual filters for each category. It took me a few iterations to find out how I could properly represent them in an interface. I used the Material Design design language as a basis to iterate from. A few things that did not work were:

  1. Cards as lists. I wanted to use cards to express the main content. They would expand outward at larger screen breakdowns. Unfortunately, the content in the cards were often too long to fit.

  2. Visual hierarchy. I made many adjustments to my tab structure. They were confusing and affected usability without proper emphasis.

  3. Data Visualization. My first attempt at visualizing the data involved averages and percentages…. I was doing way too much.

 
Desktop HD Copy 8.png
iterations.png
 
 
 

Texas Legislators

Legislators makes the first category of content. Shown is a heat map of Texas districts. The more money in a district the warmer that district is on the map. This is the highest representation of where and who the money flows to in Texas. Below thats is a list of every legislator on that map. Filtering Legislators content changes the content below, the map and the list. Navigating this content is more exploration than it is scrolling.

Once you select a legislator, you are taken down in the design to specific facts about that legislator (Vote record, Donor List, Top Issues). The functionality of the design remains consistent between the higher and lower levels.

 
leg4.gif
legislatorcomparisons.png
 
 
 

Texas Bills

Texas Bills make the second and most dense category of content. Several thousand Bills will be filed during the legislative session. My top priority was to begin to separate out these bills and give the user a sense of what that separation looks like. A circle chart represents all the bills in the legislature and filtering those bills will change the circle chart in specific ways. This will give the user a better sense of impactful bills.

Bill comparisons can show you how legislators voted for that bill, what the financial impact of who sponsored the bill, and the witness list that showed up to support or argue against the bill.

 
billsgif.gif
billcomparisons.png
 
 
 
 

Donors

Donors make the third category of content. Much like the legislator category, donors are represented by a heat map. The donor heat map includes a map of the United States in addition to Texas. This visualizations is a high level way to understand where money comes from in Texas politics. Filtering this category also gives the user a sense of what types of donors contribute most to Texas politics.

The donor comparisons for an individual donor can tell you which legislators/districts they contribute to, which bills they have a financial interest in, and which issues they have a financial interest in.

 
donorgif2.gif
donorcomparisons.png
 
 
 

Policy Areas

Policy areas (issues) make the fourth category of content. Policy areas are represented by committees because they each committee tackles specific policy areas. I visualized committees with a standard ranked bar chart. The chart measures number of bills in a committee. This a a high level way to determine which issues are important in a current session. Filtering this visualization also further emphasizes how spread out policy areas are from the each other.

Policy area comparisons can tell you which legislators sponsor bills for a specific issue, which donor have the greatest financial stake in a specific issue, and a list of all the bills filed for a specific issue.

 
committeegif.gif
committeeinsights.png
 
 
 

Responsive Design

This design is responsive to four different breakdowns.

 
ipadboth.png
resp2.png
 
 
 

Color & Iconography

Instead of using a single primary color, I chose to give each category of content its own class of colors. I wanted to use color to theme the design and further accentuate the categories as they are compared against each other.

I edited material design icons to give them some personal branding and uniformity.

 
icons.png
 
 

 
 

Reflection

Although not shown here, I did a lot of designing to get to this point. This project turned into a real personal challenge for myself to get “it” right and has served to help flesh out some of the weaker aspects of my skillset. For example, I learned how to implement a design language much better than I could before.

I truly believe in the utility a resource like this can offer. I can’t see myself not seeing this through. Influence Texas is an on-going project.

Explore the prototype!

 
 
 
 

This prototype is slightly older version of the design.