YOU FOR CSU
“You CSU is a mental health resource for students that intends to help them plan their future, create healthy habits, and motivate students to be their best selves.”
project overview
project type
UX/UI
Class Project
client
Grit Health and Colorado State University collaboration with CMCI Studio
role
Worked in a team with one other person
Sketching, wireframing, prototyping, user-testing
the challenge
You CSU is an online resource for the students of Colorado State University for career prep, mental and emotional wellbeing, and finding their purpose. The site contains a series of quizzes called self-checks so that students can check in on where they stand at that time in those specific areas. My partner, Mickey, and I were tasked with improving the usage of the self-test and increasing the usage of follow-up resources.
How might we improve the site so that students can easily work through quizzes, read results, and utilize the resources in order to better themselves?
problem-solving and sketching
We began our process by reviewing the site as-is and taking notes. After looking at the brief, we created an audience profile which is seen above. The main finding in that profile is that we wanted students to be able to complete the quiz easily and quickly and make them feel comfortable using the site. We first discussed changing the format of the self-check page so that the clearest option was to view your results if the quiz had already been taken. We also decided that the quiz should be changed to a Likert scale to make the quiz quicker to complete and more cohesive. In addition, we wanted to make the UI a little more user-friendly and change the verbiage to be more comforting, as the nature of the site is related to mental health. After taking these notes down, we started to sketch.
Sketch 1
Fixing layout of quiz home page and quiz layout to Likert scale with progress bar.
Sketch 2
Results layout to make accessing resources easier.
wireframing -
wins and losses
This project was an end-to-end project, meaning that after sketching solutions we moved to prototyping, testing, adjusting the prototype, and testing again. After coming up with these sketches for our hypotheses, we began our initial prototypes and brought them in for critique. We started with adjusting the layout of the self check page, changing the format of the quiz, and the scoring and layout of the resources.
Self check page revamp: making results more accessible and giving a first look at results
Quiz format changed to Likert scale
Results in a card format and resources are previewed in each card
Once we finished these initial prototypes, we brought them into class for critique. Most of our changes were received well and fit the asks of the brief. The results page, however, was not received as well as our other changes. The 5-point scale was taken as too clinical and insensitive to people who struggle with their mental health. In addition, the copy describing the score was quite harsh. Overall, many of our ideas worked in terms of general formatting and usability, but the copy needed a lot of work.
prototyping
When revisiting our wireframes after the critique, we decided to improve the UI, adjust the existing copy and add more verbiage, and change the entire results page including layout and scoring. One of the first changes from the wireframes we made was replacing the icons in the menu to make more sense with the section. We also made the navigation menu on the side collapsable to make sure users are not distracted by extra information when completing a self-check. We also added how many students were also active to give s=users a sense of belonging while using a tool meant to help with such a stigmatized issue. Another aspect we felt was missing from the resources was a pop-up on the results page with resources for crisis hotlines and emergency professional help for those who score low. We brought the updates in for review and the class agreed that our changes appeared very intentional and improved usability immensely. Below is a mockup featuring the changes as well as a clickable prototype.
Clickable Prototype
This prototype features all of the changes mentioned above. From the number of active students, change in the choice hierarchy on quizzes and home page, the addition of crisis hotline information, and various UI changes.
More details about the specific changes are mentioned above.
user testing - atomic research
My final step in this project was testing the prototype on actual users. My main focus in testing was on usability and general opinions on the site. I tested with three college students, the main demographic this tool was created for. I took notes on the questions that users asked me, their answers to my questions, and body language while testing. I learned that even after my changes to the verbiage in the most recent version of the prototype, I still did not quite meet the bar in a site intended for mental health. The users claimed it to be too clinical once again and the percentage scoring felt like a grade in school. I did, however, receive pretty good feedback on usability and flow. Below are my notes, insights, and opportunities gathered from user testing.
Affinity Mapping
Arranged notes into insights that solutions can be drawn from.
Opportunities
From the insights, opportunities for future improvements are pulled.