School Project where I conceptualized a mental health support app to connect users with peers & professionals and promote self-help healing methods.
ROLE
The concepts, design, coding, and animations were created by Michael Calcada, with user testing from friends.
Challenge
With approximately one in four adults suffering from some form of mental illness, a large portion of the population needs help addressing and talking about their mental health. The challenge was to design a smartphone application aiming to help people with mental health issue's and promote healing through community and self-help methods within the app.
Project Goals
Create a smartphone app that allows for multiple methods of mental health support, healing, and relief through mindfulness, professional support, and helping others in similar life circumstances through a delightful and positive app.
User Needs
The average waiting time to be able to talk to a professional counsellor on a university campus is 3-4 weeks.
This statistic from Universities in Ontario prove that in-person help is not always accessible when you may need it most. Mental health issues impact one one-fourth of the population worldwide, and there are no anonymous, convenient, and personalized applications to help users understand and cope with mental illness. This is why an application such as ReachOut is needed.
User Research
With a topic as broad as mental health that affects people in every facet of life, this application had to be accessible by all with an easy to navigate interface. The primary users of this application are individuals seeking easily accessible support and advice from people who have been in the same situations as themselves. This varies from person to person but can be anything from being stressed or anxious about managing both school and work, to a person with OCD who finds it difficult to find someone who understands what they are going through.
The potential problems and challenges I had to avoid were insuring users are always presented an option to talk to a paid professional for professional advice. If users feel they no longer need the app because they feel happier, ReachOut encourage's continued use of the app through mindfulness and meditation.
Researching The Problem
When researching other applications, there is not an all-in-one app that has the features necessary to help users cope with their individual and personal problems. This ranges from discovering self help methods to getting help from trained professionals. Some of the features that I explored in the app are:
◦ Self healing meditations for different situations and moods.
◦ Mood Tracking and analytics to keep track of daily emotions.
◦ Talk with peers who are or were in the same situationas you.
◦ Upgrading to the premium version to talk with trained and licensed professionals.
◦ Meet with professionals near you.
◦ Visit external help and resources if needed.
Brand Attributes
The branding process started with an understanding of the goal of the application and thinking about the core values of ReachOut. I came up with many attributes and ultimately limited it to the following; love and heal yourself, and connect with peers and professionals.
After many different approaches to the logo development, I quickly saw some promising directions to explore through choosing a brand colour, style, and aesthetic that communicated the look and feel of the brand.
Exploring Typography
After the logo was chosen, I began to work on incorporating type for the wordmark. This had to be consistent with the logo's round and soft edges by conveying a positive and light feeling. The typeface chosen for the logo is Moon, while all other typography throughout the application and brand is Circular.
Logo Construction
After testing and iterating the logos I felt best represented the brand, I chose to evolve the selected logo because of the clear representation of both self-healing and community for people with mental health issues.
Final Animated Logo
The final logo took the most effective elements of the design process to create a sense of community and healing through the application. It utilizes light and vibrant colours as well as a subtle heart that connects the two hands together.
Creating The App
I began creating wireframes for the suggested features listed above and how I could potentially tackle incorporating them all into one app that was easy to navigate while being diverse enough to offer personalization and options.
After creating some basic mockups, I went on to creating user flows for how the app would work to be able to better understand how the app would work if developed.
Inital Hi-Fidelity Designs
The application required lots of trial and error to properly include the features I believed were necessary. I had to overcome problems such as making meditation customizable to encourage the user to continue using the app.
The application includes features such as mood tracking and analysis, chat with peers or requesting to talk to a licensed psychologist or councilor, and meditations with customized themes and sounds.
User Feedback
After completing screen mockups of the application, I began user testing with classmates, friends, and family to get other opinions on the app. The most important feedback I receivedcriticised the legibility of the white text on a faded white card. This made me rethink the design language I used for the app and ultimately lead to me creating a new card system to provide clear hierarchy and legibility.
I also receivedfeedback that the onboarding process was too quick and did not properly explain the different functions of the app, resulting in me creating a new onboarding flow for the next phase of the design process.
Final Hi-Fidelity Designs
The final design solutions differed from my original concept as I added a new onboarding process, separated sections by colour, and improved the app's overall hierarchy and legibility. I also unified the design language throughout the application with constant button appearances and reactions, typography, and overall look and feel.
Creating the website
The website was designed to demonstrate the app features for each section of the app, describing them in detail and utilizing slick animations to keep the users engaged with the site. Users can also go through the site where they can find further resources for mental health support such as free hotlines.
Final Thoughts
The final solution of creating the ReachOut brand, mobile app, and website addressed the problem by addressing mental health issues by creating an application that offers solutions through these different mediums. I conceptualized my idea through a product website as well as an animated video that goes through the onboarding of the application. The video showcases the different features and services users can take advantage of through both self-healing and reaching out to others.