Project Details

Background

The team at DreamSleep approached me about me building new features around their sleep meditations and breathing tools. They wanted to completely redesign their existing user experience around audio in order to equip people with the tools that they needed to fall asleep that weren’t currently present in traditional meditation apps.

As someone with a decade of experience working in music and audio engineering, and probably the same amount of time dealing with my own insomnia, I was excited for the challenge of exploring different ways to help users fall asleep with the use of helpful meditation tools and breathing exercises.

Research

In looking at other meditation apps that were currently on the market we identified a few areas we believed we could improve upon.

Our hypothesis was that by using audio guided diaphragmatic breathing techniques, alongside relaxing music, we could effectively help users to get a relaxing night of sleep.

Audio Generation

In order to generate large amounts of audio that would guide users through diaphragmatic breathing, I put my hacker hat on and we wrote a python script that would apply gain changes to an audio sample to simulate the inhale, hold at the top, and exhale.

By automating this in python, we could generate different combinations of these 3 phases to produce different results for the users (Example: 4 count inhale, 4 count hold at the top, 4 count exhale)

Python code example

def apply_gain_envelope(audio, inhale_time, hold_time, exhale_time, sample_rate=44100):
    # Convert inhale, hold, and exhale times to number of samples
    inhale_samples = int(inhale_time * sample_rate)
    hold_samples = int(hold_time * sample_rate)
    exhale_samples = int(exhale_time * sample_rate)
    
    total_samples = inhale_samples + hold_samples + exhale_samples
    
    # Extract raw audio data from the AudioSegment
    audio_samples = np.array(audio.get_array_of_samples())
    
    # Generate gain envelope
    gain_envelope = np.concatenate([
        np.linspace(0, 1, inhale_samples),  # Inhale (ramping up)
        np.ones(hold_samples),              # Hold (constant gain)
        np.linspace(1, 0, exhale_samples)   # Exhale (ramping down)
    ])
    
    # Adjust gain by multiplying audio samples with gain envelope
    gain_adjusted_samples = (audio_samples[:total_samples] * gain_envelope).astype(audio_samples.dtype)
    
    # Return new audio with gain adjustments applied
    return audio._spawn(gain_adjusted_samples).set_frame_rate(sample_rate)

Layering Sounds

After initial user testing, we wanted to give our users the ability to layer music, breathing sounds, and background noise.

This presented a unique challenge on how to make all of these moving pieces work together. We spent a few weeks working on the control panel interface that needed to allow users to control individual levels of each audio and the breathing pattern.

Visual Design

The primary goal for the visual design of the user interface was  to feel calm, relaxing, and conducive to sleepy time. We chose a color palette consisting of deep blues, soft purples, and warm hues traditionally associated with relaxation and tranquility to set the tone of the app.

The typography needed to inspire that same sense of calm while utilizing system fonts available on both iOS and Android. We opted for Raleway and Open Sans to keep the style minimalistic.

Cards, Screens, and Atomic Design

Through this process, we ended up with a large library of audio content - meditations, music, breathing exercises, ASMR, and more. All of this content also had subcategories and needed to be organized visually in a way that would make sense for the user.

This is where Atomic Design came in. We were able to build out components in Figma that were composed of different category icons, background colors, card sizes, and more that could work in a modular fashion to accommodate the complexity of the system.

Design System

Final Cards

Gradient Backgrounds

Icons

Sounds

Card Construction

Conclusion

The DreamSleep project really allowed me to combine my expertise in UI design, sound design, and audio engineering to create a personalized sleep tool that prioritizes ease of use.
‍
By focusing on visual simplicity, leveraging calming audio-guided breathing techniques, and rigorously testing with real users, we were able to design an app that not only addresses common user pain points but also provides a unique solution to help improve sleep quality. The final product successfully met the client’s goals, equipping users with powerful tools for relaxation and rest in a way that stands out in the crowded meditation app market.