Trans CARE: Coping & Stress Management Application
Trans CARE is a support website designed to give transgender and nonbinary adults and youth practical tools for navigating gender dysphoria and the everyday challenges that can come with it. The platform brings together accessible resources, and exercises to help users better understand and manage their experiences.
Role & Expertise
Problem Statement
Online interventions frequently suffer from high drop-off rates (often up to 70%), particularly when addressing sensitive areas like gender dysphoria and minority stress. The core challenge was to design an engaging, empathetic, and HIPAA-compliant platform that maintains consistent participation, generates tailored coping plans, and collects actionable research metrics without compromising security.
How might we structure flexible, modular support tools that encourage long-term engagement without feeling overwhelming, clinical, or difficult to use?
How might we make sensitive topics feel approachable without making the experience feel overly clinical?
How might we give users practical tools they can turn to when they’re struggling with dysphoria?
Project Goals
- • Improve Engagement: Counteract high dropout rates with interactive, structured progression.
- • Personalized Experience: Deliver tailored coping plans based on user input.
- • Data Collection: Gather detailed engagement analytics for ongoing clinical research.
- • HIPAA Compliance: Guarantee full confidentiality and secure data hosting.
- • Cross-Device Support: Maintain seamless usability across desktop, tablet, and mobile.
Target Audience & Personas
Transgender and nonbinary adults and youth seeking accessible, practical support for navigating gender dysphoria in everyday life.
"I need a safe, private space to work through difficult feelings without having to navigate clinical language."
Organizations looking to provide accessible, practical resources that support the well-being of their communities.
"We want to give people tools they can use on their own terms, whenever they need them."
Friends and family looking for approachable resources to better understand and support the transgender and nonbinary people in their lives.
"I want to understand what they’re going through and know how to be there when they need me."
Discovery & Research Strategy
Because Trans CARE was designed for a sensitive and personal experience, discovery focused on understanding user needs, working closely with the research team, and looking at how existing resources approached support and privacy.
Research Team Collaboration
Worked closely with the lead researcher to understand common experiences around dysphoria, stress triggers, privacy needs, and the information the team hoped to learn from users. This helped shape an experience that felt supportive and approachable without adding unnecessary complexity.
Comparative Analysis
Reviewed existing trans health resources, mental health platforms, and digital support tools. Many leaned heavily toward either clinical experiences or loosely organized resources. Trans CARE aimed to find a middle ground providing credible, structured support while still feeling personal, welcoming, and easy to use.
Process Logic & User Flow
Before building the site, we mapped the user journey around a required module progression. Users needed to complete each module before moving to the next, so the challenge was making that structure feel clear and purposeful rather than restrictive or overwhelming.
Key Architectural Decisions
- • Clear Roadblock Guidance: Replaced generic "locked" errors with dedicated Roadblock screens that explain why a module is locked and give an estimated time for return.
- • Chunked Coping Prompts: Broke down therapeutic videos and custom responses into bite-sized micro-steps to manage cognitive fatigue.
- • Seamless Save & Resume: Ensured multi-session completion across devices without losing participant progress or compromising HIPAA data standards.
Key Features
1. Personalized Profiles & Authentication
Unique logins with secure access to demographic data, study progress, and tailored content.
2. Modular Progression Locking
Step-by-step module unlocking encourages steady participation and flexible multi-session completion.
3. Interactive Coping Plan Generator
Embedded training videos combined with strategy-matching prompts build a customized coping toolkit.
4. Researcher Analytics Dashboard
Comprehensive tracking of module duration, visit frequency, and drop-off points grouped by demographic data.
5. Mobile-First Responsive Design
Fully adaptable interface providing an intuitive experience across mobile devices, tablets, and desktops.
6. HIPAA-Compliant Architecture
Hosted on secure infrastructure to enforce data encryption and regulatory compliance.
Results & Impact
Participants utilizing the Trans CARE web app reported measurable improvements in psychological well-being alongside increased engagement metrics:
Reduced
Anxiety Levels
Lower
Gender Dysphoria
Higher
Completion Rates
100%
HIPAA Compliant
The platform provided personalized support tools, helping encourage continued participation while giving the research team valuable insights for future work.
Design Evolution
Home Page: Safe & Welcoming Entry
• Creating a Welcoming First Impression: While the support modules were built within LearnDash, the home page was custom-designed to feel warm, approachable, and representative of the transgender and nonbinary community. The goal was to create a comfortable starting point where users could feel welcomed before exploring the resources and tools available to them.
Lesson Layout & LearnDash Customization
• Making LearnDash Feel More Approachable: LearnDash handled the lesson structure, but its default templates felt rigid and academic. I used custom CSS and card-based components to create a more approachable, interactive experience for exploring coping tools. Soft Rose Quartz and Spring Green accents helped create a calmer, more welcoming feel across sensitive content.
Progress & Module Locking
• Making Progress Easy to Understand: Because users needed to complete each module before moving forward, we made progress and locked content visible directly on each module card. Clear progress indicators and unlock requirements help users understand where they are and what they need to complete next.
Colors & Font
Visual Identity Rationale: For Trans CARE, the goal was to move away from the softer light blue and pink often associated with trans-focused design while still drawing from that familiar color family. I shifted the hues and increased the contrast to create a palette that felt more distinctive, confident, and welcoming. Indigo became the foundation, with Spring Green and Rose Quartz adding warmth and personality throughout the experience.
Color Palette
Typography: Be Vietnam Pro
Be Vietnam Pro was chosen for its clean, approachable character and strong readability. Its clear hierarchy helps users navigate resources and sensitive content comfortably across the site.
