Overview 
I designed this app during the Fall 2018 semester to serve as an on-the-go therapist and online anxiety management system for stressed-out college students who do not have the time for or simply do not like going to a therapist. This app is designed to cater towards the target audience's need for convenience and privacy. 
Dates: November 1, 2018–December 13, 2018
Tools: Adobe XD, Adobe Illustrator

Challenges/Goals 
1. To design a UI/UX interface that helps alleviate anxiety and other negative emotions in an efficient, easy-to-use way.
2. To figure out how to take the broad subject of mental health and turn it into something easy-to-digest for young users.
3. To create an user experience that feels personal.

Design Process – Research and Scope
I started out this design process by researching different ways college students would deal with stress, sourcing my information via interviews with my peers, personal experiences at therapy with the provided mental health facilities on-campus at Rutgers University–New Brunswick, testing out different experiences with different mental health apps, and reading up on academic journals related to this topic. From this point, I developed the scope of the project based on my research and challenges/goals, finalizing on the app using these stress management methods: 
Question-and-Answer (Q&A) Prompts
Starts the dialogue on why a user feels a certain negative emotion.
Video Rants
Designed to allow the user to vent about their problems, essentially allowing the user to “scream into their pillow”. These rants are placed in the beginning for initial venting, and at the end for practice scenarios and more venting if the user still feels angry at the end.
Deep Breathing Prompts
Allows the user to breathe and calm down during the session. When angry or anxious, people tend to forget to breathe and this is just a reminder to remember to breathe.
Mood Raters
The bad mood rater at the beginning rates how severely a user is feeling angry ("meh" – "bouta have a breakdown") and is the catalyst for the Find Yourself journey. The good mood rater at the end rates how severely a user is feeling happy ("a bit less shitty" – "ready to get this mf bread!!") and ends the Find Yourself journey. 
Calming Prompts
Designed to help the user calm down at the very end of the Find Yourself journey. This is similar to how therapists give advice and give suggestions on what you can do outside therapy sessions to help maintain your mental health. 

Design Process – Structure and Skeleton
After developing the scope for this project, I sketched out a flow chart to flesh out the details regarding the app structure.
After developing the app structure, I then created some sketches and wireframes for the app before designing an aesthetic.
Design Process – Surface
I wanted the stylistic choices behind this app to reflect a change from a negative emotion (i.e. anger) to a calmer emotion (i.e. happy) with the initial goals and challenges in mind. I resolved these challenges by designing the app around these elements to calm a person down from a bad mood:
Gradations of Color
Shifts the user’s mood from negative to positive. The user will use this app with a bad mood (red) and the journey this app takes you through (the in-between colors: magenta, purple) is expected to calm you down by the end (dark blue).
Minimal Layouts
Makes the navigation of the app is easy to use and less stress-inducing. Too much detail would have been too distracting and made the app harder to navigate.
Humanistic Typography
I used Avenir in the weights Regular and Heavy for this app. I picked this typeface I wanted something that is approachable, and this typeface is humanist and friendly to the eye. 
Humorous 2010's Vernacular
I used modern, humorous vernacular to help make the app more approachable and relatable towards college students. I wanted to make this app humorous so that it can help calm a person down from a bad mood.
This style guide is the reference I used to design the whole aesthetic of the app, and helped me in creating an identity.
Design Process – Identity
The identity is a circle encircling the title of the app. This represents being whole with your emotions.
Final Designs
Reflection
This project was the first time I got exposed to UI/UX design as a discipline. Prior to this project, most of my experience with design was concentrated in branding design and print design. From this project, I learned the basics of prototyping and learned how to refine my work process to be more efficient. A critique that stood out to me for this project was to make every design aspect, from surface level aesthetics to wireframes to navigation, for this app purposeful and meaningful towards the main concept, as well as user-friendly. As a result, I have learned how to become more conscious on how to not only design for UI/UX and accessibility, but also make my designs stronger on a conceptual level. 

Check Out My Other Works

Back to Top