Guided Meditations

That fit into your mug - and your day

UX Design | Meditation app

Inspired by the Zen practice of Tea Meditation, MugZen transforms over 60% of Americans’ coffee & tea habits into the perfect time for daily guided meditations.

Overview

Lack of time is a major pain point for meditators in the US. I explored how an app might help people find time to meditate by using a habit they already have to support a new daily meditation practice.

The result was the creation of MugZen, a meditation app for people who drink coffee or tea and can’t find time to meditate. MugZen uses a concept called ‘habit pairing’ or ‘keystone habits’ to take advantage of time people already set aside to drink coffee and tea, for meditation.

My role

UX Research
UX Design
Branding
Interaction Design

Process

Double Diamond

The four-stage double diamond design process provided a roadmap of how I was going to approach my design problem. It helped me make sure I remained focused on my users throughout.

Steps and outputs

Discovery

Secondary research
Competitive analysis
Competitor heuristics
Surveys
Interviews

Synthesis

Affinity map
Empathy maps
Personas

Ideation

Mind map
Sketching
Mood board
Storyboards
User story maps
User flows

Design

Wireframes
High-fidelity prototype
User testing
Style Guide
Branding

Discovery

Millions of Americans have tried meditation. However, lack of time and poor time management keep many from daily practice.

Key secondary research findings

Keystone habits & habit pairing

Habit pairing is the practice of combining a new or desired habit with an existing habit.
A Keystone Habit is an existing habit that can support other or new habits.

npr.org Jamesclear.com

Habits Americans have

• Over 60% drink coffee daily
• Almost 50% drink tea daily

National Coffee Association

Tea Association of the USA

What is Meditation?

Over 14% of Americans have meditated.
Meditation is a mental training practice where people use a technique like mindfulness or focusing.

CDC.gov Wikipedia.org

Why people meditate

• Stress reduction
• Improve focus
• Improve mental health
• Personal growth
• Religious practice

PsychologyToday.com

Why people don't meditate

• Lack of time
• Difficulty

Omvana.com

Tea meditation

Has been practiced by Zen Buddhists in Japan for almost 1,000 years.
In tea meditation, a person focuses on being present and noticing the sensations of making and drinking a cup of tea.

Britannica.com

Meditation Business

In the US, meditation apps are used by millions of women and men from 18-65 years old & generate almost $1 Billion annually

Sources Statista & Forbes

Competitor Research

In addition to a heuristic analysis, I was able to learn a lot about the business and user base of meditation apps by looking into Headspace, Calm, Insight Timer, and Waking Up.

Meditation app facts

Headspace and Calm are the top two apps with a combined 165 million downloads in 2020. (Business of apps Calm, Business of apps Headspace)
Headspace users range from 18-65 with an even gender split. (Forbes)
It is projected that meditation apps will generate over $1.5 Billion by 2025. (Statista)

Heuristic analysis insights

‍I performed a heuristic analysis on Headspace, Waking Up, and Insight Timer to identify areas of strength and weakness in established apps.

Key takeaways were that competitors lacked flexibility in user freedom, and recognition.

With potentially confusing navigation, lack of labels on icons, and the absence of a robust search feature in some cases - I was able to identify quite a few areas for improvement that I would focus on.

View full heuristic analysis

Surveys and interviews found 100% of respondents drink coffee or tea daily, that they don’t use coffee or tea time productively, and that they feel they do not have time to meditate.

Survey

A screener survey was employed to collect data on habits, and attitudes toward meditation in addition to finding participants for interviews.

Key Findings

Respondents all made or drank coffee or tea 3+ times per week
Most respondents have used or considered using meditation apps
Many respondents cited lack of time or difficulty as reasons they did not meditate regularly

Interviews

All interviewees struggle to make time for meditation
Interviewees cited their coffee or tea's emotional impact, & ‘ritual’ nature
Interviewees don’t use coffee or tea time productively

Interviews provided more specific insight into people's meditation and coffee habits. In total, seven interviews were conducted.
Interviewees represented a wide range of users - both men and women aged 20-50, and from new to experienced meditators.
An affinity map was used to organize notes from interviews to highlight common themes.

The Coffee Hypothesis

Could the time that millions of Americans spend drinking coffee and tea also be used for meditation?

Over 60% of Americans drink coffee daily.

At least 14% of Americans have meditated.

The nearly 1,000 year-old practice of tea meditation is an excellent blueprint for how to combine meditation with coffee & tea.

Using tea meditation as a guide, an app could take advantage of peoples' existing habits to help them overcome the pain points (difficulty and lack of time) which prevent them from meditating.

The size of the coffee industry & the growth of the meditation app market indicates that an app which combines coffee and meditation is a viable business opportunity.

Synthesis

Evidence from research seemed to support merging coffee, tea, and meditation. This became even more compelling as findings were organized into actionable artifacts.

Affinity Map

Organized into an affinity map, interviewees’ responses showed clear patterns - revealing important similarities between meditators.

Common pain points

Pain points of survey respondents and interviewees aligned with those from previous research.

Key pain points
• Difficulty
• Lack of time
• Lack of motivation
• Distractions

Drinking coffee and tea

• Coffee and tea drinking are participant's most common habits.

• Coffee and tea are consumed at the same time daily.

• People spend their coffee and tea time unproductively.

• People have an emotional connection with their coffee and tea.

• People frequently describe coffee time as a “ritual.”

Reasons for meditating

• Reducing stress
• Improving focus
• Improving mental health

Guided meditations are helpful

Participants liked the narration of guided meditations. The Narration kept them focused and made learning to meditate easier and less daunting.

Personas

Based on interviewees and research - Personas of coffee and tea drinking meditators were invaluable tools for making design decisions about features and visuals

To better represent research findings & users, three personas were created. These personas proved to be invaluable decision-making tools when determining important features and visual design.

Insights from research and interviews were used to identify three user personas of common user archetypes.

These people want to meditate but feel that they either do not know how or don’t have time.

Identifying these three personas and understanding their goals, needs, and wants, allowed important design decisions to be based on data rather than intuition.

View full personas

Ideation

With research and synthesis insights in mind, the next step was to determine the best way to incorporate meditation into users’ lives.

Brainstorming

To quickly and efficiently collect ideas based on my research - I used Miro to create a mind map to help me organize possible directions for the project.

Potential directions

An app that offers meditations for a variety of activities so that people can meditate while doing their favorite hobby.
A combination of coffee drinking and meditation.
- An app that offers guided meditations for making and drinking coffee - possibly with a store for coffee making merch.
"Meditation school" where sessions are more formal than normal guided meditations and users are taught more about the theory, history, and practice of meditation.

Determining MVP

Getting ideas down was the easy part - the challenge now was to identify what was essential.

Why coffee and tea meditation

Coffee & tea drinking were the most common and consistent habits among those surveyed and interviewed
Coffee/tea time is not used productively
People have an emotional connection to their coffee/tea
People make time for coffee/tea daily - and almost always at the same time each day
People who drink coffee or tea know who they are and identify as coffee/tea drinkers - easy to identify and appeal to potential userbase

Potential for lifestyle & brand expansion

Coffee, tea, and meditation are all enormous and profitable industries with room to grow
Partnerships with local coffee shops/roasters
Merch - coffee supplies, mugs, etc.
Monthly curated coffee delivery

Why not 'any habit' meditation

Scope of a general app is enormous - especially for an MVP release
No way to account for all possible habits
Allowing custom habits would introduce a host of issues for a guided meditation app
Lack of focus - too many options could lead to choice paralysis or cognitive overload
Hard to home in on a specific userbase
Methods of integrating meditation with different hobbies could be entirely different - necessitating lots of highly specific & complicated features

Storyboarding

Storyboarding helped establish a holistic view of the user’s journey without diving into specifics of what needed to be included in the final app. It provided a better perspective into what users would be doing, and what would be happening around them when using MugZen.

User Stories

Writing out user stories helped organize users’ goals, making it easier to focus on what each persona’s needs were. Distilled down, the results were the three main goals of drinking coffee or tea, learning to meditate, and using time more efficiently.

User Story Map

The story map allowed me to take the user stories I had written out and organize them to find where they overlapped or differed. I was able to determine different critical features and those which were less critical.

MVP Features

After completing the above steps - insights indicated that essential features for a coffee and tea based meditation app would be guided meditations, educational content, a curated content library. At first I also thought a meditation timer would be important but this feature was eventually cut.

After reviewing the research, and personas three main tasks that all user archetypes wanted to accomplish became clear. An MVP release would have to address each task to be successful.

Users three main tasks

Learn to meditate
Drink coffee or tea
Use limited time efficiently

Guided meditations

Guided meditations are a standard feature of meditation apps for good reason - interviewees and research cited guided meditation as an easily accessible way to learn how to meditate and to tackle different topics while meditating.

Educational content

Interviewees cited wanting to learn more about the origins of meditation techniques and the history of meditation, among other related topics. Having short informative lectures adds value to the app and helps to strengthen users understanding of what they are doing.

Curated content

Research and interviews indicated that meditators have different needs and motivations. Content needed to be able to accommodate the different reasons someone might be meditating and, relevant content needed to be delivered directly. For example: a user who always listens to stress reduction meditations should be served stress-related content.

Cut Features

Features that didn't fit into the scope of the MVP

Meditation timer

Redundant - cut from MVP

Originally thought to be an essential MVP feature, the timer was eventually cut. It was unnecessary as a standalone feature, since it could easily be listed as a meditation in MugZen’s library. It was replaced by the profile screen.

Merch/ supply store

Potential future feature

Eliminated due to non-essential use case. Buying coffee, tea, or meditation supplies is not a priority or goal of any user persona and was only ever briefly mentioned by interviewees. However, this could become an important source of revenue as the company grows.

Brewing instructions

Potential future feature

Eliminated due to scope. While it would have been nice to help users brew their coffee, there were too many variables to contend with. This feature alone could be an entirely different standalone app. Additionally, interviewees never mentioned needed help brewing their coffee or tea.

Design

The task: deliver curated meditation content to people who have 5-15 minutes to drink their coffee or tea.

User flows and sitemap

Completing user flows and a sitemap allowed me to keep track of what users needed to do in the app and how they needed to get there. The process of creating these artifacts also helped me determine the screens I would eventually need to create.

Sitemap

The sitemap allowed me to keep the types of screens that were needed and their hierarchy in mind as I determined the paths users would need to take through the app. It also helped eliminate redundant screens.

User flows

I determined users red routes by combining insights from user stories and personas. This allowed me to build out user flows that represented the most important tasks that users would need to complete and the steps they would need to take along the way.

Sketches and wireframes

Next, sketches and wireframes were employed to visualize the layouts of different screens, identify important design elements, and to use for the first round of testing. Testing early was important since it allowed me to validate design decisions, and to uncover which decisions needed to be revised.

Sketches

Sketches allowed me to quickly figure out the layouts of key screens and the elements that needed to be present on each without getting bogged down in the details like pixels and fonts.

Wireframes

Wireframes further refined and clarified the layouts of key screens. These initial wireframes were made into wireflows to show how users would navigate across the app. They were also linked together into a preliminary low fidelity prototype to facilitate the first round of user testing. As stated, it was essential to test at this stage to gauge whether designs were usable and met user’s needs.

Wireframe User Tests

In order to test whether the layout and navigation of the app was intuitive, I conducted a round of user testing with five participants.

Key findings

Although the visual design was usable and intuitive - the filler copy that I had employed confused some participants.
Slight friction during onboarding.
The search tab was redundant, participants expected to be able to search in the explore tab.

Recommendations based on feedback were to focus on workshopping the copy and onboarding, and to eliminate the search tab.

This screen confused participants since there was no clear way to close the overlay.

As a result, this screen was eliminated, and the onboarding reworked.

Style Guide and Branding

Before high-fidelity designs were created, a style guide and branding were needed. The result was MugZen - which is kept consistent with clear brand and visual guidelines.

In order to start the high-fidelity mockups, I needed to make some important decisions about the look and feel of this app.

It was essential to spend time creating a mood board, brand guidelines, and a style guide.

These outputs helped distill insights from all of the previous work into a cohesive product that appealed to my users while staying consistent visually and tonally.

Mood Boards

Mood boarding provided me with a lot of inspiration for colors and UI styles. It was during this process that I worked out the bulk of the branding, the name MugZen, and the logo design.

My first intuition was to use French Cafés for aesthetic inspiration, but mood boarding helped me see that their colors were too loud for a meditation app which aimed to be peaceful and friendly - prompting a turn to a softer, more nature-oriented color palette.

Logo Evolution

During mood boarding, considerable effort was put into designing a logo that effectively represented the brand.

Initial logo concepts included a cartoony mug who could also act as a brand mascot or ambassador.

However, after considering my personas, and the fact that my target user base includes working professionals - the cartoon concept was deemed too playful and unprofessional.

Eventually, I changed direction and focused on a more mature feel for MugZen and its logo.

Style Guide

Referring to the style guide as I was designing high-fidelity mockups was a big help in keeping MugZen consistent and organized. Having design rules and assets in a central location was key to a smoother and more user focused design process.

High-Fidelity Screens and Prototype

Earthy greens and soft images served as a basis for making MugZen tranquil and welcoming, however, user testing is what really made it a more user-friendly and delightful experience.

High-fidelity prototype

To get a feel for how MugZen would work if it were live, a high-fidelity prototype was built. This was a great tool for the next two rounds of user tests, as participants were more engaged by the illusion of a completed app and were able to give more insightful feedback.

Microinteractions & Animations

A big part of making the prototype feel more polished was the addition of animation and microinteractions. These made the prototype feel more alive and added an element of delight and fun. The animation of the media player was especially well-liked during user tests.

Testing, Critiques, Iteration

Two rounds of testing and several design critiques were conducted on the high-fidelity prototype. Feedback from each led to a series of changes. Some of the most significant were to the visual design of MugZen’s onboarding and to the media player. There were also quite a few changes made to the copy throughout the app.

...and then as the time passes, the mug slowly drains. That's so cool... that was so cute!

- User test participant

I feel like this is pumping me up. I've never meditated before. I drink coffee every day. This is a great!

- User test participant

Hi-Fi visual noise

Using images and brand colors instead of grays and wireframe placeholders introduced visual noise which disrupted the hierarchy and flow established in wireframes. Several elements and screens needed to be adjusted or entirely redesigned as a result.

In the future, incrementally increasing fidelity and adding images and colors earlier in the design process should mitigate these issues.

Onboarding Copy and
Visual Changes

The darker screen didn’t mesh with the visual design of the rest of the app. The sudden change from dark images to the light background throughout MugZen was found to be too jarring and was changed.

Redesigning elements

Feedback led to a redesign of the meditation time picker. The change from the original clock design to the new animated mug design paid off, as test participants all commented on how much they enjoyed interacting with it.

Adding a Tooltip

During testing, the new picker for meditation lengths caused friction when some test participants encountered it for the first time. Adding a tooltip that appears the first time a user tries to play a meditation eliminated that friction in subsequent tests.

Animation & Adding Delight:
The "Transforming Mug"

The clock widget was an area of opportunity — changes could be made to add delight and better visual consistency.

I changed the widget from a more traditional clock/timer into a top-down view of a mug with the handle indicating the session length selection.

Test participants got extremely excited when the mug transformed for the first time and they were prompted to start their meditation.

Simple UI patterns like this can make a normal interaction memorable.

Takeaways

Lessons Learned

Translating lo-fi to hi-fi can lead to issues.
The simplistic/minimal lo-fi wires can be overwhelmed by visual noise etc. when images and colors are introduced.
In the future, I would add in images and colors incrementally (even just as placeholders) to validate design decisions and test for potential future hierarchy issues.
When attempting to differentiate an app from the norm, there are a host of potential usability issues that may be introduced (i.e., clock widget). In the future I would test these elements early and often or just default to industry standards.
Delicate balance between too much and too little onboarding
In the future I would focus on testing the onboarding and its copy much earlier in the process.
Filler copy can be confusing in user tests
In the future I would either replace wireframe copy with gray boxes/lorem ipsum or spend more time at the beginning of the process refining the copy to minimize confusion.
Creating a new product from scratch and going through all of the steps of the UX & design thinking process is both challenging and rewarding. It is fascinating how research can translate into new ideas and connections that may not have been obvious previously.

Next Steps

Further hone the onboarding process and test more iterations of length and copy.
Iterate on and test better ways to explain premium and free membership options.
Build out a payment flow for premium subscriptions.
Further polish the clock widget’s mug animation.
Iterate on how users change the length of a session after they have already started it.
Add cut features such as the store, brewing instructions, and collapsed player that were cut from the MVP release.

Case Studies

MugZen - Clock Widget Mini Case Study

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

‍Email
Gregory@Guma.Design

Droves Mindfulness Garden MugZen - Clock Widget
mini case study (MugZen)House 2 Home

Overview

My role

Process

Double Diamond

Steps and outputs

Discovery

Synthesis

Ideation

Design

Discovery

Key secondary research findings

Keystone habits & habit pairing

Habits Americans have

What is Meditation?

Why people meditate

Why people don't meditate

Tea meditation

In the US, meditation apps are used by millions of women and men from 18-65 years old & generate almost $1 Billion annually

Competitor Research

Meditation app facts

Heuristic analysis insights

Surveys and interviews found 100% of respondents drink coffee or tea daily, that they don’t use coffee or tea time productively, and that they feel they do not have time to meditate.

Survey

Key Findings

Interviews

All interviewees struggle to make time for meditation

Interviewees cited their coffee or tea's emotional impact, & ‘ritual’ nature

Interviewees don’t use coffee or tea time productively

Synthesis

Organized into an affinity map, interviewees’ responses showed clear patterns - revealing important similarities between meditators.

Common pain points

Drinking coffee and tea

Reasons for meditating

Guided meditations are helpful

Personas

Personas

John Robertson

Experience

Goal

Stress

Workload

Coffee & Tea

Emma Cooper

Experience

Goal

Stress

Workload

Coffee & Tea

Leslie Rao

Experience

Goal

Stress

Workload

Coffee & Tea

Ideation

Brainstorming

Potential directions

Determining MVP

Why coffee and tea meditation

Potential for lifestyle & brand expansion

Why not 'any habit' meditation

Storyboarding

User Stories

User Story Map

MVP Features

Users three main tasks

Guided meditations

Educational content

Curated content

Cut Features

Meditation timer

Merch/ supply store

Brewing instructions

Design

User flows and sitemap

Sitemap

User flows

Sketches and wireframes

Sketches

Wireframes

Onboarding Copy and
Visual Changes

Animation & Adding Delight:
The "Transforming Mug"