The Trevor Project
Responsive Website Design
What is The Trevor Project?
The Trevor Project is an American nonprofit organization founded in 1998 that focuses on suicide prevention and crisis intervention efforts for LGBTQ+ youths. They have a lot of donations and volunteers to keep track so they needed a new internal dashboard to effectively manage and access this information on both desktop and mobile.
Tools: Figma, Whimsical, Maze, Miro
Role: UX Researcher and UX/UI Designer
Target Audience: Employees and internal users
Restrictions:
Project timeline was limited to 80 hours
I had to work within The Trevor Project’s existing style guide
Solutions:
Create a customizable, filterable dashboard for users to be able to choose what they want to see.
Design a searchable spreadsheet that allowed users to easily find volunteers, donors and view their profiles to contact them.
Utilize The Trevor Project’s current style guide to craft a website that matches their brand and messaging.
Research & Define
Research
I wanted to understand what my dashboard’s tabs would be
I used this time to also figure out what KPIs/charts I wanted to use
Research Goal:
Learn more about what makes up a dashboard
Understand what good design patterns for databases/dashboards are
Learn how to properly display databases/dashboards on mobile devices
Research Objectives:
Secondary Research
Competitive Analysis
Research Methodologies:
Variety of key factors to make a dashboard useable
Dashboards are tailored toward KPI’s an organization wants to track
Had to make some assumptions/go off general nonprofit KPIs
Dashboards need the ability to have a filtering/sorting system
Data visualization needs to have the right type of chart to ensure information does not get misconstrued
Research Findings:
Define - Information Architecture
Understand what makes an effective, easy-to-use, and easy-to-understand dashboard so I can make a design that allows users to quickly learn and understand the dashboard.
Site Map
Exporting data reports are a common function of databases/dashboards
Needed to get a sense of how that task would function with my site
Task Flow
Mid-Fidelity Design & Testing
Mid-Fidelity Design
Wireframing was non-traditional
I wanted to make sure content scale and data was correct since it is extremely important for a dashboard/database
I also planed on testing the wireframes
Wireframes
I wanted to get as much feedback as possible and as early as possible due to the nature of the site
Multiple participants noted that they couldn’t figure out how to contact a volunteer
There was also feedback about graphs needing changes
Wireframe Testing
Moved the highlighted statistics from the left side to above the database
Expanded the database horizontally to add a “Contact” button to make it more noticeable
Mid-Fidelity Changes
Original Donation Database Screen
Updated Donation Database Screen
High-Fidelity Design & Testing
High-Fidelity Design
Updated the design to have The Trevor Project’s colors represented properly.
From Mid-Fidelity to High-Fidelity
Participants stated that they felt overwhelmed due to the screen being too crowded
Participants also expressed that some navigation functions were lacking
High-Fidelity Testing
Added a background color under the page title
Adjusted the placement of graph title texts and abbreviated months
Changed graph navigation on mobile to an accordion
High-Fidelity Changes
Original High-Fidelity Main Dashboard
Updated High-Fidelity Main Dashboard
Updated High-Fidelity Mobile Main Dashboard
Original High-Fidelity Mobile Main Dashboard
In Conclusion…
Although I didn’t work directly for The Trevor Project this was a great experience for me to be able to work on a project for an organization I support. I had very little experience with data visualization prior to this but I wanted to challenge myself, especially now knowing that making a data dashboard can be hard to design and implement correctly.
If The Trevor Project ever has a UX need I would love to get the experience of working with them and presenting my designs to them. In terms of the website design, I would love to add some micro-interactions, rework some of the functions and colors, and build out other features such as the graph drill down settings and hover states for the graphs.