Mindfulness and Meditation — A UX/UI Case Study

This design challenge is all about wellness. This week at Ironhack, we were challenged to design a wellness app for an area of wellness using the Design Thinking Process, Lean UX Strategy, and Atomic Design Principles.

The Client

The National Wellness Institute is an organization in the wellness field with dozens of years of experience.

Mission Statement:

“Providing health promotion and wellness professionals unparalleled resources and services that fuel professional and personal growth.”

NWI is looking to leverage technology in their system to help people live a healthier lifestyle.

Their main goal now is to:

1. Create a set of digital wellness tools for Wellness coaches
2. Update their image — create a new visual system that reflects its innovative and refreshed approach to wellness.

Project Requirements

Although I had creative freedom and the flexibility to design what I wanted, there are three requirements that the NWI wanted to be included:

• Users need to be able to set up their profile to include important information relevant to their goals
• Users need to be able to set goals and track their progress
• Users need to be able to share their stats with their wellness coaches

There are six dimensions of wellness — physical, social, intellectual, spiritual, emotional, and occupational.

After doing a bit of research on each dimension of wellness, I chose to work with emotional wellness through the lens of mindfulness and meditation.

Mindfulness can be described as “a mental state achieved by focusing one’s awareness on the present moment, while calmly acknowledging and accepting one’s feelings, thoughts, and bodily sensations.”

Mindfulness is all about being aware — noticing your actions, thoughts, and feelings in the present moment. It can be practiced anytime and anywhere. When you are mindful, you are actively paying attention and aiming your focus on whatever you are currently doing.

It can be quite difficult for the mind to stay in the present moment because it is often distracted by a constant flow of thoughts, which can be referred to as the wandering mind. When your mind is on autopilot, it tends to think about the past in regret and worry about the future, which is a very common state of mind for most people. The effects of practicing mindfulness are vast and varied, but we will go into that a little later.

When we think about mindfulness, we tend to think of meditation being in the same domain. Although these two practices are very much connected and overlap, they aren’t exactly the same thing.

Meditation can be described as “a practice to bring awareness to the present moment and yourself to achieve calmness, clarity, understanding and compassion among many other things. “

There are many different forms of meditation techniques, but just to name a few:

• Focused Attention
• Visualization
• Body Scan
• Resting Awareness
• Reflection

If you would like to learn more about meditation techniques, go to the Headspace website, they have a lot of great information and it’s easily digestible!

So, let’s get started!

DISCOVER

Secondary Research

I started off my process with secondary research to better understand mindfulness, meditation, mental health, and the mental wellness industry.

According to the National Alliance of Mental Illness, 1 in 5 U.S. adults experience mental illness and 1 in 25 experience serious mental illness. A majority of the mental illnesses experienced are Anxiety Disorder, Depression, and Post-Traumatic Stress Disorder. These numbers were quite shocking to me because it’s not as uncommon as I assumed it was.

I also discovered that the many benefits of meditation go as far as easing the symptoms of anxiety, depression, and stress, in addition to improving focus, happiness, positive emotions, memory, sleep, and cognition.

Here is a summary of the rest of my research:

• The practice of meditation originated in India several thousands of years ago
• Meditation is often described as either calming or insightful
• There are guided and unguided forms of meditation
• There are also physical benefits of meditation
• The main intent behind meditation is not to clear the mind but to gain awareness so that we can understand our thoughts and feeling and form new perspectives around them as a result

Business Analysis

Using the Lean UX Canvas, I articulated my initial assumptions:

• Business Problem: People need a way to improve their emotional wellbeing by practicing mindfulness
• Business Outcomes: Users will feel more mindful and in touch with themselves and coaches will be able to help their clients meet their goals
• Users: Busy people who are on the go, people who struggle with stress/mental illness, people who struggle with being in the present moment
• User Benefits: More aware & higher level of consciousness, more in-tune with mental, emotional and physical realms, improve mental health — stress, anxiety, coping, depression, focus

After doing some much needed background research and business analysis, I analyzed the major competitors in the market.

Competitive Feature Analysis

I analyzed a variety of apps that focus on emotional wellness:

• Headspace
• Calm
• Mindfi
• Insight Timer
• Oak
• Sway
• Pause

Several of these apps have similar features like a meditation timer, guided meditations, notification reminders, and categories. However, some apps like Sway and Pause incorporated sensory elements, interactions, and even gamification within their mindfulness experiences. Although there are several other features that weren’t included, I honed in on the most significant ones based on my research.

Market Positioning Chart

This tool is essential to analyzing the competition in the marketplace and understanding users' mental models. The goal is to identify gaps in the current market and find opportunity areas with few competitors. Arranging the competitors on the chart also gives me a visual adaptation of current competition.

Meditation can be described as calming or insight meditation. Both are well defined by Headspace:

Calming Meditation

“The intention of calming meditation is to cultivate a quieter, more peaceful state of mind and improved concentration.”

Insight Meditation

“Set an intention to transform their minds by developing qualities such as wisdom and compassion. Insight meditation involves focusing on the breath and being aware of and noting all the physical and mental sensations that arise.”

I decided to use the two types of meditation as components for the y-axis. The x-axis compares apps that are sensory-based (sounds, visuals, movements) and intention-based (like the intention to sleep better).

The “Blue Ocean,” which represents an area of opportunity, is in a space between sensory-based and insight/ reflection meditation. Although I didn’t know where this insight would lead me or if it would end up being a viable positioning in the market, I continued through the process to discover new insights from users.

User Research

Survey

The 32 responses I received from my survey were quite insightful and a great starting point to better understand the user group. Surveys are always a good source of quantitative data. I usually post my surveys on Reddit pages that are directly related to the topic and send them to people who I know can participate.

My questions revolved around the practice of mindfulness, meditation, and emotional mental health. Here’s a summary of key statistics :

• 81% practice mindfulness by doing meditation and breathing exercises
• 60% found meditation/ breathing exercises to be most effective
• 68% practice to manage stress, anxiety, and depression
• 44% practice to be more aware of thoughts/ feelings and be more present
• 50% of people haven’t used a meditation app
• 38% reported that forming a habit is difficult, which prevents them from practicing mindfulness
• 40% report listening to music helps them when experiencing negative thoughts and feelings

Interviews

I usually receive the most valuable qualitative data through interviews. I conducted a total of 7 interviews with people who have both practiced meditation in the past and continue to practice now. There were a lot of insights on the practice of meditation itself in addition to people’s individual discoveries of mindfulness and meditation and how it’s transformed their lives.

“It feels like magic.”

Many of my interviewees were my close friends, so hearing their stories of struggling with mental and emotional health to the transformation that they experienced in their lives from practicing mindfulness and meditation was truly inspiring and heartwarming.

“I started because I was struggling with anxiety and depressions, so I just wanted to be happier…and it changed my life completely — I feel much more grounded.”

After interviewing 4 people, I realized that there were some knowledge gaps, so I went back with a second round of interviews to clarify my unanswered questions. Here are some important insights I pulled from my interviews:

• People feel that they don’t always have time to reflect on themselves, but want to deal with negative feelings in a healthy way
• People either find healthy or unhealthy ways to cope with their negative emotions
• People often start meditating because they are in a bad place and desire to improve their mental health and state of mind

After doing my second round of interviews, I realized a major theme in several of my interviewees. When I asked what they would usually do first to deal with negative emotions, they would respond with an unhealthy coping mechanism — like drinking or binge watching tv — and then follow up with a comment like “I know there are better ways to deal with it, but…” and end with a challenge to their healthy coping habit. At this point, I had an ‘AHA moment’ knowing this piece of insight.

DEFINE

Affinity Mapping

After conducting the interviews and survey, I pulled all of my data from Google Forms and Otter recordings onto an Affinity Map in a Miro board. Miro has been my go-to tool for the UX portion of my projects.

I used the bulk mode feature in the stick notes to put my data on the board and organize them based on themes and connections. The sticky notes are also color-coded by interviewee and survey results. Here’s a high-level view of what the Affinity Map looked like:

The primary themes are:

• Intentions/ motivation to practice
• Mindfulness
• Thoughts and Mindset
• Challenges of Meditation
• Feelings
• Apps
• Other Forms of Mindfulness

There were also several other sub-themes that branched off of the major themes.

Key Findings:

• Many people start and continue meditating because they desire to improve an aspect of their emotional or mental wellbeing
• Not having enough time and being busy are among the biggest challenges
• Habit building is also another huge challenge for people
• People use other things like music and exercise to fulfill the job to be done of improving mental health
• People turn to unhealthy coping mechanisms when dealing with negative thoughts and feelings
• People often started to practice mindfulness and meditation when they were experiencing unprecedented difficulty with their mental health

Customer Profile

I used Stratagyzer’s Value Proposition Canvas to clarify the customer profile and categorize my data based on customer pains, gains, and jobs to be done. This tool helps me better understand the user who I’m designing for and reminds me to keep the user at the center of the design.

Since all of the people who I interviewed had different jobs to be done, I decided to keep it broad for now and list all of them and narrow them down later in the process.

Jobs:

• Falling asleep
• Escaping a busy life
• Managing stress, anxiety, and depression
• Improving focus and attention span
• Coping with negative feelings

Although there are three different types of jobs to be done, (functional, social, and emotional) most of the jobs that I identified through my interviews were emotional jobs. Things like managing stress, coping with negative feelings, and dealing with anxiety are all emotional jobs, so they require a solution that is also based on the users' emotional pains and gains.

User Persona

The user persona represents the user group, their mental models, and humanizes the users. It highlights the situation that they may be in, but most importantly, it clearly identifies their goals and frustrations.

Empathy Map

I also created an empathy map to get another angle on the user's mental models and further articulate my knowledge on the user group.

Task Analysis

This tool is a great way to get a detailed understanding of the task that the user must complete, which breaks down the steps that the user takes in order to achieve their goal in their current state. Once the steps are defined, it’s much easier to determine where value can be added.

In this case, the user’s goal is to relieve stress.

They alleviate their negative feelings with unhealthy coping mechanisms — like drugs, alcohol, or other things that serve as a distraction from their problems — which leads to another problem in itself; lack of sleep.

I used the insights from the task analysis to develop the task into a more holistic version with a journey map.

Journey Map

The Journey map puts the situation at hand in context. It’s another great tool that helped me clearly establish the user group’s mental models and pinpoint the low points in their experiences. The journey highlighted below represents a week in the life of a busy individual who is managing their negative emotions, feelings, and stress.

The low points in the journey occur:

• When the individual experiences distractions from the present moment which leads them to feel anxious about the future.
• When they suppress negative emotions and distract themselves instead
• And when they resort to unhealthy coping mechanisms to deal with those emotions.

Individuals depend on their coping mechanisms to manage their current circumstances, including stress and mental illnesses. Coping mechanisms are compulsive habits that are formed over time, and therefore are hard to break and relearn.

My data indicated that people who deal with negative emotions like stress may lean on unhealthy coping mechanisms like drinking or drugs to manage their current situations. If these habits go unchecked, they become a part of a vicious cycle which the individuals are now psychologically dependent on to function.

So the areas of opportunity lie within the users' need/ desire to relearn healthier coping mechanisms to manage the negative emotions that result from stress and mental illness.

After identifying the low points and opportunity areas within the users' journey, I synthesized them into problem statements.

Problem Statements

1. Busy, working people need a way to manage stress and anxiety because they want to improve their focus and overall mental health.
2. Busy, working people need a way to reflect on their thoughts and feelings because they are suppressing negative feelings and using unhealthy mechanisms to cope with them.
3. Busy, working people need a way to practice mindfulness consistently because they desire peace of mind, to uplift their mood, and to enjoy the present moment.

I turned the problem statements into How Might We (HMW) statements to prepare for ideation:

• HMW help users manage stress/ anxiety/ depression to improve their mental health
• HMW help users practice mindfulness consistently to make it a habit
• HMW incorporate different forms of sensory tools into the meditation practice
• HMW help users reflect on their negative thoughts and feelings without being intrusive
• HMW encourage users to reflect on their feelings and thoughts instead of suppressing them

The value of problem statements of HMW statements is that they clearly define the problems and needs of the users from the data. A good problem /HMW statement is clear, concise, actionable, and will set you up for ideation.

DEVELOP

Ideation

I started off the ideation process with a brainstorming session with my classmate Dave Ostergren. Collaborating during ideation is always the best way to get as many ideas as possible. We came up with about 95 individual ideas using the time-boxing method! This is what the brainstorming session looked like:

After we discussed some of our ideas, I filtered them down to the ideas that I believed would be the best potential solutions.

Before jumping into feature prioritization, I created a few mind mapping diagrams to collect more information, show relationships between these pieces of information, and get a better understanding of the themes below.

MoSCoW Method

Using the MoSCoW Method, I prioritized the ideas that would have the most impact on the users and the business client. Feature prioritization is another vital part of the Design Thinking Process because it requires us to focus on the ideas that matter the most to the stakeholders.

The mandatory features for the end product, which will be a part of the Minimum Viable Product, are highlighted in the must-haves sections of the chart. The must-have features fall under three overarching categories:

1. Guided Reflection Exercises
2. Guided Meditation with sensory tools
3. Habit Reinforcement Feature

From here, I used the other half of the Value Proposition Canvas to make sure that the product features align with the customers' needs and values. The product-market fit ensures that the product/service features are creating value by creating gains and alleviating the pains of the user group.

The sticky notes are also color-coded to correlate with the features on the left of the chart.

Here’s a summary of the Product Market Fit:

• The guided reflection exercises serve as a way for users to reflect on all emotions/ thoughts, help users avoid suppressing feelings, and a healthy coping mechanism for symptoms of their mental illnesses/ stress
• The guided meditation helps users improve focus, relax, and be more mindful while also reducing stress and managing anxiety/ depression
• The habit reinforcement feature will notify users daily to help them track their progress, build healthy habits, and mitigate the challenges of finding the time and remembering to practice meditation and reflection

A quick recap of the pain points:

1. Busy, working people need a way to manage stress and anxiety because they want to improve their focus and overall mental health.
2. Busy, working people need a way to reflect on their thoughts and feelings because they are suppressing negative feelings and using unhealthy mechanisms to cope with them
3. Busy, working people need a way to practice mindfulness consistently because they desire peace of mind, to uplift their mood, and to enjoy the present moment.

Minimum Viable Product

Mirror is a place to reflect on yourself and reconnect with the present moment.

The Mirror app helps the user do three things:

1. Manage their mental health by reflecting on their emotions using a voice-based journaling feature
2. Train their mind to be more present and aware with the guided meditation using sensory features (sound)
3. Track progress with the daily streak feature and communicate with a wellness coach

Jobs to be Done

The JTBD framework focuses on the users' situation, their motivation, and the desired outcome. It captures the main “jobs” that the user needs to get done and the things that they “hire” to get that job done. If we put it into context, the user’s job is to cope with their negative emotions that result from stress and mental illness. So they can hire many different things to get that job done. Earlier in the process, I used the Journey Map to highlight the user hiring alcohol to help them relax.

User Flow

The user flow represents the happy path that the user will take to get their “job” done. This tool helped me get a greater sense of users' expectations and the way they will be interacting with the prototype.

Site Map

Information architecture is something that I’ve struggled with in the past, so I used the site map as a guide with the structure and organization of the content within the prototype.

DELIVER

Low-Fidelity Prototype

I tested the Low-fi prototype with 5 testers using Maze (one of my favorite testing platforms!) and gathered some valuable insights. Testers took an average of 45 seconds to complete the task and had a misclick rate of about 30%. Although the time to complete was considerably low, the prototype was far from being good. I knew that I wanted to add more screens in order to incorporate more of the features in my MVP and make the experience more fluid for the users.

Mid-Fidelity Prototype

I made some adjustments to the next iteration based on the insights from the low-fi prototype. I added more screens to the reflection task and included the sound feature in the last two screens.

This time around, I used Useberry to test my prototype with 5 more testers. The tasks took longer than expected to complete with an average of 1.54 minutes and 43 clicks.

After analyzing the test results and heat maps, I made note of the things that needed to be changed for the hi-fi prototype:

• Meditation screen needs to look less like a button
• Transcribed recording screen needs to be separated from the recording screen
• Reduce the number of buttons on screen six to avoid confusion
• Fewer clicks overall

From there, I moved into the UI side of the process.

Visual Competitive Analysis

I compared and evaluated the UI designs of the major competitors in the meditation app industry by taking some screenshots from Producthunt.

Headspace

Calm

Mindfi

Sway

It was important for me analyze visual designs of these apps so that I know what users would expect and to start thinking about how I can visually differentiate my product from those that are already in the industry.

Branding

This is another one of my favorite parts of the design process!

A product's brand is essentially its personality. The colors, typography, and overall visual design communicate with the users to convey the ideas, purposes, and themes it represents, so it’s something that I don’t overlook or disregard.

The way I start the visual design process is by defining the brand attributes, which can be defined as the core values and characteristics that represent the essence of the brand. It’s also important to establish and test the visual design components before jumping into hi-fi prototypes because the brand attributes guide all of the UI decisions I will make later on in the process.

Brand Attributes for Mirror:

• Peaceful
• Gentle
• Mesmerizing
• Smooth

I found that it’s just as important to test the visual design of the product with desirability tests to see what people will say about the branding and most importantly, how it made them feel.

“I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”

MAYA ANGELOU

Moodboard

Keeping my brand attributes in mind, I created a mood board using a variety of resources like Dribbble, Pinterest, and Pexels.

After establishing a visual theme, I conducted desirability tests with 5 testers. They used words like soft, dreamy, peaceful, calming, and delicate to describe the mood board. However, there were two images that I took out based on testers' feedback.

Style Tile

This is another branding tool I like to use to showcase the components of the actual interface. While the mood board captures the overall look and feel of my brand, the style tile emphasizes the individual elements of the design. Specifically, the colors, typography, iconography, and logo.

These are the colors and fonts I used for the visual design:

• Lavender — #CEBEE0
• Deep Purple — #401E72
• Gold — #D49F24
• Yellow — #EAC664
• Light Blue — #DCE1FB
• PingFang HK Light
• Avenir Light

After doing desirability testing for the style tile, I prepared to build the hi-fi prototype with atomic design components!

The Atomic Design Inventory really made the process of building out my hi-fi prototype much more efficient. The use of components and states was still challenging for me due to the time constraints, but I did my best using the Atomic Inventory!

Hi-Fidelity Prototype

Just as a reminder, I’m solving for these pain points:

• Managing stress and mental illnesses to improve mental health
• Easy, time-efficient way to reflect on emotions to avoid suppressing negative feelings and unhealthy coping mechanisms
• Practicing mindfulness consistently to maintain a peace of mind, uplifted mood and increase presence

The prototype will guide the users through two tasks:

1. Reflecting on their emotions using a voice-based journaling feature
2. Meditating using sensory features (sound)

Here is an overview of the entire hi-fi prototype:

The user begins by setting up their profile. Then the user goes to the home screen where they will start the happy path. From the home screen, they can use the navbar to go to guided reflection exercise, guided meditations, see their progress statistics, or talk to their wellness coach.

The user is asked how they are feeling to keep track of their emotions and mood, then they are given a prompt that can guide them to their voice recorded reflection exercise. I decided to go with a voice-based journaling feature because my data indicated that those who wanted to reflect with daily journaling stopped simply because it took too much time and effort.

When done, users can view a transcribed version of their recording with a highlight of keywords — which represent a summary of their entry and repeated words that they used, this would definitely need some AI technology to function. Then, users can choose to do a guided meditation using sensory elements. I focused on the sound feature for this iteration by including a collection of sounds that users would find on a variety of other meditation apps. Additionally, the user will be able to hear a short preview of the sound before making their decision.

I decided to make the mediation screen as simple and calming as possible so that the user can focus on their meditation without being distracted.

Interactive High Fidelity Prototype

Click here to check out my prototype in action!

Success and Failure Metrics

We will know if Mirror is successful if:

• Users are using the app often — preferably on a daily basis
• Users continue using the app as a healthy coping mechanism for their negative emotions
• Users build a habit — determined with the day streak feature
• Users are reporting that they feel less stressed/anxious/ depressed to their coach
• High task completion rates
• Low churn rates

And we will know where Mirror needs another iteration if:

• Users aren’t using the app often
• Users are hiring something else to get their job done
• Users reporting no significant changes in their mental health to their coach
• Low ratings
• Low task completion rates
• High churn rates

Knowledge Gaps

One of the things that I would’ve loved to develop further is the micro-interactions in the hi-fi prototype. Since I was learning as I was going, the micro-interactions took a bit longer than I had anticipated. I really enjoy doing research, so it would’ve also been beneficial if I had dove deeper in my research on the psychology of mental health and mental illnesses. A better understanding of these topics would have made for a more targeted user group and solution. Although the time constraints for the sprint were challenging, I was really happy with the end result!

Next Steps

• Test hi-f prototype and create another iteration
• Onboarding video with animations
• Develop the habit tracking tool with a reward system
• Incorporate more micro-animations to bring the experience to life
• Bring in visuals for guided meditations to further improve the experience

Key Learnings

• Become an expert on the subject matter through secondary research
• Sometimes, less is more in UI design
• Keeping an open mind throughout the design process is important so that I don’t get attached to a specific idea, solution, or design element

One of the things I found to be really valued during this two week sprint is the opportunity to learn from others. Although I was aware of mindfulness and meditation, this project allowed me to dive deep and discover so much more than what I already knew and assumed about emotional wellbeing. Not only did my research bring me to these new discoveries, but hearing others’ personal stories about their journeys to emotional wellbeing was truly inspiring.

“Sit in silence and listen to what it’s like to exist.”

The past few weeks at Ironhack have been full of new learnings and growth, and I am extremely grateful to my instructor, davidfast for sharing so much of his wisdom, experiences, and abundance of resources with me! Although there is a lot more to learn, I am happy with my progress so far and I’m looking forward to learning more.

If you’ve made it to the end, thank you for your time and interest! As always, let me know if you have any thoughts, comments, or tips, and feel free to connect with me on LinkedIn as well!

My lovely designer classmates and instructor