TransForm
Increasing access to affirming, accurate sex education resources for trans and queer youth
UX Design
Website
My Role
UX Designer
Visual Designer
Team
Calvin Liang
Project Lead
Andy Moon
UX Designer
Mina Zavary
UX Designer
Anne Fernandez
UX/UI Designer
Timeline
Jan - Mar 2023
(10 weeks)
Tools
Figma
Adobe Illustrator
Zoom
Overview
Often the sexual health education trans and non-binary youth get from their schools, and sometimes healthcare providers, can be non-inclusive and irrelevant--it is often taught from a heteronormative and cisgender perspective. While online resources exist that can help to fill these knowledge gaps, there are many resources that spread misinformation and are unmoderated (Liang et al). Additionally, there is legislation that further removes trans and non-binary people’s healthcare access. Over the course of 10 weeks, we led co-design sessions with QTAB (Queer and Trans Advisory Board), a community advisory board with 20 trans people from 16-25 years old aiming to create an affirming, inclusive, and accurate sex education tool that actively includes and centers trans people’s perspectives and participation. This project was a part of a Human-Centered Design and Engineering Department Directed Research Group: Co-Designing a Sex Education Tool for and with Trans and Queer Youth.
Design Question
How might we create a sex education tool that helps increase access to effective, affirming, and accurate sex education resources that can support trans and queer youth to have healthy sexual and romantic relationships?
Developing Domain Knowledge and Utilizing Prior Research
Before our direct-research group had started, the lead of the project, Calvin Liang, had conducted prior research into designing an online sex education tool for gender-diverse youth and published the findings in the following paper. This research provided insight into gender-diverse teens’ preferences for intaking specific kinds of sexual health information, and considerations for designing an online sex education tool.
Below are some examples of research insights I took away from this research study.
1
Source of Resources: Credibility and Lived Experience.
Participants desire for sex education tools to be "professional" by incluidng "credible" and "trustworthy" sources, such as medical journals.
​
Participants also expressed the importance of sex education resources centering on the live experiences of gender-diverse people and their perspectives. They desired for content to be largely written by members of their community.
Our project lead, Calvin has also conducted prior co-design sessions with a group of trans and queer adults in the Seattle area, that helped to identify topics of interest. To the right is a sample brainstorming activity of topics of interest, in which members reflected retrospectively what they wished they had learned in relation to sex education when they were younger.
We also went through and analyzed the one co-design session that had already been conducted before the rest of the UX Designers and I had joined the team for this project. In this asynchronous activity, five QTAB members reviewed and critiqued several trans mental and sexual health apps and websites (e.g., IMI and Voda), describing what was important to them in a sex education tool, and the features they liked vs disliked within each tool and why, including the content and visual design.
We affinity diagrammed participants responses to identify the following findings.
Research Findings
Below are some examples of research findings identified from our the asynchronous co-design activity exploring and critiquing existing mental and sexual health resources (website and apps).
Trust, Privacy, and Safety
1
Participants desire for the design of a sex education tool to protect their privacy by not disclosing they are trans and by safeguarding against hacking.
To not disclose their trans-identity, participants talked about not using easily identifying trans-related titles or colors. Another way of preventing disclosure that participants noted liking from other platforms is a safety exit that allows users to quickly leave the tool, if, for example, they are in an unsafe environment.
Users also discussed specific ways of preventing hacking, such as through password protection.
Planning Project Timeline
Because we had a short timeline and only 2 sychronous co-design sessions that QTAB members could attend, we carefully mapped out a timeline for what we would accomplish during each co-design session and in between, as well as what the end-goal of this project would be in respect to KPIs and more.
First Synchronous Co-Design Session
With our first co-design session with QTAB members, the goal was to verify our previous findings with a larger number of QTAB members, focusing on what was important in a sex education tool and how users would want to use the tool.
The first activity we chose to accomplish this goal was walking through the findings above that we had developed, and having a brainstorming activity in which QTAB members emphasizes with stickers, added new notes, or expanded upon prior notes.
The second activity was a brainstorming and ideation activity in which QTAB members in groups of 2-3 brainstormed content and features they felt are key to a sex education tool, as well as the ways in which they would want to use the tool (e.g., the first thing they would do if they had the tool at their disposal). Each team shared with the larger group what they brainstormed, and the bigger group discussion revealed the overlap in participants' thoughts.
The last activity was an app critique session in which participants selected an app on their phone, and reflected on their favorite and least favorite visual design aspects of the app. The goal of this activity was to understand very generally our target audience's preferences for visual design styles and attributes, as well as to get QTAB members thinking about visual design in future co-design sessions.
Task Flows and Scenarios
Based on prior research insights, as well as insights from co-design session, we then developed several task flows and seven scenarios to be included in the sex education tool. Each designer narrowed their focus down to 1-2 scenarios to establish more depth in our ideation. We all selected varying combinations of the seven scenarios to further expand the breath of our ideation.
​
I proceeded to move forward with the second and third scenarios: ​
-
​Users wants to explore the resources within the site
-
User wants to find a queer/trans friendly medical provider (Primary doctor or consultation to help get started on hormones).
Other scenarios included: when the user is under 18 years old and not being able to find a medical provider in their area and seeking virtual alternatives.
Ideation
After selecting 1-2 scenarios to focus on, we went through our first round of ideation for the design of a sex education tool based on those scenarios. Working on the resource exploration and finding a trans and queer friendly medical provider scenarios, I ideated the pages involving a resource library and medical provider database, and the pages for resources themselves. My decisions were deeply tied to our user research findings, such as our resource organization and content findings above.
We then did a second round iterating on our prototypes after doing a design critiqe session with all the UX Designers. During the critique session, we decided to further narrow down the functionality we would explore in this iteration. My explorations dived deeper into the second scenario: a user wants to explore what resources the site has.
Below are some examples of my ideations for that scenario.
In two additional rounds of ideation, I explored designs that support different routes for understanding the sex education resources, including guides and filtering by topics. These two different routes had varying levels of how much guidance is built into the user flows through which users can explore and look for resources.
Guides
Curated Collections of Resources as an Exploration Starting Point
In one of my explorations, I introduced the concept of guides. Guides are curated collections of sex-education resources that are connected together based on a similar topic. Users are presented with a series of guides that they can use as a starting point for exploring sex education topics within the sex education tool. The goal of guides is to provide a more structured route for users exploring resources, based on the user research finding that QTAB members wanted step-by-step guides and guided navigation within a sex-education tool.
Second Synchronous Co-Design Session
In the second round of co-design sessions (three in total), each designer presented the designs we had ideated and narrowed down. I presented three different versions of the resource library, with different methods of guiding users to explore resources, including different filtering mechanisms and the use of resource guides.
We explained our design decisions based on prior research, the research insights from the asynchronous critique activity of trans mental and sexual health apps/websites, and more. For instance, I explained how my designs focused on incorporating the resource organization and content insights from first asynchronous activity in which they participated that we discussed in the first co-design session. We then led a critique session with the QTAB members on these designs and asked for feedback. Below are the series of research questions I sought to uncover during this session:
Research Questions
Filtering
-
Of the three designs, which way of filtering do users like the most? Why?
-
What aspects of the other two designs do users like, if any? Are there features within those designs they would also wish to see combined?
-
Are there other ways of filtering that aren’t represented that users would like included?
-
How much filtering capability do users desire? Given the examples, would users like to see more, less, or about the same amount of filtering options illustrated in the three examples?
Resource Types
-
What are users' thoughts on the concept of guides (pages that bundle resources together as starting points for exploring resources)?
-
What types of topics would users want to be covered in guides if guides were included within the resource library?
-
What information about each resource would users want provided for context before diving into the resource itself? Currently, the designs include a summary and a description about the resource (e.g., describing who created the resource and the source credibility).
Co-Design Session Insights
From the design critique session of the three resource library designs during our second co-design session, the following insights were generated.
1
Perceptions and Preferences for the 3 Filter Designs
After showing participants the three variations of potential designs for what the resource library and filtering system could look like, the majority of participating QTAB members preferred the third option the most. Reasons participants described included that they liked the simplicity of how filtering works in the third option, which they felt was important for younger audiences:
​
They preferred the topics being laid out in a swipeable list, rather than a drop-down; they also felt that the dropdown of the first design was more academic and too complicated. Additionally, some QTAB members also said that they preferred the topics being listed in the third design over them being housed under a drop-down because they wanted the topics to be more visible. Other common reasons why participants preferred the third design included that the third option design would be easier to use on mobile than others–they commented that it felt like it had been designed for mobile, whereas the others weren’t as ideal. Several participants also said that they preferred the third option because it felt like it was catered to a young audience:
Asynchronous Co-Design Activities
Because we had a set number (two) of synchronous co-design sessions we could lead during this project, we created a series of asynchronous co-design activities to explore unanswered research questions we had.
​
One asynchronous activity I designed was a brainstorming activity to (1) understand what filter categories might be useful for users to find resources of interest, from users' perspectives and (2) what trigger content types users would want to be able to screen out from search results to ensure that they can safely search resources without encountering content they personally find triggering.
Another team member created an activity of making moodboards to determine a visual design language that would appeal to users. Previously, users had mentioned design visual design elements such as:
-
a warm, "calm" color scheme
-
no overstimulation of animation or overcrowding of visuals
-
a more "comfortable" design over a professional one
​
We wanted to dive more deeply into users' visual design preferences.
Final Product
Below is the final prototype that I made after iterating on the designs based on the feedback and insights we received from the second synchronous co-design session.
Design Decisions
Below, I've broken down a series of screens to explain my design decisions.
Reflection
Overall, I really enjoyed working on this project very closely with an organization of queer and trans teens and young adults and a team of designers very passionate about access to inclusive sex education. I learned a lot from this project, especially with its use of co-design methodologies to ensure that the sex education tool designed centered on the LGBTQ+ community. With more time, I would have proposed:
-
Increasing the number of synchronous and asynchronous co-design sessions before narrowing the scope of our project. For instance, these co-design sessions could have more closely involved QTAB members in the sketching/ideation phase of the design process to further include their perspectives, whereas their participation was concentrated in the early brainstorming
-
Iterating on our designs based on the asynchronous activities we created and planned, but did not receive results in time to analyze and implement
-
Conducting usability testing with the high-fi prototype created to test specific tasks involving ​users exploring and looking for resources (to test different functionality within the filtering system and more)
​
Other Work
© 2020 by Emma Sadjo.