Trevor Project 2022 National Survey on LGBTQ Youth Mental Health / Beyond numbers: the community behind the data
Content strategy, Data visualization, Website design, Website development
Designed to Save a Life
When you’re confronted by the story of a community’s simultaneous pain and joy, what role should design play in sharing that story? This challenge beats at the heart of our first partnership with The Trevor Project, the world’s largest suicide prevention and mental health organization for LGBTQ youth, to design the microsite for their 2022 National Survey.
Representing the experiences of over 40,000 LGBTQ youth ages 13-24 across the United States, the survey provides critical insights around LGBTQ youth mental health disparities, discrimination, housing instability, barriers to affirming health care, subjection to conversion therapy, and suicidality. It also highlights how affirming spaces and social support networks positively impact the health outcomes of LGBTQ youth.
A Platform That Honors the Stories
Each data point in the survey represents a real person, so it was essential to create a platform that honors the human stories behind the data. Quotes incorporated from the Trevor team provide deeper insights and context around the data.
With a focus on the intersectionality of LGBTQ youth experiences, we utilized tabbing features for users to explore how the data compares across different age groups, sexual orientations, race/ethnicities, and gender identities.
All charts had movement to create visual interest in the report. However, we leveraged Butterfly charts to design graphs that go beyond simple loading or mouseover visual effects to make a truly interactive experience.
Our design breaks down into several core sections and subsections which needed an easily-understood navigation and clear jump links allowing users to quickly find the data most helpful to them. We added a clear call-to-action that gives those who need it easy next steps to contact Trevor and get help.
An Interactive, Efficient, and Repeatable Design System
The survey is an annual release of new insights into the unique challenges that LGBTQ youth face every day. So the Trevor Project team needed the design not just to be compelling, but something they could reuse every year.
Since the data won’t change after publication, we opted for a static site instead of a traditional CMS to focus on the user experience. Authors make updates by editing plain text files directly instead of using a CMS to update the database.
All of the graphs are built using reusable components with variables for labels, data points, and colors. Adding a new graph is as easy as copying and pasting an existing one and changing its values—no HTML edits required! This is also true for other components on the site like the shareable statistic cards.
Sparking a National Conversation
The Trevor Project aimed to spark a national conversation around the mental health of LGBTQ youth and inspire change to reverse worrying trends in suicidality, anxiety, and depression. The more a user is empowered to share this data with their networks, the further the reach and the larger the conversation. For this reason, each key-finding card has multiple share options readily available and every chart is downloadable. We translated the research into a compelling and engaging site that empowers users to share the data to help save young LGBTQ lives.
In the first 60 days of its release, the 2022 report:
- was cited by more than 20 media outlets, including TIME, The Hill, and Vice
- generated 5,000+ chart downloads
- attracted 10,000 more organic visits than the 2021 study with +123% engagement
- averaged 8 minutes spent on site per user
See Our Work in Action
View Site
