good mornings

tools:

User Research, Affinity Mapping, Journey Mapping, Wireframes, Prototyping, Usability Testing, User Flows, UI Design

team:

solo project

role:

UX designer

timeframe:

two weeks

sometimes the roadblock is also the solution

There is a time for many words, and there is also time for sleep.

Homer

The CDC categorized insufficient sleep as a public health epidemic in January 2014. One 2014 study found that:

  • Over 50% of respondents reported feeling like they weren’t getting enough sleep 2 or more days per week.

  • 53.1% of respondents said they went to bed later than they wanted 2 or more day per week.

 

A quick search in Apple’s App Store turns up hundreds of apps dedicated to helping users get more and better sleep including big names like Calm, Headspace, and Sleep Cycle. But we’re still not getting enough sleep.

So what's missing?

Picture courtesy of Victoria Borodinova on pixabay

CONVERSATIONS WITH NIGHT OWLS

I interviewed five users - all self-described night owls - to better understand their experience. My conversations and affinity mapping revealed surprisingly deep insights into my users’ sleep habits. It wasn’t a matter of getting off Facebook at the right time or avoiding blue light before bed.

 

The problem is deeply connected to feelings of shame.

I go to bed as late as 2 or 3 am.

I know I should go to bed sooner.

I can't get off my phone at night.

I shouldn't be doing this.

that they don’t realize they’re not alone.

Users are so ashamed of their secret habits

The Challenges of Adulting™

Interviews led me to a better picture of my user. Like many adults, Morgan is technically “grown up” but still struggles with Adulting™. She’s social and ambitious, she keeps herself busy, and she’s too distracted by her phone at night to go to sleep.

Morgan’s problem keeps her on a daily cycle of exhaustion and frustration.

Morgan needs to get more sleep so she can feel more present and more energetic in her professional and personal lives.

The Problem

Our addiction to our phones is unlikely to change.

But...what if this addiction is the very thing that helps us put down our phones and go to sleep?

DESIGNING FOR THE SLEEP DEPRIVED

Using my research as a starting point and Morgan as my desired user, I centered my initial designs around 3 major ideas and created screens for two user flows.

PLAN

Creating a sleep plan using a research-based strategy

SHARE

Creating a sleep plan using a research-based strategy

LEARN

Using data to better understand what works and doesn’t work.

USER FLOW #1: CREATING A SLEEP PLAN

USER FLOW #2: RECORDING MOOD AND ENERGY LEVELS

TESTING

I conducted usability testing with 3 users. They liked the idea of the app and the ability to share their successes and struggles with friends, but pointed out a few issues to resolve.

The main UI hurdle I needed to address was the navigation bar.

In my initial sketch, the “Plan” icon was located in the center of the navigation bar at the bottom of the screen. It was larger, making it more noticeable and an easier target.

In moving to wireframes, I kept this idea, calling out the plan icon and making it larger than the other buttons. 100% of usability testers were unclear what this icon meant, and 2/3 suggested labeling the icons.

For the final iteration, I adjusted the icons and gave each a simple, one word label. The icon and label are highlighted so users to know where they are within the app.

USER INTERFACE DESIGN

I created a casual, friendly, and approachable style for the app to echo how I wanted the user to feel while interacting with the interface.
EVOLUTION OF A CARD

Another challenge was creating strategy cards. Users would need to navigate this screen every day, and I wanted to create a simple, casual series of cards that would be easy to scroll through.

In my initial sketch, I considered using a checklist. This wouldn’t work for my updated flow, where the user only selects one strategy per evening.

The card design changed several times. The first wireframes felt too clunky, and the icons didn’t match the sleep strategies as closely as they would need to.

The final card design features illustrations from undraw.co. These are familiar and easy to understand even without labels.

THE FINAL PRODUCT

I ran one more set of usability tests with 4 users. This time, the app was fully fleshed out, and I had several tasks to watch users work through. Users responded positively to the interface. They also pointed out an accessibility issue: the main screen’s social media cards didn’t have enough contrast.

Onboarding

Creating a Sleep Plan

Sleep Data and Badges

  • Build a settings screen to allow for users to select level of privacy

  • Develop an option for users to create a plan using more than one strategy to improve sleep that much more and gain more insights

NEXT STEPS:
LEARNINGS:

The app store contains hundreds of apps that will purportedly help the user get better sleep. Still, millions of people struggle with it. There's always a new way to look at a problem. In this case, user research revealed a new perspective and led to a unique solution.

Linkedin icon.png
instagram icon.png
medium icon.png
email icon.png

© 2021