Jingtong Liu --- UX Researcher
Ivan Zhu --- Interaction Designer
Chenfeng Tu --- Technical Researcher
UI/UX Designer
Visual Designer
Philips Sleep Design Challenge
Sept. 18th -- Oct.15th, 2018
(4 weeks)
Adobe Photoshop
Adobe Illustrator


The Challenge

About 87% of American high school students are chronically sleep-deprived.  Teenagers are the least likely of any age group to be getting sufficient rest. Students with an average of 6 hours sleep per weeknight are over 60% and are more likely to suffer from obesity and depression. What can we do to help?

Project Goal

Our challenge here was to provide a way specifically for teens that are customizable, tailored to their needs, and will both to raise their awareness & improve their sleep. The new experience would allow teens to discover the causes of sleep deprivation, have a better understanding of their sleep and make healthy sleep habit - forming process more intuitive and enjoyable.


Our solution is to use a smart ring to identify their personal sleep cycle and create community identification to motivate them to stick to it.  Also, we employed gamification to let teens understand sleep better through competing against each other, hoping to set off a new trend against teenagers' current mindset ---- “sleep 5 hours makes me a cool teen”.








Literature review
User Interviews
Competitive audit
Use Cases Study
Problem statement
User pain points
Feature narratative
Design principles
Journey map UX flow
Information Architecture
Low & High-fidelity wireframes
Interactive prototypes
Stakeholder reviews
Field testing
Designer critiques
Detail fixing / copywriting



Median amount of teenage sleep has decreased from 7.75 (1969) to 6.65 (2001) hours per night, with sleep deprivation increasing with age.

Understand the Problem

80%  sleep 7 hours or less

100%  teens use screens before going to bed

87%  care about their sleep

30%  actively use sleep aid

Harm Caused by Sleep Deprivation

FOR        TEENS

 38%  increase in the odds of feeling sad and hopeless
42%  increase in considering suicide
58%   increase in suicide attempts
23%  increase in substance abuse 

each hour of lost sleep 

The Adolescenet Sleep Cycle

Sleep duration as a function of age (after Roffwarg et al. 1966)
  • Teenagers need more sleep than adults to function (9-10 hours)

  • Hormones that are released during the sleep/wake cycle are melatonin at night (including sleepiness) and cortisol in the day (encouraging alertness) are often delayed for up to two hours

  • A common bedtime of 9:30pm-10:00pm is pushed back by 2 hours

Reasons for Not Getting Enough Sleep

Piles of homework

Sleeping disorder

Sleep environment

Increased media screen time

Caffeine consumption

Social interaction

School start time

Parental/peer relationships

(10 interviews & 37 surveys  on Teens between 13 - 17 years old)

Personas from Persons

From the research, we summarised user pain points, identified two kinds of representative users, and built personas based on their experience. 

They are Teens who

  • Are self-conscious and looking forward to a better self

  • Fall into a vicious circle and have no idea how to change it

         (They are unaware of the harmful factors leading to their poor sleep quality and  lack of relevant knowledge)


14 years old | High school student | Pittsburgh


16 years old | Middle school student | Pittsburgh






  • Have enough sleep

  • Enhance learning efficiency

  • exercise and feel more energetic

" Lack of sleep cause my low learning 

performance, and vice versa."


  • She works long time with low learning efficiency 

  • School starts super early at 7 and Coffee doesn't work any more

  • barely have time to exercise and the sleep quality become even worse






  • Don't get too excited at nigh

  • Go to sleep earlier

  • Appropriate game time

"I am so addicted to video games and my friends all think it's cool to  sleep less"


  • He plays video games till 2 a.m. each night. He has made up his mind to change the habit but always ending with failure

  • He feels so bad when he gets up each morning

  • Most of his friends compete to see who slept less last night

Frame the Problem Statement 

How to help teenagers    1.  FIND OUT     their personal sleep cycle?

 2.  STICK TO     it?

  1.  FIND OUT     their personal sleep cycle?

  1. What is his/her current sleep cycle like ?

  2. What are the pain points in current sleep cycle ?

  3. What are the influence factors ?

Questions we need to answer

While what are the Existed Solutions?

From market research,  we see that smart products might be the right direction of future.  And existed products mainly focus on sleep data tracking or sleep quality improving before or during sleep, while offering no direct solutions to sleep deprivation. 

    We selected four categories of most popular smart products and conducted the competitive analysis:

  • Few tech-heavy products can easily integrate into products habit already own

  • Few products offer consist solutions, and their effectiveness is still need verification

So many factors can lead to teenagers’ poor sleep, while the exsited solutions cannot give the answers.  

The Necessity of Tracking All-day Data

 2.  STICK TO   it?

We distributed a survey on multiple online platforms to understand teenagers' psychology and cognition. The things they are willing to accept and the relationships they would like to build. We received 131 responses, among which 60 are valid. Finally, we got the conclusion that teenagers still want to show their personality when attracted by a new trend and they give their friends more trust than parents. Also, we conducted research on how to build a habit-forming product and found out gamification would be the most appropriate mechanism. So we decided to use rings to track whole-day data and build incentive systems among friends to motivate the formation of healthy sleep habits.

Understand Teens' Behavior and Mindset

Come to a solution: an Integration of 

a Smart Wearable Ring, as a Tracker

a Gamified App, as an Incentive System



In the next phase, I need to gamify this habit-forming process and get teenagers hooked. Thus, I introduced the hook model to help cultivate the healthy sleep cycle. The formation of a habit requires four steps: trigger, action, variable rewards, and investments. And these four steps need to go through multiple rounds of circulation until an action becomes a subconscious reaction.

Gamify the Habit-forming Process


Store Value


Internal trigger 
Negative emotions
Fail to go to bed early 
Don't know how to change 
Receive likes through interaction
Variable rewards to discover
The feeling of competence and achievement
Automatic tracking
Simple gesture control
low input cost


External trigger 
 Interpersonal recommendations

Action = Motivation + Ability + Trigger

Feel terrible when getting up 
Regret to stay up late

Hook Model

Reference: Hooked: How to Build Habit-Forming Products, by Nir Eyal  (Author), Ryan Hoover (Editor), November 4, 2014

Concept Generation:  Building a Galaxy 

I introduce the concept of "Building a galaxy ", which allows teenagers to cultivate healthy sleep cycles and visualize their achievements by creating their own galaxy simultaneously.


The whole habit - formation experience should be an iterative and evolving process. Users can gain more control with the level rising


The reward should be variable based on each person's sleep quality and task achievement. The purpose of the reward itself is to form a desire, not satisfaction.


The experience we created
is one that should be fun and no stress involved. It should be  enjoyable and won't take users too much investment

MY FIRST Challenge

How to     DESIGN   the Mapping of Data and Features ?

 The Mapping of Data and Features 

I would like to visualize the monitoring data via the customization of the planets. The most important visual principles I identified after research are:






Following these principles I classified all the input data into two types to evaluate their attributes:

PASSIVE INPUT DATA ------ more useful

ACTIVE INPUT DATA ------ more interactive

And finally I chose the three most interactive & meaningful data, which allow users to customize their planet with minimal time and effort: 

  • feeling when getting up

  • dream words during the sleep

  • overall sleep quality scores

I did rounds of visual design but was still unable to select an optimal one. Then I conducted co-design and made the final decision.

After co-design,  I chose the last solution for reasons like more interesting, more intuitive and more room to play. Thus, we decided to use the color of the planet to express the feeling, firefly inside to store dream words and the level of tides to show the overall sleep quality scores.

MY SECOND Challenge

How to   MAKE   the Rules to Retain Teens ?

I need to give teenagers timely feedback to help them keep track of their achievements and motivate them to keep sticking to their personal  healthy sleep cycle.  The waiting time cannot be too long or too short, and it need to be an evolving experience to retain teenagers.  After the survey and interviews, I decided the rule as following:

Burn a Glass Planet
Sleep Healthily
Fail to Complete
Build Your Galaxy
How to Create Your Own Cosmos? 

Whenever you want to cultivate healthy sleep cycle you can burn a glass planet.

In the next 24 hours, the tide will rise when you are resting healthily.

The planet will turn dark and the firefly will die if you fail to meet the pass line.

The healthier your sleep, the resplendent your galaxy is!



How Does the Ring Work?

The ring will collect necessary data which has a correlation to teenagers' sleep cycle automatically. Also, teenagers can input some active data to rectify a deviation. By processing the passive & objective input data through the deep neural network, we would be able to calculate out more scientific sleep cycle for teenagers.


  • Click - Shows last sleep quality by the customized color of light

  • Input the getting up feeling according to the color of light

  • Double Click - Shows today’s sleep task completion

  • After each display - Shows remaining battery

  • Shock - Alarm & Unhealthy sleep behavior warning

3-Axis Accelerometer Sensor  

Tap to awake

Detect sleep status

Detect daily activity intensity

Photoelectric Heart Rate Sensor

Detect mood & daily activity intensity

through heart rate


Wake or remind


Data transmitting

Through machine learning, we are able to put different kinds of data into the neural network and better understand the complex user behaviors, thereby generating more accurate suggestions on sleep improvement and health condition.

Machine Learning to Synthesize Personal Sleep Cycle

Sketches of the Main Interfaces

After identifying the focus aspects I want to work on, I sketched out the primary pathways and main interfaces each persona would explore through the application. Since this is a gamified application, I would like to make more explorations on how to make the interaction more interesting.


What's Next?


View more on desktop

Since this is a gamified mobile application, I will have more space to explore which kind of interaction would be more intriguing to teenagers. Also, I need to set certain constraints to avoid addiction.


In the next step, I would like to verify these gamified interaction flow, design high-fidelity mockups and realize the final motion design.

View Other Projects !



© 2020  by  Scarlett  Wu - All rights reserved.