Skip to Content
Enter

Trans Formations Project Web App

How can we help people learn about anti-trans legislation and support trans youth?

Role

Design

Time

02/09/23 - 04/06/23

Tools

Figma, Trello

Deliverable

Figma Prototype

Overview

The Rise of Anti-Trans Legislation

In just 2023, over 500 legislative bills that negatively impact trans youth had been composed. These bills not only impact how they identify themselves but also their access to healthcare, sports, and restrooms. With the number on the rise, more and more trans people are losing rights to basic necessities.

I volunteered for the Trans Formations Project (TFP), a non-profit organization that spreads awareness of legislation related to trans youth, to redesign an existing web application to not only track anti-trans bills but also inform allies on representatives to contact.

Several mockups of the laptop, tablet, and phone versions of the web app

Problem

Learning Legislation as a Newbie

The state-level web application focuses on users being able to search for legislation bills and searching for representatives. However, with the current structure, the complex information and interface may confuse people who don’t understand legislation, deterring people from learning more.

To tackle this problem, I asked myself:

How do we make legislation approachable for users who want to learn about trans legislation?

Defining the Project

Iterating on Past Designs

To revise the current design, I focused on four major steps: defining the redesign, going over the past designs, prepping for the design, and designing the responsive prototypes. Because of the organization’s limited resources and volunteer time, I wasn’t able to interview users and relied on competitive analysis and the team’s input in standups.

Four circles representing the stages in the process from left to right: define, annotate, design prep, and design

Process used in to design the web app

Preparing for the Redesign

Because the app already exists, I needed to understand its current functions. With the stated limitations of the project, I focused on understanding the context of trans legislation with input from the team, competitor research, and my assumptions. This would later inform the technical and informational needs of the design.

Annotating Previous Designs

Room to Grow: Search Options and Simplicity

Before heading into the design, I evaluated what our current app, previous redesign, and other competitors do or don’t do well. This was to understand what features need improvement to help users search for and understand the bill content.

A screen capture of the current web app with notes on the sides. The notes state that the web app shows a lot of information at once, but some of it isn't explained or useful.

Annotations of the current web app on TFP's website

After reviewing both the current app and past designs, I found that they both have their own strengths and weaknesses. The competitors were a good mix of both, showing potential for our design.

Notable Findings

1. Tech Jargon and Information-Dense

The app’s search uses programing language for filtering and shows lots of information at once.

2. Simple Visuals, More Function

The design, though visually simpler, lacked color contrast, but could contact representatives.

3. Options for Search

Other tracking web apps functioned like the design but gave more options for searching bills.

Pre-Design Insights

Slowing Down and Finding Priorities

Before I jumped into the design (the fun part!), I developed a product backlog of necessary elements to minimize the possibility of backtracking later on.  I needed to ask myself the following to ensure the design matched users’ expectations and prioritize certain features.

A graphic of the product backlog. The backlog shows that the organization will gain supporters and a niche in the market if we create a tool that helps users find bills easily and understand the content.

Product backlog of important features and their impact

Insights to Consider

1. Information vs Action

Would users prioritize learning about the bills or contacting the associated representatives?

2. Depth of Detail

How can we make the information approachable for people unfamiliar with legislation?

3. Flexibility of Search

What are the different ways a user would want to search and find information on this topic?

4. Basis of Understanding

How can I ensure the search options and other functions are responsive and accessible?

Planning Potential Layouts

From Searching to Contacting

To outline the web app, I created wireframes using elements from the previous design to balance the complex information with an approachable interface. This helped the team visualize the design and give their input on the layout before I designed the formal UI and interactions.

Mobile wireframes made from assets from the old design. Beside the wireframes are sticky notes from the team standups.

Mobile wireframes with notes from standup

After creating the designs, I settled on two main flows: searching for bills and digesting information about the bill and associated representatives.

A simple wireframe of the flow for searching for bills

Search and Find for Bills

Users can use the search bar, dropdown, or interactive map to search and track bills.

A simple wireframe of the flow for learning about bills and contacting representatives

Learn and Act to Support

Users can learn about the details and progress of bills and contact representatives.

Bringing the Design to Life

Implementing Branding and Interactions

I began producing high-fidelity prototypes to provide a visual that functionally mimics the software, uses TFP's branding and styles, and exhibits the benefits of design to the developers and other organization leads.

The color palette used in the web app and examples of Figma components made

Color palette and components used in the prototype

Revising the Prototype

Gaining Technical Insight

After the first draft, I met with the developers and PMs to address their questions and concerns. Their concerns included the capability of the search bar and and showing specific interactions. We annotated the designs in Figma during our standups and revised them based on their comments.

A prototype screen with Figma comments on the sides. The comments state that an interaction should be added, and there would be little issues with scrolling on a dropdown on mobile.

Comments on a screen of the mobile prototype

Major Changes in Redesign

After analyzing other tracking tools, prioritizing important features, and designing the interface, I made the following changes to improve the experience of learning about bills and contacting representatives!

A single tablet mockup of the web app

Tablet mockup with search options outlined

Grouped Similar Elements

Grouping similar elements help users find the search options and related information quicker, giving users the option of the interactive map or search bar.

Two phone mockups of the web app side by side

Mobile mockups with bill dropdown outlined

Prioritized Flexibility in Bills Shown

Allowing flexibility in the bill list size and display allows users to view more bills at once without being overwhelmed.

Two phone mockups of the web app side by side

Mobile mockups of previous and current tracked bills

Improved the Accessibility of the Interface

I increased the color contrast of the elements to improve legibility and added more search methods to allow users to pick a method based on their device or physical limitations.

A tablet and phone mockup of the web app side by side

Mobile and tablet mockups of web app

Designed for Responsiveness

While the current app is responsive, the previous design only had a desktop version. I made three different prototypes to show how the app would handle on different devices.

Final Prototype

To see the web app design in action, refer to the Figma prototype .

Mockups for different devices are lined up next to one another

Mockups of the laptop, tablet, and phone versions of the web app

Challenges

While this project has been a great experience for designing hand-in-hand with developers, the project came with some challenges.

Obstacles in the Process

1. Volunteer-Based Team

Since everyone’s capacity varied, our progress was sometimes unpredictable. This affected our progress, so we communicated any issues and priority shifts in biweekly standups.

2. Technical Constraints

To ensure the design wasn’t complex for the developers, I used the same variables and a simple structure. It was crucial to have their input in the process to ensure its feasibility.

3. Limitations as a Straight, Cisgender Woman

As a cis woman, there are experiences that trans people face that I cannot relate to. However, because of limited user access, I based the design on my assumptions of users’ needs and goals.

Takeaways

While the redesign posed unique challenges, it was incredibly fulfilling to improve how people can support trans lives as the number of anti-trans bills grows. I’m grateful to have the opportunity to work with Trans Formations Project and look forward to continuing to contribute to their cause!

Let’s Connect!
LinkedIn logo in black
Made with ❤ © 2024 Antonella Mai