Sleep App: Android & iOS UI Design

Sleep: a native mobile app for Android and iOS. UX and UI design work by Ellen Tisdale.

Who needs an app to help them sleep?

• 35.2% of all adults in the US report sleeping less than seven hours per night on average1
• Between 10% and 30% of adults struggle with chronic insomnia2
• Sales of melatonin supplements in the US grew from $62M in 2003 to $378M in 2014, an increase of 500%3

1 – https://www.cdc.gov/sleep/data_statistics.html
2 – https://www.ncbi.nlm.nih.gov/pubmed/28348990
3 – https://www.ncbi.nlm.nih.gov/pubmed/28095978

Research shows that many people will have trouble sleeping at some point in their lives. Having used some of the apps that currently offer support for this issue, I was already aware of some of the problems with these existing apps. The objective with designing this new app was to delve deeper into the ways in which existing apps in this area could be improved, and offer an innovative, user-friendly solution.

My role: UX/UI designer
Project duration: one month
Tool used: Adobe XD

Brainstorming Key Features

Starting from my own experience using apps to support sleep issues, I decided that this app would need to offer at minimum:

• A search feature to find audio files on specific topics
• A variety of audio content, in story form or ambient sounds (dubbed “Soundscapes” for this project)
• The ability to curate a list of favorite audio files

With these features in mind, I developed the first iteration of a user flow diagram.

user flow diagram demonstrates how a user could navigate from the home page to an Account page, Stories page, Soundscapes page, or Study page, and subpages within those sections.

First Wireframes

With some ideas in mind for this app already, I started by designing digital wireframes.

I began incorporating icons and typography specific to each platform immediately. The ideal Sleep app is intuitive and easy to use; designing native apps would facilitate this experience.

mid-fidelity landing page mockups

I experimented with a few color palette options early on, trying out ideas for creating a gentle atmosphere.

mid fidelity Stories page wireframes

Some experiments with color, such as the purple hues in the iOS screens here, did not meet accessibility standards, and were discarded.

mid fidelity Study page wireframes

While considering how color choices could impact people from different cultures, I examined the evidence collected by the International Colour-Emotion Association Survey, an ongoing research project conducted by Swiss psychologists.1

They found that regardless of cultural background, most respondents associate the color blue with relief, contentment, and interest. A smaller average number of respondents associate purple hues with pleasure and interest.

Given these findings, I decided that calming tones of blue would be the best fit for this project.

1 – https://www.colourexperience.ch/ongoing-projects

Competitor App Analysis

The Headspace and Calm apps both appear on lists of sleep app recommendations from 2020, 2021, and 2022.

As established leaders in this field, they provided insights into what makes a successful sleep support app. In examining these apps, I could also see a few ways in which they could be improved.

Calm and Headspace landing pages

Strengths

• Calm automatically switches to dark mode during the evening

• Calm Discover page includes a search bar with helpful hints for search keywords

• Both offer a wide variety of audio content

• Both allow audio files to be downloaded

Screenshots of Calm Discover page, Calm check-ins, and the Headspace Soundscape page

Weaknesses

• Key problem with Headspace: users must interact with bright white home page before navigating to Sleep area; favorite tracks are also only accessible via the homepage

• Headspace sleep stories offer a slider to hear more ambient noise or more voice; users may enjoy having more options to tailor their listening experience

• Both apps do not offer free content focused on sleep support; a competitor could offer free access to some content of this type

Screenshots of Calm and Headspace pages, illustrating the points made above

Refining Wireframes

I integrated some useful features from Headspace and Calm into my wireframes.

• Added search box to Stories page

• Provided suggestions for users while searching, including recently searched terms and popular search terms

comparison of first and second iterations of Stories page

• Added a share function, to facilitate promotion of the app via user shares

• Added direct link to Saved files in bottom navigation bar, for easy access

comparison of first and second iteration of individual Story page

• Added options to choose different lengths of time that sounds will play, and audio controls for stories

comparison of first and second iteration of Soundscape and Story pages

Favorite files were originally listed under My Account. To make these even easier to find, they were moved to their own page, named Saved, to fit the alliterative theme.

Comparison of original Account page, and new Saved page

Sound and Haptic Feedback

I decided to include a few subtle sounds and vibrations that would enhance the user’s interaction with the app.

Saved page highlights icons mentioned in text

When the star is tapped to save an audio file, a bell sound1 would briefly chime.

When users select a file to remove from their saved collection, they hold and drag the image towards the garbage pail icon. When the image is successfully dragged to that area, a low plonk2 would sound, confirming that the action has been completed.

1 – https://rcptones.com/dev_tones/
2 – https://youtu.be/M-V_eyIgDiA?t=113

Story page highlights icon to move audio backward by 15 seconds

Brief vibrations would be activated following functions that may not be immediately obvious while listening to audio, such as:

• Tapping to move story audio backward or forward by 15 seconds

• Tapping to change the length of time that a soundscape will play

Prototype Testing

I shared a prototype of each app design with four Android and four iOS users. Based on some of the common themes that came through in their suggestions, I tweaked a number of features.

Saved page, first iteration

Tester Feedback

“I don’t understand the icon with the cloud and person in it.”

Testers commented that titles would need to be short, and wondered how longer words would fit.

“It is not clear for me at first glance, how the trash icon works. Do you drag the saved items to it?”

Testers commented that it would take some time to become familiar with the meaning behind these icons, particularly the moon leading to the Soundscapes page.

Incorporating Feedback

Saved page, final screen

Added text below My Account and bottom navigation icons.

Provided larger cards and a horizontal scroll for all pages with lists of Stories and Soundscapes, to allow for a greater sense of spaciousness, and to permit longer words in audio titles.

Included a brief explanation of how to remove files from the Saved collection; this would appear the first time a user accesses this page while they have files saved.

Changed colors used in bottom navigation bar to offer higher contrast – previous color choices were not high enough to meet WCAG AAA standard. The darker colors are also a better fit for the overall dark theme of the app.

Access the prototypes here:

Android prototype

iOS prototype

final landing page mockups for android and iOS systems

Reflections

What went well

I enjoyed developing a color scheme for the app, exploring options for illustrations, and increasing my understanding of colour theory across cultures. Although I would like to further develop my skills in digital illustration, I did receive many positive comments about the aesthetics and illustrations from prototype testers, who described the app as “calm” and mentioned that the colors suggest a sleepy mood.

Testers also commented positively on many of the specific features that were considered improvements on the current apps in this space. Multiple testers appreciated having the option to hear audio files with male or female voices, and options for manipulating audio files (e.g. choosing the length of time that a Soundscape would play) were also positively received.

Challenges

This project presented the interesting challenge of navigating the intricacies of Android and iOS design. At one point, I realized that I was designing the bottom navigation bar using the Material Design 2 guidelines for Android; adapting to the Material Design 3 system required a number of changes to the navigation bar. As this was my first project designing an app for both of these platforms, familiarizing myself with the requirements of each operating system was an important skill to develop.

In an ideal world, I would like to conduct in-depth user interviews with users of similar apps early on in the process. Given the time constraints for this project, and lack of easy access to current app users, this was not possible. However, the research done on existing apps was helpful in learning about what makes an effective and user-friendly sleep support app.

Future steps

In future iterations, the Study portion of the app could be further developed, as well as the sleep tracker found in My Account. As healthy habits are a fundamental part of building a strong sleep cycle, including a habit tracker would be a good addition to this app. A habit tracker portion could include notification reminders and milestone celebrations. A “sleep bootcamp” program that guides users in developing these habits would be a nice addition to a paid version of this app.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s