Innerbloom
Innerbloom
My role: product Designer
tIMELINE: Sept 2024 - december 2024
Tools Used: FIGMA, PHOTOSHOP
Overview
During my fall semester of 2024 at San Jose State University, I took a class called DSID-126: Ergonomics for Design. The purpose of that course was to understand the importance of designing with human comfort and usability in mind. I chose to design a mindfulness app because of its importance to everyday life, and saw the need for more intuitive apps regarding wellness.
Mindfulness was the perfect focus because it is not only accessible, but it also has the ability to make a real impact. The goal for this project was to design a mobile application that not only supported mental well-being on a functional level, but also embodied the principles of intuition and calming in the user experience.
Innerbloom redefines the mindfulness experience by addressing the ergonomic challenges that reduce user engagement and fostering a sense of peace and calm throughout the user experience. Through improvements in navigation, visual design, and accessibility, the app seamlessly integrates mindfulness practices into a user’s daily routine.
Problem Statement
Stress, depression, and anxiety are common struggles in this day and age. While there are many ways to deal with these feelings, Mindfulness has been proven to be the healthiest and most effective way to address these issues. However, many people lack the time, discipline, and guidance to develop proper routines.
There are many apps such as Headspace that seek to make mindfulness accessible and simple to use, but still face a wide range of limitations, which are…
paywalls
lack of user friendliness
information overloads
limited personalization
How Do We Fix it?
The app I am designed will help address those specific pain points by placing an emphasis on…
Accessibility
User Friendly Interface
Customization
This app will offer an easy to use interface which will help users build healthy mindfulness habits. Through research and a commitment to user-centered design, I developed an interface that better addresses the needs of those who seek mental well being.
Project Goals
User Journey
Research
Methodologies
Qualitative Methods:
Field Observations / Think Aloud Protocol
User Interviews
Quantitative Methods:
Surveys (On a scale from 1-10)
Time to Complete Task
Field Research
Although the majority of testing / research revolved around college students, this app is designed for anyone seeking to improve their mental wellbeing through guided mindfulness practices. I began my recruitment process for the research at San Jose State University. I ensured I had a blend of diverse participants, especially in the context of mindfulness experience. Through the insights gained by these participants, I was able to dig deep into user needs and form better design decisions. Here are some participant samples from my field research…
User Interviews
Sample of Questions Asked:
“Can you tell me about your current stress management techniques?”
“Has there been a time where you have used apps that were designed to help you relax / meditate / deal with stress / sleep before? What was your experience?”
“What feelings / benefits do you seek to gain from mindfulness practices?”
Full link to my questions: https://docs.google.com/document/d/1Fyri1NPj03M1SVLC0xfh3ROXZFCwalMafbcWpGvm-hY/edit?tab=t.0
Usability Test:
For the first usability test, I wanted to see the user’s first impressions on Headspace. The test followed this protocol:
Open the App -> Explore the App -> Find a Meditation Session that Appeals to Them -> Start a Meditation Session
This phase of the design process helped me gain many insights on the attitudes towards mindfulness and user values.
Insights
Pain Points
While users were navigating Headspace during the study, there were multiple pain points that were hindering their mindfulness journey.
Paywall Restrictions: Many of the app’s features were locked behind a paywall. This blocks users from key features early on their journey.
Confusing Navigation: Users found this app confusing in terms of navigation, as the explore page was reported to be a bombardment of information for many of them.
Color Scheme: The colors were reported to be too bright and sharp for dark mode.
Personalization Issues: Difficult to toggle light/dark mode and no option to change profile picture.
Why it is Important to Address Them?
With these areas of friction, users are going to have a difficult time establishing healthy mindfulness habits. Users can’t feel overwhelmed with navigation or be blocked by paywalls, especially on an app that is supposed to help them with feelings of stress in their day to day lives. Content that is difficult to find or takes too long to search for, will reduce user satisfaction and hinder the overall experience. Apps that are geared towards helping users build better mindfulness habits, need to have a calm and inclusive atmosphere.
Actionable Insights + Design Solutions
Quick Access to frequently used / recent sessions
Design a navigation system that is engaging and easy to use
A milder color palette
Incorporate more grid like structure instead of repetitive rows on explore page
Home screen is personalized to user needs
Incorporate easier customization in the profile section, edit icon near profile, easy theme switches, etc
Remove the initial paywall, to increase accessibility, a “freemium” solution
Design Process
Concept Development
Switching from Tabs to Grids:
Adopting a grid like layout increases visibility of the tabs
Reduces the need for excessive scrolling, can view many things quickly
Opportunities for more engaging visuals
Color
Shift from typical dark and light themes
Explore gradients and more relaxing backgrounds
Enhances atmosphere
Too many harsh and stark contrasts in Headspace, incorporate cohesive colors
Incorporate Shorter Meditation sessions / Breathwork
Users were interested in breathwork as a feature
Incorporate shorter meditation sessions upfront
Compliments existing features
Prototyping Process (Low Fidelity)
To better develop the initial concepts into user experiences, I created a low fidelity prototype to test the ideas and the flows between pages. The goal was to understand the key interactions before developing the high-fidelity designs.
Usability Testing
I conducted further research with my participants, this time with my low fidelity mockups. These observed interactions allowed for me to come to these key conclusions…
Insight 1: Onboarding Lack of Options
Many of the participants found the questions about emotional states in the onboarding restrictive due to the lack of options.
3 out of the 10 participants stated an unlisted emotion during the think aloud protocol
Insight 2: Visual Design Complications
The wide spacing between elements was responsible for creating visual distraction in many users.
Many elements of the app such as the “Go Back” and “Search Bar” were noted to be “too close to the top” and “needed to be lowered”
Users found the 5 navigation icons at the bottom too cramped
Insight 3: Users Preferred an Ambient Background
When asked if dark background, light background, or an ambient background was more relaxing, users favored a ambient background
Insight 4: Context / Countdown
Users expressed confusion and requested context when navigating the 4-7-8 breathing portion.
Insight 5: Users Clicked on Quick Calm
6 out of the 10 participants selected “Quick Calm” as their choice of session.
High Fidelity Prototyping
After refining insights that were gained from the low-fidelity prototype, I developed the high fidelity prototype on Figma. In this iteration, I focused on the visual design, aesthetics, and usability.
Login Screen / Account Setup
Onboarding Flow
Main Screens: Home Screen / Explore Screen / Care Screen / Profile Screen
Breathwork Feature Flow
Starting a Meditation Session
Reflections
Reinforced the importance of empathy and active listening especially during user research / testing
I made improvements in asking questions for user research. I was able to get better storytelling responses rather than the participant responding briefly to the question through the way I phrased my questions.
Designers are not users, Assumptions are not reality
Grateful for the participants, friends, and Professor Armstrong who all had a role in making this project possible
Next Steps
Explore accessibility: Ensuring the app is usable for people with disabilities and expanding research to older demographics
Adding a social feature: Friends / Community system
The ability to connect the app with other health apps / wearables
Expanding the Care feature
Implementing AI-powered Recommendations
VR/AR Integration Features