CalmU
An interactive app that helps college students better understand and manage their mental health.
An interactive app that helps college students better understand and manage their mental health.
Devices
Desktop/Web
Role
Designer (individual project)
Timeline
8 weeks
Skills
UX/UI, Research, Product Design, Prototyping
Devices
Desktop/Web
Role
Designer (individual project)
Timeline
8 weeks
Skills
UX/UI, Research, Product Design, Prototyping
Devices
Desktop
Role
Designer (individual project)
Timeline
8 weeks
Skills
UX/UI, Research, Product Design, Prototyping
Skills
UX/UI, Research, Product Design, Prototyping
Devices
Desktop/Web
Timeline
8 weeks
Role
Designer (individual project)
FINAL PROTOTYPE
FINAL PROTOTYPE
50% of college students identified their mental health struggles as their top stressor for 2023, and 71% of students surveyed indicated they struggle with issues such as stress, anxiety and depression.
"What mental health needs is more sunlight, more candor, and more unashamed conversation" - Glenn Close
Problem
Problem
Problem
There is a lack of resources for college students trying to manage mental health disorders. Many students are not educated on their type of mental health disorder and don’t have accessible resources to manage them.
There is a lack of resources for college students trying to manage mental health disorders. Many students are not educated on their type of mental health disorder and don’t have accessible resources to manage them.
There is a lack of resources for college students trying to manage mental health disorders. Many students are not educated on their type of mental health disorder and don’t have accessible resources to manage them.
Solution
Solution
Solution
Build an interactive app that provides college students with personalized resources for learning and managing their mental health disorders, improving their quality of life.
Build an interactive app that provides college students with personalized resources for learning and managing their mental health disorders, improving their quality of life.
RESEARCH
RESEARCH
Concept Inspiration + Comparative Analysis
Headspace
strong brand and a wide range of resources
does not offer mood tracking or personalized recommendations
Moodfit
offers mood tracking and personalized resources
UI is lacking compositionally + inconsistent in the graphical style
Calm
personalized recommendations based on the user's preferences
allows for easy navigation and interaction
Headspace
strong brand and a wide range of resources
does not offer mood tracking or personalized recommendations
Moodfit
offers mood tracking and personalized resources
UI is lacking compositionally + inconsistent in the graphical style
Calm
personalized recommendations based on the user's preferences
allows for easy navigation and interaction
Headspace
strong brand and a wide range of resources
does not offer mood tracking or personalized recommendations
Moodfit
offers mood tracking and personalized resources
UI is lacking compositionally + inconsistent in the graphical style
Calm
personalized recommendations based on the user's preferences
allows for easy navigation and interaction
Interviews
We conducted 8 interviews to gain a deep understanding of what is required to make our product a useful tool.
Our demographic included student athletes, part-time student workers, and fraternity/sorority students.
Personas
This is an example of a possible user that would find CalmU to be a helpful resource for their mental health. Please reference the process document for a more in depth analysis.
SKETCHES + ITERATIONS
SKETCHES + ITERATIONS
I combined the research performed on existing apps and on my user to create a user-flow crafted around their needs. Here's what I came up with…
Preliminary sketches
Working through a possible user-flow and initial compositions for the UI.
First round
I explored two different approaches to the interface aesthetic. The first was a Pleasurable Pastel while the other took more of a Sincere Sophistication approach.
Below are there corresponding UI designs.
First round
I explored two different approaches to the interface aesthetic. The first was a Pleasurable Pastel while the other took more of a Sincere Sophistication approach.
Below are there corresponding UI designs.
Second round
For the second iteration I decided to combine both styles form above.
Here I explored a proper hierarchal structure as well as multiple compositions for the UI elements.
Third round
My last round of iterations I mainly focused on colors and cohesiveness between the screens. I also decided to add an additional screen for better usability.
I wanted the user to fully take advantage of the interactivity of the learning process so refining the functionality of the interactive model was necessary in this round.
First round
I explored two different approaches to the interface aesthetic. The first was a Pleasurable Pastel while the other took more of a Sincere Sophistication approach.
Below are there corresponding UI designs.
Second round
For the second iteration I decided to combine both styles form above.
Here I explored a proper hierarchal structure as well as multiple compositions for the UI elements.
Third round
My last round of iterations I mainly focused on colors and cohesiveness between the screens. I also decided to add an additional screen for better usability.
I wanted the user to fully take advantage of the interactivity of the learning process so refining the functionality of the interactive model was necessary in this round.
Second round
For the second iteration I decided to combine both styles form above.
Here I explored a proper hierarchal structure as well as multiple compositions for the UI elements.
Third round
My last round of iterations I mainly focused on colors and cohesiveness between the screens. I also decided to add an additional screen for better usability.
I wanted the user to fully take advantage of the interactivity of the learning process so refining the functionality of the interactive model was necessary in this round.
FINAL DESIGNS
FINAL DESIGNS
Refining details and adding in secondary screens.
The aesthetic for the app from version 3 was spot on — but the compositions felt crowded and frustrating to use. For the final designs I focused on a more simplified navigation system and a basic use of colors to not overwhelm the user.
Refining details and adding in secondary screens.
The aesthetic for the app from version 3 was spot on — but the compositions felt crowded and frustrating to use. For the final designs I focused on a more simplified navigation system and a basic use of colors to not overwhelm the user.
FINAL PROTOTYPE
FINAL PROTOTYPE
TAKEAWAYS
TAKEAWAYS
TAKEAWAYS
Deconstructing information into smaller parts enables a deeper exploration and explanation of each component.
By visualizing the amount of information that needed to be included in the UI, I was able to adjust the foundational planning for CalmU. Through multiple iterations on the assets as well as the overall UI of this experience, I have learned that it can create a pleasurable experience and increase the potential pathways a user can take while exploring the site.
Deconstructing information into smaller parts enables a deeper exploration and explanation of each component.
By visualizing the amount of information that needed to be included in the UI, I was able to adjust the foundational planning for CalmU. Through multiple iterations on the assets as well as the overall UI of this experience, I have learned that it can create a pleasurable experience and increase the potential pathways a user can take while exploring the site.
OPORTUNITIES FOR IMPROVEMENT
OPORTUNITIES FOR IMPROVEMENT
OPORTUNITIES FOR IMPROVEMENT
If I had more time I would
If I had more time I would
If I had more time I would
Make each step/screen of the app functional.
Perform user tests on the finalized designs to check my logic.
Explore other variations of the user-flow (UX).
Continue to iterate on the final interface designs.
Make each step/screen of the app functional.
Perform user tests on the finalized designs to check my logic.
Explore other variations of the user-flow (UX).
Continue to iterate on the final interface designs.