A Website Redesign for Closegap
Encouraging High School Students to Care for Their Mental Health
OVERVIEW
Closegap is a 501c3 non-profit
organization designed to support the emotional well-being of K-12 students.
Closegap provides a platform that students use to check-in with their mental health each day, which allows for early crisis intervention and real-time support from school staff to create a safe, digital space, for emotional discovery.
My Role
Team Lead + UX Designer
The Team
Sean Kim
Dar Lee
Laura Liu
Tools Used
Figma, Zeplin, Otter.io, Notion, GSuite, Illustrator
Duration
3 weeks
DESIGN CHALLENGE
Design a new mental health check in process for high school students for the Closegap website
Research Goals
-
understand how high school students engage with the current Closegap platform
-
generate ideas for what high school students would like to see additionally on the platform
-
evaluate how students feel about the visual aesthetic of Closegap
Design Opportunities
-
build a platform that increases student engagement
-
create a dynamic and flexible platform for the needs of the age group by adding optionality
-
upgrade the visual UI to match the age group to make the platform more enticing
The Solution
Students were pleased with the new visual UI, the range of choices when it came to selecting emotions, and got a better understanding of the purpose of Closegap.
DISCOVER | PROBLEM SPACE
Where does this problem exist in the world?
According to data published by the CDC in March of 2022
It’s clear there is a growing mental health epidemic happening to our youth.
As more research is coming out, we’ve began to understand a society that mental health is equally as important as maintaining your physical health. We have physical education requirements during grade school, however the current education system have no avenue to achieve mental “fitness”. Currently, schools don’t actively intervene with a student unless there is a trigger, emotional reaction or a crisis management point.
DEFINE | USER RESEARCH & SYNTHESIS
Getting specific about the problem
To get specific, our team dived into several research methods to understand the gap between what users are expecting and what the current Closegap site provides.
​
Our primary method of research consisted of supervised user interviews with several HS students. Each student was asked 18 questions over a span of 30 mins covering topics such as platform usage, visual preference, content suggestions, and emotional value.
Heuristic Evaluation
Google Survey
User Interviews
Business Analysis
Our research illuminated the following key insights. Our team found that students
-
do not understand the primary purpose of the daily check-in process
-
feel limited by the questions being asked and the answers they can choose during the check in process
-
want the platform to have educational content to learn from
-
don’t enjoy being directly asked about topics like home life, romantic relationships, and self-identity
-
don’t find the platform dynamic or engaging
-
prefer a passive way to reach out to a trusted member of school staff for help
Problem Statement
DISCOVER | USER PERSONA & JOURNEY
Who are we dealing with?
To summerize our user research, our team created a fictious "persona" that we used to guide our design process. Sarah serves as a reminder for who we are building for.
To further illustrate Sarah's problems with the current website, our team created a user journey that clearly outlines where Nole deals with the issues that we uncovered during our user research
DESIGN | LO-FI SKETCHES
How do we solve for the user's issues?
After gathering insights and creating our persona, our team performed two rounds of timeboxed design studio where we ideated on potental solutions to Nole's issues with low fidelity sketches.
​
Below are a few of the ideas we came up with, however we chose to prioritize and focus on the 3 features highlighted below.
-
setting up an onboarding process
-
offer additional choices when selecting emotions
-
add a resource center
-
include additional data visualization charts
-
allowing for a direct chatbox to school staff
-
allow for more activity options at the end of the check in process
DESIGN | THE SOLUTION
From sketches to screens - core features
1. Onboarding Process
Build an onboarding process to explain the primary purpose of a daily mental health check-in
2. Increase Options
Add additional choice options for the primary and secondary emotion questions to provide a larger emotional range that's in line with the age group
3. Resource Center
Create a separate page for a resource center so students have access to material they can use to learn on their own time
DESIGN | USABILITY TESTING METHODOLOGY
Assessing the current and proposed website
DESIGN | USABILITY TESTING RESULTS
How did the proposed site compare to the current one?
The check-in process is an emotional process and occurs daily. Therefore, our team didn't take any weight on timing or task success for the first to second round as timing was dependent on a student’s ability to answer the questions by assessing their emotions and task success being at 100% because of the linear flow of the process.
​
The second and third round of testing were done to measure improvements that needed to be made to the proposed site our team built. For these two rounds, we used average time on task to measure how quickly students were able to navigate to the intended features.
DELIVER | PHASE II RECOMMENDATIONS + POST MORTEM
Recommendations
-
Continue building out additional choices for primary and secondary emotions with A/B testing around types of the range of emotions offered
-
​Gather content to create a streamlined flow for the resource center
-
Create a quarterly feedback form for students and educators to begin understanding what specific questions should be added to the check in process
-
Consider purchasing an illustration set to standardize illustrations across screens due to limited resources
-
Conduct usability testing amongst three different segments in the user base
-
students who are unfamiliar with Closegap completely (new users)
-
students who are Closegap champions (existing users)
-
students who are lukewarm about Closegap (existing users)
-
Post Mortem
UX is not a linear process - no matter what the story telling may say. Here are a list of improvements that were top of mind for me​
-
Create a survey form to gather generative research around content for the resource center
-
Conduct seperate rounds of user interviews with the segemented target user groups mentioned above.
-
Perform two seperate rounds of research, one for website content & language and the other for visual preference ​
-
Add additional KPIs to your usability testing rounds
-
Perform A/B testing on phrasing of specific questions asked during the check in process to figure out syntax and diction preferences
-
Perform a round of usability testing on your mid-fi screens to focus on content
DELIVER | KEY LEARNINGS
What did I do? What did I learn?
1. Setting up interviews with HS Students - interfacing with another generation
​
Interviewing HS students meant dealing with minors and ensuring that school staff was available to supervise these interviews. I learned that scoping is important - set expectations for what is ideal and what is pragmatic and making sure you have maxiumum value or enough of both to move forward into the design phase. Alternatively, I learned when interviewing 15-17 year olds that making them feel comfortable illicits the most honest and genuine answers and this age group is smarter than society gives them credit for.
​
2. Working with a non-profit - having limited resources
​
Because Closegap is a non-profit, we were working with very limited development resources on the client side. I learned it's important to take a step back and recognize the limitations you have and make sure you build to have the largest return on user experience for your target user. Focusing on what makes the experience most valuable to your users ensures you're designing the right thing.
​
3. Interfacing with different stakeholders - managing expectations and goals
​
Client, students, teachers, school staff - all of these are different people that come with a different perspective and different goals in the process of completing a project. I learned that making sure each of your stakeholders feels heard and communicating what is feasible and what is in scope for your project when working with different stakeholders is important. Along with communicating your value to the client by ensuring they understand why you made certain design decisions along the way.