Trans Formations Widget
How can we help people learn about anti-trans legislation and support trans youth?
Overview
As a volunteer for the Trans Formations project, I redesigned an existing legislative widget based on prior designs. I was unable to interview users based on the organization's current resources, so this project is solely a UI design. I researched other tracking widgets, prioritized potential needs, and met with developers in biweekly standups.
Impact
Streamlined design into the development process
Provided a more accessible filtering system that is easier to understand
Implementing branding and accessibility into the widget
Gave way for other design-oriented initiatives within the organization
Introduction
What is the Trans Formations Project?
The Trans Formations Project is a non-profit organization that tracks and spreads awareness of legislation related to trans youth. The State-Level Anti-Trans Legislation widget is one of the web-apps that the organization has on its website. At the beginning of the project, there was a working widget and a UI design the team did previously.
Problem
Learning Legislation as a Newbie
The State-Level Anti-Trans Legislation widget focuses on users being able to search for legislation bills and searching for representatives. However, with the current structure, the information and interface may be confusing to people who don’t understand legislation.
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
I was the sole designer for this project and designed a mobile, tablet, and desktop version of the widget. During this time, the team met biweekly to discuss our findings and progress. Because we were unable to interview users in the timeline on a volunteer basis, the following process relies on competitive analysis and team input.
Defining the Redesign
Because the widget already exists, I needed to understand the purpose and function it serves. By meeting with the team, I can understand the context of the widget and redesign. As an organization that operates on a volunteer basis, we need to carefully allocate our time and resources to avoid misusing time that could be used elsewhere.
How Are We Approaching the Project?
The main concerns with the redesign were the technical constraints and limited access to users. Because I was unable to interview users on their experience with the widget, I needed to base my research on the previous designs, competitor research, and my own assumptions. This meant I needed to balance the users’ needs with technical feasibility.
Annotating Previous Designs
It’s important to understand where the design is currently and where there are areas for improvement. To do so, I analyzed the current widget and the previous design made by a developer on the team. It’s critical to note which elements are essential to searching and understanding each legislative bill and keeping what works.
Things to Note in Previous Designs
When I analyzed the current widget and previous design, I found that:
- The widget uses programming language to filter bills
- The widget shows more content at once than the design
- The design aligns with the branding but lacks color contrast
- The design provided ways to contact representatives
This emphasized the balance needed between the information density of the widget but the visuals and flexibility of the design.
Comparing to Other Trackers
I reviewed other tracking widgets, noting recurring patterns and elements to avoid. The goal was to ensure that the tracker would be consistent with users' expectations on other websites and make it easier for users to find and understand information. This assures that the widget uses components that the user is familiar with.
What Can We Learn From Other Trackers?
After reviewing these tools, I found that many of the tracking widgets I analyzed:
- Had an interactive map to select states
- Showed representatives associated with a state
- Explained legislative terms in simpler language
The trackers focused on using simpler language to explain the widget’s functions and visual search methods. This helps users focus on the content in familiar layouts and language instead of understanding its structure.
Defining the Proto-Persona
To help prioritize major features and necessary features, I created a proto-persona, a representation of the user based on our assumptions because I couldn’t interview users. However, as a cis woman, I made sure to note the limitations of my assumptions of the persona.
Meet Alex Miller
The persona, Alex Miller, is a college student who is interested in learning about trans legislation. As someone who supports the trans community, they want to understand how these bills affect trans youth and who to contact to influence these bills.
For details on Alex, refer to the persona sheet.
What Did I Learn About Alex?
While the widget is geared toward a general audience, a key trait to note is that Alex’s main obstacle to learning about trans legislation is their limited understanding of the terms and ideas related to legislation. With this in mind, I need to gear the structure and content toward showing information in a simple way for Alex to learn and help the cause.
Pre-Design Insights
Considerations Based on Findings
To help Alex support trans youth and minimize their confusion when searching and reading the bill details, I need to consider:
If users prioritized learning about the bills or acting and contacting the associated representatives
How much information a user would understand about legislation on a foundational level
The different ways a user would want to search and find information on an unfamiliar topic
Addressing Priorities
After establishing the user, I developed a product backlog of what needed to be completed. A product backlog is a prioritized list of tasks that need to be done based on organization and user needs. Developing a prioritized list can establish the features that carry the most weight and minimize the possibility of eliminating them.
Moving Forward
I found that the features I needed to prioritize for the redesign were:
- The bill information and representatives
- Diversity in search options
- Responsiveness and accessibility
Because the bill information and representatives are crucial to learning about trans legislation, I need to consider how to optimize the search and UI to easily access the information and navigate to the representatives' contact information.
Structuring Potential Layouts
To outline the layout, I developed several low-fidelity designs, or wireframes. The goal is to consider the users’ needs, overall accessibility, and technical constraints. Designing wireframes before creating prototypes saves time by allowing larger changes earlier in the process. Below are the two main flows in the process.
Search for Bills
Users can use the search bar, dropdown, or interactive map to search and track bills.
Learn and Contact
Users can learn about the details and progress of bills and contact associated representatives.
Designing and Refining
I began producing high-fidelity prototypes with the team’s feedback. The goal is to provide a visual that functionally mimics the software for the developers and other leads. It helps developers grasp the widget's interface and flow and allows organization leads to see the benefits of design and approve future design projects.
Revisions with the Team
After the first draft, I met with the developers in biweekly standups to address any questions and concerns they had. These concerns included the capabilities of the search methods, the removal of some features, and animations. We annotated the designs in Figma and revised them until the team was satisfied with the design.
Major Changes in Redesign
While I kept the overall layout of the widget, I changed the following features and elements to improve the experience of searching for bills, viewing information, and contacting representatives.
Grouping of Similar Elements
Grouping similar elements help users find the search options and related information quicker. The interactive map and search bar are now placed together, and a user can choose between either option to find bills.
Providing Flexibility with Bills Shown
Allowing flexibility in the bill list size and display allows users to view more bills at once without being overwhelmed.
Implemented Bill Tracking
Implementing bill tracking with searching helps users keep track of the bills they’re interested in. I fleshed out the function and showed the process of adding a tracked bill and displaying it in the dropdown or tab.
Improved the Accessibility
The original colors lack contrast, so I changed the text color and labels to increase the legibility. I also added more than one search option to allow users to pick a search method based on their device or physical limitations on tablet and desktop.
Designed for Responsiveness
While the current widget is responsive, the previous design only had a desktop version. I made three different versions of the widget to show how it would handle on different devices.
Final Prototype
For more details on the research completed and the findings, refer to the Figma prototype.
Challenges
While working on this project, we encountered several key challenges that impacted the design process.
- Volunteer-Based TeamBecause the organization relies on volunteer work, there can be a lack of consistency in work schedules. It can be challenging to coordinate and ensure progress is being made. To combat this, we scheduled biweekly meetings or ensured regular updates were communicated through Trello and Discord.
- Technical ConstraintsThe widget team was constrained by limited technical resources and time. It was crucial that the new design utilized the same variables and while easy to develop. Communicating with developers ensured that the design aligned with the project's constraints.
- Limitations as a Straight, Cisgender WomanBecause I am not trans, it’s important to note that there are experiences and struggles that I can’t reflect in my persona. However, because of the limited access to users, I based Alex’s wants and needs based on my assumptions of what a person may want to learn about trans legislation.
Takeaways
The design of the legislative widget posed a unique set of challenges. The lack of access to user research and inconsistent schedules meant we had to rely on alternative methods and work with time and technical constraints. However, we were able to deliver a functional and informative tool to inform people about current anti-trans legislation. I’m grateful to have the opportunity to volunteer for the organization and look forward to participating in future projects.
