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?
Explore the Prototype
Explore the Prototype
Explore the Prototype

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.