Sleep Machine

Rebranding and redesigning a top iOS health & wellness app.

Project Overview

Task

My task was to choose an app, analyze it, compare it to its competitors, and redesign it. This project was capped at 5 days.

To skip to my prototype, follow this link.

I redesigned Sleep Machine, a noise machine that is one of the most popular paid iOS wellness apps, and has been featured on CNN, USA Today, and NPR.

Rebranding

Redesign

Original app

In initial rounds of testing, several users mentioned that the electric blue and sharp shapes used through the original app felt mechanical and jarring. To make my design feel more subtle and soothing, I chose to use softer gradients, rounded shapes, and warm tones.

My competitor analysis of apps such as ShutEye, BetterSleep, Headspace, and Calm validated my idea to make the branding more subtle and approachable.

Style Tile

Brand Specifics

Sleep Machine originally used Quicksand for its logo and SF Pro - along with iOS colors and elements - through the rest of the app. I applied the casual Quicksand font through the app and paired it with a rounded icon family to represent both actions and sleep sounds. I drew inspiration from Pinterest photos of night skies that included playful elements like rollercoasters or moons melting into waterfalls.

Home Screen

Redesign

Original app

Simplifying the navigation.

I prioritized playing sounds, finding new sounds, and viewing liked sounds on user profiles. adding other menu items as actions on the home screen.

Reducing ambiguity and cognitive load.

In the original app, all displayed graphics were buttons. I simplified the sound controls and added an "edit mix" option.

Prioritizing brand consistency.

I designed the volume sliders to look like moons, added friendly messaging, and used a soothing light purple with a sufficient contrast ratio.

Information Architecture

Design Decisions

Condensed all sounds and mixes into a searchable library with filters.

Included instructions to set expectations about mixes and prevent user error.

Chose cover photos for mixes to align with what users see on apps like Spotify.

Redesign

Original app's separate libraries

Simplifying the Timer

Redesign

Original app's two-step process

In my interviews, users said that they would only use the original app's "Alarms & Timers" functions to make their sleep sounds fade out. I made setting a fade out timer a one-step process.

I only use white noise to fall asleep, but don't need it to play through the night.

I already have all of my alarms inputted in Apple, but would use the fade function.

Prototype

My prototype is available here. You can view the original app's flow by clicking the "app before redesign flow" on the sidebar of my figma prototype.