The Trevor

Project

2021 Website & Resource Center 

Creative Direction ⌁ User experience + art direction + user interface

The Trevor Project's mission is to end suicide among LGBTQ+ youth. We were tasked with reimagining TheTrevorProject.org for a digitally native audience.

The Challenge

Reintroduce 10 year old TheTrevorProject.org to a digitally native audience, not only refreshing a decade-old brand and website but ensuring that the vital, life-saving functionalities of The Trevor Project were conveyed, accessible, and user-friendly.

A Guiding Hand in Crisis with Strategic IA

Our UX strategy created a clear, accessible, empathetic, and reassuring digital space. The information architecture (IA) was meticulously developed to guide users seamlessly through a broad spectrum of resources.

The dual-purpose website navigates two key pathways: The Resource Center, offering immediate help and a supportive community on TrevorSpace for LGBTQ youth, and the organizational side, driving donations and providing vital resources. Explore the wireframes below to see our strategic IA in action.

SITEMAP

A Toolkit for Future Initiatives

A toolkit was built to ensure adaptability and responsiveness to the ever-evolving needs of The Trevor Project. Through a custom-built CMS, we empowered the organization to build custom pages in response to unique initiatives, ensuring the platform remained perpetually relevant and user-centric.

Mobile Wireframes
Get Help Page

Ensuring immediate, clear, and confidential access to supportive resources for LGBTQ youth, with accessible communication channels through phone, text, and chat.

Donation Page

Engaging potential donors with a straightforward and compelling donation process, giving others the ability to raise funds for the organization.

Resource Center

Centralizing a decade of valuable resources in an easily navigable, user-friendly format.

Digital Identity with Emotional Impact

In close collaboration with my colleagues on the Kettle brand team, I took their foundational palette and creative direction, and built upon it, elevating and scaling their work into an extensive visual toolkit. 

Moodboard

Together, we seamlessly integrated their new brand elements into a dynamic digital identity that not only aligned with but also amplified their vital message across all online platforms. This ensured a consistent, engaging, and supportive online presence for every visitor, from LGBTQ+ youth seeking support to allies looking to contribute.

UI KIT

Authentic & Positive Design

Our design philosophy centered on authenticity and positivity, aiming to resonate with both LGBTQ+ youth and their allies. We wanted the platform to be more than just a place for support—it needed to reflect the vibrant, affirming spirit of the LGBTQ+ community. The design thoughtfully addressed the needs of young individuals seeking support and allies and donors looking to contribute, with each story conveyed empathetically and clearly.

Mobile + Desktop Designs
MOBILE

Final Thoughts

Working on a platform that serves as a digital lifeline was both an honor and a responsibility, underscoring every strategic and design decision made. Through this digital transformation, TheTrevorProject.org was not only modernized but strategically enhanced to align with and amplify its vital mission, offering an accessible, supportive, and uplifting digital space for LGBTQ+ youth and their allies.

CREATIVE TEAM

Client: The Trevor Project

Agency: Kettle

My Role: Creative Director + Art Direction

Team: Jessie Yuan + Aly Arrieta/UI, Meagan Cheung/UX, Marilyn Manno/Copy