Sleep Journey

Transferring Bedtime Experience To A Delightful Journey

Group 2.png


More and more people suffer from sleep related problems. After investigation, I found out the major reason behind this problem is the stress from daily life and the incompleteness people feel when heading to bed. The stress is actually coming from the fear of losing control of their work and life.


Primary UX / UI Designer


Survey design, user persona, user journey mapping, wireframing, lo-fi & hi-fi prototyping, visual study, user testing, UI design


An app that helps people sleep better, maintain a good lifestyle and mental health through developing good habits around sleep time. It provides holistic and delightful experience with a comprehensive feature set aiming at different time periods around sleep. It not only provides you with the features that calm you down, but most importantly helps you get better control of your life and work.


Ellen Huang (self-started project)


Jan 2019 - Feb 2019 (1.5 weeks)

Design Process

Timeline (2)-18.png






User Survey


I designed and conducted a Sleep Behavior Survey targeting people aging from 18 to 34 to understand more about their sleep behavior, pain points, and needs. Most of them are college students of UC Berkeley and young professionals working in Bay Area. I received more than 150 responses. Here are some insights from the survey results:

  1. Among all the responses, 96% of them usually sleep 5-8 hrs a day.

  2. About 44% of the participants usually go to bed around 12:30-2:00 am;

  3. About 36% usually wake up around 7:00am-8:00 am.

  4. Most of the participants rank their sleep quality not very satisfied. 

User Interview


I also interviewed some of the participants to get to know their sleep routine(pre-bed activities), the major concern about their sleep behavior, and the possible cause leading to it.


  • Most of the participants express they have a hard time waking up on time; a lot of them also feel they have a hard time falling asleep too.  

  • A lot of the participants think pre-bed activities can help them sleep better, like taking a shower, reading, doing exercise etc.

  • Most of the participants think the cause of their sleep behavior is stress/anxiety. Many of the people say that their minds keep running even when they close their eyes and it usually takes a while for them to truly relax. 

Daniela, 27


“Long working hour during weekday makes me tired. I feel stress in mind and cannot get relaxed easily. Sometimes getting nervous when I hear sounds in midnight.”

Kevin, 24

Graduate student

“I always think too much. I usually plan my schedule for the next day right before I sleep.”

Scott, 28


"I usually do my work which requires much thinking right before going to bed, so I just keep thinking and cannot stop it instantly for sleep."






User Journey Map

user journey mapping.png

User Persona

user persona.jpg

The research led me to the problem statement:

How might we make users’ experience before and after sleep more delightful? 


  • How might we help users get relaxed and fall asleep easier? 

  • How might we help users feel refreshed and delighted when waking up? 



Design Strategy



User Journey Map


Based on the User Journey Map, I came up with design solutions to help improve users’ experience at different stages around sleep time.

user journey mapping.png



Information Architecture

information architecture.png



UI Design Library

Mood Board and Color Palette Study


For night mode, I want to create a calm, serene, dreamy atmosphere. Imagine you are surrounded by woods, everything is so quiet. You feel you can finally release all the stress from day life, and close your eyes just enjoying the pure calmness of the nature.


For morning mode, I want to create a refreshing, inspiring and cozy atmosphere. Imagine you wake up, seeing the beautiful sunshine shining into your room. Having a cup of coffee, you feel motivated and excited about starting your day. 


Meanwhile, in order to maintain the coherence within the app. The 2 mood boards also share similar color palette and overall atmosphere. 



Screen Shot 2019-07-23 at 9.59.25 PM.png
Screen Shot 2019-07-23 at 9.59.54 PM.png
Screen Shot 2019-02-15 at 11.01.08






User Testing



I found users (college students or new graduates) to do user testing for me with my prototype on inVision.


Key Findings


  • Users say they don’t know what those names mean: bedtime,… and they don’t want to click to figure it out.

  • Users don’t like there’re too many options to click at main page.

  • Users think Journal is an important feature, maybe it should always be kept at the bottom box.

  • Bedtime, sound, stories maybe used the most. A few users say they are not gonna use alarm, because prefer the alarm on ios.

  • Texts are hard to read on some ui, there is not enough color contrast with background

  • Texts are not consistent in colors.

  • Images are kind of sticking together, they do not seem like buttons.



Prototype v2

information architecture iterated.png
prototype new.png

Final Prototype


night mode


day mode




What didn’t make it:

  • A 2nd round usability testing would be nice to have on the iterated prototype.

  • Some details on interface need to be further fleshed out. (Increase the contrast etc)

What we did right: 

  • User research provided me with profound insights and helped me better understand problems. 

  • User journey map is a great design tool for me.

  • User testing provided me with significant insights on iteration (Information Architecture and Prototype)

  • Mood board study provided me with inspiring ideas on interface.