Sound & Color
The Ambient Sound & Meditation App
Download Case Study | Explore Prototype
The Problem
Meditation apps are on the rise, but they present a big challenge. While meditation is a tool for connecting to the breath to reduce anxiety, break unhealthy habits, and be more mindful, apps become popular by getting users addicted to repetitive use.
Is a meditation app a paradox?
After investigations into industry leaders in the meditation space, the idea of Sound & Color arose. While there are plenty of successful meditation apps on the market, Sound & Color aims to be an outlier, a refreshing relief from apps that are designed to reward us with dopamine in exchange for their use.
The solution is a delicate balance. By providing users with exactly what they need to meditate, focus, and nothing extra, users can more effectively meditate, focus, and establish healthy routines that do not encourage additional screen time.
I created the Scription mobile app as part of a solo project where I was the UX Designer, UI Designer, and Usability Test Moderator.
The Process
Logistics
Specs: Designed & prototyped in Adobe XD for iOS & Android Timeframe: Oct-Nov 2021
Role: UX Designer, UI Designer, Usability Test Moderator
Goals
- Promote users to meditate, focus, and develop healthy routines without spending any extra time with the app
- Create an inviting and friendly interface that doesn’t hinge on unnecessary dopamine rewards
Research
The research process began with secondary research to determine what this rise in mindfulness & meditation apps can be attributed to, as well as how popular they have become.
To begin, I gathered information on the rise of meditation and mindfulness apps, including what caused their growth as well as any research that was conducted on their effectiveness. This would allow me to address any potential problems with existing apps.
The Rise of Mental Wellness Apps
- Statistics say 51.5 million individuals in the United States were affected by mental illnesses like anxiety, schizophrenia, major depression, etc. and 43.6% of the population received treatment of mental illness in the year.
- Mental Health Apps Market is expected to grow at a CAGR of 20.5% from 2021-2027 to reach US$ 3.3 billion by 2027
- There are currently over 300,000 health applications in the mobile app stores worldwide, with the mental health segment accounting for the largest growth in the market.
- The top 20 mental wellness apps in the U.S. hit 4 million first-time downloads in April 2020. That is a 29% increase from 3.1 million in January.
Mental Health Apps Market Stats
Heuristic Evaluations of Meditation & Mindfulness Apps
In order to find the solution, we can both study how other mindfulness apps work, whether they give constant rewards and have information overload or not. We can also look to other types of apps that aim to address this issue and prevent addictive behaviors.
"Every extra unit of information in an interface distracts."
I determined aesthetic & minimalist design criteria was the most important of Nielsen's heuristics, as sensory overload is one of the main challenges of creating a meditation app. I included highlights of those evaluations here:
Headspace - Average 🔶
While the aesthetic of Headspace is nice, well-designed, and clean, it’s not necessarily minimal. The bright colors, big blotchy shapes, and silly illustrations do feel friendly, but not necessarily meditative.
Insight Timer - Good 👌
Insight Timer’s light mode is more simple and calming than Headspace. It has less colors, illustrations, and visual information than Headspace as well, which enables it to feel more like a breath of fresh air, away from a traditional media player app.
Co-Star - Outstanding ✅
Co-Star’s aesthetic is one of the most minimal apps I’ve encountered. It’s extremely refreshing and feels more like reading a book than engaging with an app. This extreme minimalism would be perfect for a meditation app to allow users to feel refreshed.
Conclusion
The initial research conducted was incredibly helpful to determine a few ideas for a meditation app. With this knowledge, I was aware it would be a challenge to strike a balance between just enough information and overwhelming. Moved forward, I was able to implement a few strategies from these apps and make improvements when needed. Click here for the full heuristic analysis.
User Personas & Flows
Mindful Michael (New User)
As the app should encourage new users to sign-up for the premium version of the account after creating an account, Mindful Michael is the persona that represents the new users. Mindful Michael is interested in meditation and mindfulness. He is a beginner and only knows meditation and mindfulness as buzzwords. He wants to jump on the trend by diving headfirst into meditation to help with his anxiety, focus, and sleep.
Calm Camille (Existing User)
In addition, the app should also encourage free users to sign-up for the Premium account. Calm Camille represents the existing users who are currently on a free plan. In order to encourage users like Calm Camille to sign-up for the paid, premium version of Sound & Color, there would need to routinely be enticing offers or reminders of what they’re missing. Camille is an advanced meditator who has been using the app for a year, and doesn’t feel like she should have to pay to meditate. She also uses focus music & ambient sounds during work.
"Everyone talks about morning routines, and I want to see if there’s anything actually behind them."
Branding & Identity
From the user flows, I sketched a few screens to prepare for wireframing and generate ideas for the key features to include based on the goal of making the app as simplified, non-intrusive, and calming as possible.
The identity and branding of Sound & Color was important to consider when designing the app as it is crucial that it is aesthetically minimal, simple, and refreshing. The goal is to have its interface be just inviting enough, without encouraging users to spend extra time with it.
I created a moodboard of other apps and took inspiration from the simplistic shapes of Bauhaus and the experimental musical style of graphic notation, which is the visualization of music in shapes and forms other than musical notes, as part of Sound & Color is ambient music and sounds.
Name & Moodboard
The name Sound & Color also has a musical inspiration, as it is the name of an Alabama Shakes song. It refers to the ambient sound player in the app, as well as the focus on the senses that meditation requires.
Although the moodboard is very colorful, part of the focus on a minimal, sophisticated, and simple interface looks like sticking to a largely black and white or monochromatic color palette.
Style Guide
Before starting on sketches, I generated a few logos and variations, color palette, and font choices. Alongside being calming and simple, I wanted the designs to have an elegant and sophisticated feel.
The accent color choices red, teal-ish blue, yellow, and deep blue are reminiscent of the primary colors of Bauhaus style and will be used minimally throughout the app.
Sketches
Wireframes
Bottom Navigation is Not Always Necessary
I wanted to reduce the amount of options and actions that a user can take in order to decrease information overload and encourage users to spend more time meditating and less screen time.
Based on this, I replaced the bottom navigation with a central dashboard or home screen that has three tabs that users will navigate between: Meditate, Focus, and Routine.
Dark Mode/Light Mode Changes Based on Screen
An important decision I made during wireframing was to allow the app to play with contrast, dark and light mode based on the content of the screen. Meditation takes on a light screen, and ambient sound takes on dark mode, while other screens contain elements of both light and dark.
This decision adds a dimension to the app that represents the fluid changes in our everyday lives of night and day, meditation and focus, sound and color.
Prototype
After the wireframes, I embarked on the first round of usability testing.
For this first round of testing, I used the wireframes /low-fidelity designs to validate the direction I was heading in for Sound & Color.
The most important aspect of the usability testing was to determine if the initial screens, layout, and structure were functioning properly. I did the usability test with three participants, all in-person. I was able to use Adobe XD connected from my phone for the test while taking notes on their responses. Each test lasted approximately 15 minutes.
A few questions I asked included:
- Please view the see what’s new: My Routine. What are your options on that page?
- Can you create an account using your phone number?
- Can you complete the goal, meditate twice daily?
Solutions/Action Steps:
- Add more options for sign in and don’t provide a hierarchy for their options
- Add a progress bar and not the scrub, but ask about the scrub in the 2nd round of testing
- Decide on whether 2-step verification should be a part of the app
Wireframes to High-Fidelity Mockups
After the first round of testing, I began on high-fidelity mockups. A few key changes I made included adding more sign-up options, updating the player, and including images.
Changes in UI
Before starting on the high-fidelity designs, I thought that I would keep the design largely black and white, with dark mode being a dark grey or black-ish color. However, after adding the colors I experimented with a deep black to light blue gradient. I believed the monochromatic color scheme added contrast and a nuanced feel over just black and white. The deep blue also is a calming, grounding, and sophisticated color reminiscent of the ocean.
Changes in UX
Based on recommendations from the first round of testing, I added one more control to the player to allow users to restart the meditation to the beginning. I decided to still not use the scrub bar, because it limited options for the users to encourage spending time with the meditation rather than the ability to fast forward. This was only necessary for the meditations, as the ambient sound did not need to be restarted.
Evaluate
In the second round of testing, I asked similar questions to see if the app was working better after the changes in UI and UX that were made.
I also added a few follow-up questions at the end of the tasks to get additional feedback:
- Did anything feel unnecessary?
- Was there anything missing?
- How does the app feel to use?
- How does the design make you feel?
- Is the app easy or hard to use?
"It does make me feel calm. It’s symmetrical, organized, and easy to navigate."
Key Findings from 2nd Round of Usability Testing
- The app is simple. All three of the participants found that the app was simple and easy to use. They were able to complete all the tasks with ease. This was one of the key components of what I sought out from a meditation app, so I believe that it was successful.
- What is missing? I wanted to ask users if they felt like there were any unnecessary features or anything missing. While one participant wanted yoga in the app, I didn’t think it was necessary in a meditation and ambient sound app so as not to over-complicate the simplicity of Sound & Color.
- Light or Dark? I also asked users an additional question about how they felt about the contrast between light and dark mode.
Next Release
One recommendation that was made during the 2nd round of testing was to add yoga as an option. This could be in a later release, but I wouldn’t add a different section for it. Instead, if a user searched yoga, there could be a guided meditation that would include yoga. This would keep the app as simple as possible.