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?
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.
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.
The Problem
Morgan needs to get more sleep so she can feel more present and more energetic in her professional and personal lives.
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
Sharing that sleep plan with friends in a social feed.
LEARN
Using data to better understand what works and doesn’t work.
User Flow #1: Creating a Sleep Plan
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
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.
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.
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.
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. 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.