WELL + PEACE APP

Mental health that's accessible & customizable to anyone's needs.

While enrolled in Career Foundry's UX / UI course, our task was to concept and create a health and wellness app that allowed health-conscious individuals to log in to a responsive health and wellbeing portal to record their health information and access general physical and mental wellbeing features.

CONTEXT
UX / UI Project

TIMELINE
Spring 2022

TOOLS
Adobe Illustrator
Figma
Marvel
Optimal Sort

CONTRIBUTION
UX/UI
Research
Prototype
User Interview

20220212_iPhone_Homepage Mock 4.png

Defining the Problem

 

The COVID-19 pandemic and years following that really shed light on mental health and well being. Though years before that I was working on my well being attending yoga classes and doing daily meditations, this became so much more real and needed during this pressing time. I chose this project prompt because mental wellness is important to me. Mental wellness or the word "meditation" can be a very intimidating word to many as well as just trying to find a therapist. I often found apps that did the meditation piece, but what about connecting them to therapists near them?

PROBLEM STATEMENT

Our mental wellness users need a way to record their health and medical information because they wish to better their mental wellbeing. We will know this to be true when we see our users consistently logging their health conditions and setting up times with their therapist.

 

User Interviews

20220228_Question Set 2.png
20220212_Similarity Matrix_edited.jpg

Affinity Mapping & What We Discovered

Through user interviews with adults ranging from ages 24 to 35 who had used a mental wellness app in the past, we were able to understand how users would go about finding a mindfulness app and how to create better habits. 

  • Most seeked a mental wellness app during a hard time in their life, i.e. a life changing event, COVID-19 pandemic, or a break up. 

  • Noted they would be interested in sharing medical information and tracking habits as long as they weren't shared with third parties. 

  • Interested in an app that introduced mental wellness through meditations and the capability of finding a local therapist.

20220228_Well + Peace_Affinity.png

Defining User Personas

Taking the insights from the research and interviews done above, I came up with four diverse user personas inclusive of those with disabilities, BIPOC, LGBTQIA, and ranging ages. This, in turn, would allow others on the project to be sure to design for multiple personas in mind. 

 

Information Architecture

20220212_Info Architecture_2.png

Low to Mid-Fidelity

Usability Testing & Updates

20220228_Nav Update_1B.png

OLD NAV BAR

First round of icons to indicate library, chat, therapist and profile functions.

arrow.png
20220228_Nav Update_2B.png

NEW NAV BAR

Chat and therapist icons too similar and confused user. Updated icons.

20220228_Audio View_1B.png
arrow.png
20220228_Audio View_2B.png

OLD VS NEW AUDIO FUNCTION

Initial renderings included varying colors and mismatched icons. Once the design system was established I updated it to feature updated colors schemes, icons and a card material design.

 

Design System

20220228_Design System.png
20220228_Well+Peace_Common UI Elements_2.png

Key Functions

20220228_Features Collage_2.png

Search for Local Therapist

20220228_Find Therapist Collage.png
 

What did I learn?

TO BE AWARE OF MY BIASES

Common in the design world, I had to fight my biases and back up my design choices with research and data. I also made sure to exercise any of my research methods with empathy, understanding and a lot of curiosity. 

 

ACCOUNT FOR ALL GROUPS OF PEOPLE & AGES

Although I ensured to have user personas that varied in gender, race and accessibility, during usability I noticed I did not account for age groups as well as I intended. Issues like font size, emoji hold-down responses (that most 20 to 30-year-olds are aware of) and keyboard functions were different for those above 50. 

ICONOGRAPHY IS IMPORTANT

My chosen icons for the navigation bar, I thought, were intuitive, but I found through usability tests that many of them could be mistaken for other items, i.e. library icon could indicate journaling in the notebook or the chat bubble could indicate chatting with your therapist. Therefore, I added titles under each to cover both clarity and accessibility standards. 

20220228_iPhone_Audio Mock.png