"POCKET CAMPFIRE" MEDITATION MOBILE APP DESIGN

UX/UI DESIGN, RESPONSIVE WEBSITE reDESIGN
SUMMARYRole:
UX/UI Designer, Visual Designer

Team:
Solo designer (Designlab bootcamp capstone project)

Duration:
1 month

Tools:
Adobe XD, Invision
View Prototype
TL;DR
Problem: Meditation is a great way to help navigate the daily stressors of life, help increase levels of focus, and aid with sleep. I discovered that despite all the existing meditation app options, many people who might want to start meditating don’t know where to start, and many of those who currently meditate struggle with staying consistent with it.


Solution: I designed a meditation and mindfulness mobile app which aims to make choosing meditation activities and sticking with them fun and easy. The app is designed to include small bite-sized experiences which require only a single minute of participation, making it easy for anyone to pull out their phone from their pocket and experience the coziness and relaxation that one might feel from sitting around a campfire!
MAKING MEDITATION FUN AND EASY
As someone who experiences feelings of anxiety/panic and depression and has benefited from meditation in the past, I wanted to explore this topic which has a lot of personal value to me but could also help many others as well.

The scope of this phase of production will focus on creating the visual design and user flow for one primary meditative feature for the app (e.g. guided meditations, audio/music-focused meditations, sleep aid, etc.), to be determined by the research phase.
WHY AND HOW DO PEOPLE MEDITATE?
Since there are many other meditation apps on the market today, each with their own slightly different focus, the goal of the initial research phase was to:

• Unveil what people’s current meditation habits are
• What they struggle with the most when trying to form new meditative habits or stay consistent with existing ones
• How I might be able to delight the user and best meet their needs such that they want to keep coming back to use this app every day

Research for this phase consisted of:
• Competitive analysis of other meditation apps
• Surveys of people who currently meditate (or have in the past), and those who are wanting to start a regular mindfulness practice
SURVEYSOnline surveys were conducted with people who currently meditate (or those who have in the past) as well as those who are interested in trying it out for the first time. In order to gain a wide range of data, the online survey was favored over 1:1 interviews for this round of testing.

36 survey participants

23 identified as female; 13 identified as male

Ages ranged from 18-74

Within the past 3 months, on average:

25% of people did not meditate at all

41.7% of people meditated 1-2 times a week

13.9% of people meditated 3-4 times a week

2.8% of people meditated 5-6 times a week

16.7% of people meditated every day
KEY RESEARCH INSIGHTS“My life is chaotic and full of anxiety. I want to be more calm and think straight, feel more peace at heart.”

- A survey participant


“From my understanding, meditating helps with stress management, so I'm interested in practicing meditation for my stress control. I believe meditation will help me to clear my thoughts and de-stress.”

- A survey participant

This initial research phase revealed some key insights:
  • Participants understood that meditation offers positive benefits (whether they currently meditate or not), and frequently mentioned wanting to “feel relaxed and calm”
  • For those who currently meditate, almost every participant mentioned something related to wanting to alleviate their stress, manage their anxiety, have a calmer mind, and/or be more present in the moment as reasons why they started meditating or continue to meditate
  • Another major pain point that was mentioned multiple times was some people felt like they lacked motivation to or didn’t know how to stay consistent
  • Some people who are not current meditators but would like to get into it felt like they didn’t know where to start given the overwhelming amount of options on some of the larger apps (however, a few people who were in a regular practice and use the popular apps appreciated all the guided meditation choices available)
  • A few participants expressed feeling like some of the apps were cost-prohibitive
It was fun and enlightening to have some of my previous biases be challenged as well.

For example, one surprising factor in seeing this data that challenged a previous bias I had was that more people than expected meditate daily (I thought more people would struggle with daily meditation and thus was expecting that number to be closer to 1).
DESIGNING AN EASY AND FUN MEDITATION APP
From this research, it seemed that most people understand that meditation provides a positive benefit in their lives, but they felt overwhelmed by the amount of options available in the current apps and didn’t know where to start, how to stay consistent, or in some cases felt blocked by the cost.

There were many directions this app could be taken (including adding a slight gamified element to it to keep people coming back), thus the following questions came to mind:
How can we make meditating as easy and bite-sized as possible?

How can we make meditation fit into people’s current schedules so that it doesn’t feel like something extra, but is really easy for people to accomplish every day (and is inherently motivating for people to continue to meditate)?
PERSONAThere seemed to be 3 main categories of people: those who do not currently meditate but are interested in doing so at some point in the future; those who currently have some form of meditative practice but struggle to stay consistent; and those who are really dedicated and meditate very regularly and consistently.

For the sake of this project, I leaned towards focusing on the first two groups of people, and making a user persona for each. These categories of people seemed to be larger and could benefit from some help in the form of an app that would make it really easy for them to get into and stay consistent with meditation.

1) A busy accountant who wants to feel less stressed. He occasionally meditates but struggles to stay consistent with the practice since he’s concerned it’ll take too much time out of his busy work day.

2) A UX designer who doesn’t currently meditate but wants to start doing it since she has heard of the positive benefits from her friends. She is looking for an easy method to follow so that she can stay consistent with this new habit.
USER FLOWBased on the research, I decided to experiment with giving people a choice for how they engage with the app: they can either select a specific experience or answer a few basic questions on how they’re feeling and let the app curate a meditative experience for them. I created the following user flow to reflect that:
APP NAME: POCKET CAMPFIREI wanted this app to feel unique but still imply some sense of calmness, relaxation, and ease of use. After many iterations and running names by fellow designers for feedback, I landed on “Pocket Campfire: Relaxation and Mindfulness”.

This name implies that the coziness and relaxation of a campfire sits within your pocket, and it also helped inform the visual design moving forward.
VISUAL EXPLORATIONS
An important factor for me based on my own experiences as well as the research gathered was that the app needed to look and feel inviting and calming. If a meditation app that aims to promote feeling calmer has a cluttered UI or overwhelming color scheme, then that defeats the purpose.
MOOD BOARDI started by creating a mood board on Pinterest, gathering examples of some other existing apps and visual design concepts that I felt promoted a sense of calmness and relaxation.
LO-FI WIREFRAMESI first created some paper sketches to mock up some ideas for the layout. Once that was done, I moved onto creating low fidelity greybox wireframes to lock in the visual hierarchy, layout, and typography. To speed up this process, I used a UI kit.
Pocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframes
Pocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframesPocket Campfire low fidelity wireframes
HI-FI UIBased on my mood board and feedback received along the way, I created the background visual design in Adobe Illustrator.
I brought those elements into Adobe XD where I created the first iteration of the high-fidelity UI. Here are a few select screens from the v1 iteration:
TESTING THE HIGH FIDELITY v1
From here, usability tests were performed on the hi-fi UI design to see if the core user flow made sense and if the visual design of the app promoted a sense of calmness and relaxation. Specifically, the feature that I started prototyping as part of the initial user flow was a sound-based meditation experience.

The prototype was created using Adobe XD.
View Prototype

4 test participants

2 identified as female; 2 identified as male

Test performed in person or over screen share

All have meditated in the past or currently meditate using an app

TASKS
  • "You’ve opened the app for the first time! Please walk through the onboarding process and get to the sign in page."

    "Follow-up question: Great! Was there anything confusing or frustrating about the onboarding instructions? Could you recount to me how you think this app works?"
  • "Sign in to get to the home page of the app. From here, let’s say you would like to do a short meditation activity to try and feel more calm. Please walk through the process of how you might do that."
After these two tasks, test participants were given the opportunity to share any additional thoughts/questions/concerns and were asked if they might use an app like this to help them in the future.
KEY INSIGHTSOverall, all participants were able to walk through the app’s test flow smoothly and did not run into any major roadblocks that prevented them from moving forward.

A big takeaway was that 75% of participants commented about feeling like the “Guided” button being in the same row as the other activities didn’t make sense to them. Participants felt like since once was effectively a set of activities, whereas the other buttons were individual activities themselves, they should be visually separate on the home page.

One participant had a lot of questions and comments regarding the flow of the ‘Guided’ mini-survey. This person felt like they wanted to be asked more questions, such as “how much time do you have to dedicate to a survey right now?”. A different participant was wondering if the different buttons in the survey were each linked to a different preset.

One participant mentioned some concerns about the social aspects of the app. Given that right now there isn’t a way to actually engage further with the community (and that there’s just a text on the home page that says how many other people are using the app right now), she felt like she experienced more feelings of loneliness and distance from the community than actually feeling connected with them.

Overall the Listen page functionality made sense to people once they clicked around. Some were confused if the audio would play right away or if it would fade in. One participant really liked the look and layout of the sliders. Others really wanted a pause button on the music, as well as a slider to control the music. Lastly, one participant felt like the ‘presets’ button on the left could be better represented by a heart or star icon instead.

Everyone liked the visual design of the app and found it to be very pretty and calming. One participant said he’d really like to see the clouds and the fire animated to make the scene come to life more but understood that would be a nice-to-have, not an urgent feature addition.
HI-FI UI v2Given the feedback received this round of testing, the main focus for the next UI iteration of this app was to adjust the UI on the home page to make the ‘Guided’ button be stand-alone and be given more importance in the visual hierarchy. I also worked on some visual tweaks for the other pages, changing some of the icons on the Listen page and onboarding sequence. I also removed references to any social features for now.
Pocket Campfire high fidelity UIPocket Campfire high fidelity UIPocket Campfire high fidelity UIPocket Campfire high fidelity UIPocket Campfire high fidelity UI
Pocket Campfire high fidelity UIPocket Campfire high fidelity UIPocket Campfire high fidelity UIPocket Campfire high fidelity UIPocket Campfire high fidelity UI
FINAL THOUGHTS AND NEXT STEPSOverall, I think this app has a lot of potential to help people. However, in its current iteration, Pocket Campfire needs a lot more work to get to a usable and effective place.

The biggest issue I feel is, while I have some test data to show that people understand the user flow navigating through the app, I have not yet tested to see if the meditation activities themselves are effective at promoting a sense of relaxation.

Additionally, I do not yet have information about whether the app effectively helps people choose and stick with a meditation practice and stay consistent with it. It is possible that in its current iteration, the app is trying to do too much, so further prototyping and testing will help clarify a lot of these questions and concerns and inform the next iteration of design. It was validating though that many people liked the idea behind it, thought the visual design was relaxing, and enjoyed the slight gamified elements.

Back to top