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

gm header screens.png

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?

yawning-5381800_1920.jpg

Photo 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 night owls' 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.

big idea.png

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.

updated persona.png
Letter - 1.png
Morgan’s problem keeps her on a daily cycle of exhaustion and frustration.
The Problem

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

big idea.png

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.

P1B - 4 - Plan.png

PLAN

Creating a sleep plan using a research-based strategy.

P1B - 5 - Share.png

SHARE

Sharing that sleep plan with friends in a social feed.

P1B - 6 - Data.png

LEARN

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

User Flow #1: Creating a Sleep Plan

P1B - 7 - wireframe select plan.png

The app opens to a social feed like most social media apps

Users make a commitment to their sleep plan

Users share their plan publicly for accountability and connection

User Flow #2: Recording Mood and Energy Levels

P1B - 8 - wireframe mood.png

Users record their mood and energy levels each morning with a familiar slider

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.

P1B - 9a - nav bar sketch.png

Initially, 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.

P1B - 9b - nav bar wireframe.png

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

P1B - 9c - nav bar final.png

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.
P1B - 10 - style guide.png
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.

P1B - 11a - strategy card sketch.png

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.

P1B - 11b - strategy card wireframe.png

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.

P1B - 11c - strategy card final.png

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. They responded positively to the interface, but also pointed out an accessibility issue: the main screen’s social media cards didn’t have enough contrast. With a few updates, I created the final prototype.

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.