Overview
The Trevor Project is a suicide prevention and crisis intervention organization for LGBTQ+ young people.
As the organization continues to expand its operations, it seeks to redesign the interface of the internal Dashboard. This ensures supervisors and monitors can assess risk levels clearly and provide timely assistance effectively.
(To comply with confidentiality agreements, all confidential data and personally identifiable information within this case study have been replaced with realistic dummy data.)
Duration
June 2026 - September 2026
Team
Victor Fang
Jessica Donoho
Zayd Alghazali
Tools
Figma
FigJam
Claude Design
Process
1. Research
User interviews
Heuristic Evaluation
Persona
2. Design
Low-Fidelity Wireframes
Design System
High-Fidelity Prototype
3. Refine
Usability Testing
Design Iterations
4. Final
Impact
Feedback
1. Research
User Interviews
My team and I conducted user interviews to learn about our users' workflows, behaviors, and pain points. Mapping our data with an affinity wall revealed three primary workflow pain points.
Unnecessary Dashboard Data
There were columns on the dashboard that users found unnecessary, overly long, or incorrectly formatted.
Opportunity:
Allow users to customize the dashboard by rearranging the columns and choosing what columns to display.
Missing Lifeline Features
Lifeline users rarely used the dashboard because it lacked helpful features for them, such as the ability to monitor a live conversation.
Opportunity:
Support Lifeline users on the dashboard by implementing features for monitoring live phone calls from the dashboard.
Night Shift Visual Fatigue
Since many users work night shifts, the bright background can cause eye strain during long overnight monitoring shifts.
Opportunity:
Implement a dark mode for the dashboard to increase accessibility.
Heuristic Evaluation
To further discover ways to enhance the user experience of the dashboard, we performed a heuristic evaluation to find more usability issues within the original design. Based on our findings, we identified two critical usability issues.
Flexibility and Efficiency of Use
The dashboard only allowed users to monitor three conversations at a time, but they often needed to monitor more than five conversations.
Opportunity:
Redesign the "Monitoring Conversations" dock to help users monitor more conversations at a time.
Consistency and Standards
Several areas of the dashboard had low color contrast, making it hard for users to read the text clearly.
Opportunity:
Increase the color contrast and font weight to align with Web Content Accessibility Guidelines (WCAG), ensuring a minimum contrast ratio of 4.5:1.
Persona
By analyzing common patterns across our research, we developed a primary persona to represent the daily workflows and friction points of our users. This archetype keeps real-world needs at the center of every feature decision.
Ian
34 years old
Irvine, CA
Frustrations
Struggling to focus on high-priority data due to unnecessary columns.
Being forced to switch between platforms to monitor live phone calls.
Experiencing eye strain from long overnight monitoring shifts.
Goal
To streamline daily monitoring workflows with a customizable dashboard that accommodates low-light night-shift environments.
2. Design
Low-Fidelity Wireframes
To map out the layout structure, we initiated the design process with low-fidelity wireframes driven by three structural goals:
Protect Mental Models: Preserved the original core dashboard framework to ensure a seamless transition and eliminate user retraining friction.
Lower Cognitive Load: Systematically eliminated visual clutter, redundant iconography, and unnecessary formatting elements to optimize focus.
Space for New Features: Used the newly cleared space to smoothly add new features without breaking the main layout.
Design System
To scale The Trevor Project's dashboard efficiently, we established a foundational design system using the organization’s official color palette to ensure absolute visual and behavioral consistency. By standardizing color tokens, typographic hierarchies, and reusable interactive components, it reduces user cognitive load while accelerating front-end deployment.
(Curated snapshot. Comprehensive design system includes complete styles and component variants.)
High-Fidelity Prototype
We combined the wireframes and design system into a fully interactive high-fidelity prototype using Claude Design. This design transition focused on two strategic pillars:
Color Strategy: Implemented a clean foundation using a tinted neutral palette. This keeps the data-dense interface visually cohesive while ensuring strong color contrast.
Workflow Efficiency: Built an inline chat drawer, added clear drag-and-drop affordances to the column customizer, and used distinct button weights (Cancel vs. Save) to prevent accidental misclicks.
3. Refine
Usability Testing
We conducted moderated usability testing to validate the functionality of our redesign. Below are two of the critical issues we uncovered:
Limited Search Functionality: Participants could only search within chat logs by clicking the pre-defined tags (IP-SH, RS, Suicide, Abuse). This restricted free-text or flexible searching.
Missing Timestamps on Notes: The notes section lacks creation dates or times, making it difficult for supervisors or counselors to track case history and progression.
Design Iterations
To resolve the core friction points identified by users, we implemented two major iterations:
Flexible Message Search: The search tags were replaced by a search bar that allows users to manually enter keywords, giving users more flexibility to search for a message.
Information Affordance: The "Notes" section was redesigned to provide more information about each note, helping users follow up on cases more efficiently.
4. Final
Impact
During the final round of usability testing and heuristic evaluation, we measured three key metrics to validate the successful redesign of The Trevor Project's dashboard.
Heuristic Principles
8 usability issues identified during heuristic evaluations were eliminated by the dashboard redesign.
Workflow Enhancement
All participants confirmed that more than 86% of the new designs and features improved their daily workflows.
Feature Learnability
The new features achieved an average 95% ease-of-learning rating from participants.
Feedback
To further validate our design decisions, we collected direct insights from team leadership on the updated dashboard experience.
"I found the ability to monitor multiple chats to be most valuable, and being able to slide to side-by-side ongoing interactions is helpful as opposed to having to toggle. While I did not find any parts of the redesigned dashboard to be unnecessary, some of the variables may not be as useful as others, but this is a great aspect of the ways it was designed to be customizable based on the focus."
- Lisa Stewart, Team Lead
"The most valuable features are the visual layout, which increases readability and accessibility for dashboard users. Additionally, the ability to monitor Lifeline conversations would increase safety for both counselors and contacts."
- Anonymous, Team Lead
