Hypnos

UX/UI Designer & Researcher | Fall 2020

Take the leap for better sleep!
Hypnos is a mobile application that motivates people who work from home to build and maintain a consistent sleep routine in order to promote better overall health by getting longer duration and greater quality of sleep.
Three iPhones with screens displaying 3 pages of the Hypnos app

SETTING & OBJECTIVE

Hypnos was completed for a Designing for Personal Health and Wellness course at the University of Washington. Our objective was to design a solution that addresses a health and wellness need of our choice. Hypnos focuses on improving sleep health in college students.

ROLE

UX Designer and Researcher; I worked with four other UX/UI designers and researchers and was primarily responsible for analysis, concept ideation, and wireframing, though I was also heavily involved in user research.

TIMELINE

9 Weeks (October - December 2020)

TOOLS

Figma, Miro, InVision
process
01 problem

PROBLEM SPACE

Throughout the recent global pandemic, my team and I noticed that spending so much time on our devices negatively impacted our sleeping patterns - and we were not alone. Upon further investigation, we found:
clipboard with checked and unchecked list items icon

Increased
Screen Time

Screen time for people of all ages around the world increased by as much as 5 hours during the pandemic (Lodha & Pandya, 2021)
hand cursor checking a box

Poor
Sleeping Habits

Increased screen time was linked to a decline in overall sleep health (ability to fall asleep/stay asleep) (Drumheller & Fan, 2022)
eye icon

Health
Implications

Sleep deprivation weakens immune health, mental health, and productivity (Colten & Altevogt, 2006)

TARGET POPULATION

Research indicated that stay-at-home orders had the most damaging impacts on college students who work and study remotely. Thus, my team and I chose to focus on this group. With this in mind, I formulated our initial problem statement…

PROBLEM STATEMENT & INITIAL DESIGN QUESTION

Due to the rise of coronavirus cases and stay-at-home orders, everyone from students to working adults were forced to work from home. As a result, people spent more time on their devices, looking at screens for work, learning, and leisure from the moment they wake up to the moment they fall asleep.
How might we help students build a healthy and consistent nighttime routine in order to fall asleep earlier?
02 research
three abstract people icon; social icon

  Understand the Users  

Online Resource Review
User Survey
side view of stack bricks in pyramid icon

Explore Market Space

Competitive Analysis
3 question marks icon

Validate Assumptions

Literature Review

ONLINE RESOURCE REVIEW

To gain a better understanding of our users’ experiences with screen time and sleep health, I explored 10 relevant online resources (blogs, forums, narrative articles) and analyzed each source using an inductive approach.

I found many people’s narratives and experiences focused on:
These themes became the foundation for user survey questions.

USER SURVEY

My team and I created and distributed a user survey via social media to gather both qualitative and quantitative data from as many people as possible in a short amount of time. We collected data from 161 participants, which revealed the following key insights:
3x2 chart summarizing user survey insights; outlines three key pain points and supporting screen shots and data visualizations from the user survey
Click image to enlarge
Students struggle to detach themselves from their phones before bed, which results in staying up later and not getting enough sleep. They want to build a better nighttime routine away from their phones in order to get more sleep, but they don’t know how to do so effectively.

REVISED DESIGN QUESTION

design question written in marker with pen and pencil revisions written over the original question
As we identified more well-defined user pain points and goals during user research, I noticed that we began to frame our problem a bit differently. I revised our initial design question to capture this shift in focus and more accurately reflect the problem we aimed to address.
How might we help college students improve their bedtime routines to detach themselves from their devices in order to get quality sleep?

COMPETITIVE ANALYSIS

My team reviewed competitors that aimed to help people control and eliminate their excessive screen usage habits, which revealed gaps in the market and ways in which we may fill those gaps. Click here to view our analysis.
yukan app logo
Yukan
moment app logo
Moment
app detox logo
App Detox
flux app logo
Flux
This analysis revealed the need for a solution that:
clipboard with checked and unchecked list items icon
Limits screen time and phone usage, promoting self-control
hand cursor checking a box
Encourages autonomy but allows for customization
eye icon
Naturally helps the user build healthy, sustainable habits
03 SYNTHESIS

USER PERSONA

I advocated for the development of a user persona that would represent our users’ key pain points, goals, and characteristics. Together, we created a persona named Daniel, who is based on user research insights. This persona helped us focus on our users’ defined goals and needs moving forward.
user persona summary outlining pain, goals, and context
outlined with a rounded border
Click image to enlarge

ETHICAL CONSIDERATIONS

Before diving into ideation, I identified three main ethical points that would help ground the design of our solution:
clipboard with checked and unchecked list items icon
Usability
The product should be easy to learn and easy to use with minimal user errors
hand cursor checking a box
Autonomy
Users maintain control by having the choice to set their own goals, and share and delete personal info
eye icon
Accessibility
Ensure product design is visually  accessible to all target users (e.g. visual accessibility features)

CONCEPT IDEATION

I kicked off our ideation phase by leading a brainstorming activity from which we generated 25+ unique ideas on paper.

Our ideas fell into a few key categories:
hand drawn sketch of a phone running away from its owner
Physical Separation from Phones
hand drawn sketch of a safe with a timer to limit screen time
Screen Time
Management
hand drawn sketch of someone going through a phone detox plan and reflecting on phone usage
Phone
Detox Plans
hand drawn sketch of someone doing a nighttime routine
Nighttime
Routine Builders

CONCEPT CONVERGING ON A PATH TO PURSUE…

I created an affinity map of our ideas, categorizing ideas based on common functions and features. I then facilitated voting and discussions to begin converging on a path that best fit our user and market needs.
affinity map of color-coded ideas, some with eye or hand emojis representing a vote
Click image to enlarge
Based on user and market needs, a physical device that prompts physical distance between students and their devices, and tracks and alerts excessive screen time was the most suitable solution.

HOWEVER...

Due to the scope of the class, we were limited to web or mobile applications.

Thus, my team and I pursued a different solution.  We decided to further explore the concept of an app that helps users build healthy bedtime routines via positive reinforcement.
Since we could not pursue a design that changes students’ environments (contexts and cues) to create physical distance between them and their devices, we chose to focus on changing students’ behavior to create that distance instead.

BRINGING IT ALL TOGETHER

flow chart depicting a person going to bed and scrolling through their phone versus going to bed and using an app to fall asleep. The photo has a border around it
Click image to enlarge
According to our research, we must replace unwanted habits (or behavior) with something new. Research also revealed three key ideas for "breaking" the habit of phone usage before bed:
clipboard with checked and unchecked list items icon
Time
It takes at least 21 days to “break” a habit (Lally, et. al., 2010)
hand cursor checking a box
Low Effort
Must be easy and accessible so it becomes automatic over time (Thomas, Poortinga, Sautkina, 2016)
eye icon
Goal-Setting
Essential for tracking progress and maintaining consistency (Pinder et al., 2018)
Hypnos removes an effortful mental barrier for students by suggesting new activities to populate their nighttime routine. Our app will consistently guide the student through a customized routine until their new, healthy routine replaces their phone usage habits. Over time, students will get better quality and longer durations of sleep.
low fidelity sketches of the routine screen and routine timer, accompanied by a description of its key features and how it meets user and market needs
Click image to enlarge. Click here for icon key
low-fidelity sketches of the reports page with menus collapsed and opened, accompanied by a description of the page's key features and how well it fits user and market needs
Click image to enlarge. Click here for icon key
two low-fidelity sketches of the profile screens, accompanied by a description of the page's key features and how well it meets user and market needs
Click image to enlarge. Click here for icon key
Creating an app that keeps users on their phone seems counterintuitive to our goal. But, through consistent use of the app, users will be able to move through their routines so naturally that they will no longer need their phones.

My team and I named our app Hypnos, after the Greek god of sleep.
04 design

STORYBOARD, USER FLOW, & INFORMATION ARCHITECTURE

storyboard consisting of cartoon panels of someone struggling to go to sleep
I turned back to our user persona and developed a storyboard to consider how users might interact with our solution and whether or not it meets their needs. Click here to see the full storyboard.

I also created a user flow depicting the main flow that a user aiming to complete their nighttime routine would experience. Other features are organized in a rough information architecture diagram.
flow diagram depicting the steps of someone's nighttime routine from start to finish. Photo is outlined with a border
Click image to enlarge
information architecture diagram, excluding the steps prior to dashboard, outlined in a border
Click image to enlarge

MEDIUM-FIDELITY WIREFRAMES

We created some medium-fidelity wireframes for each of our core features.
iPad drawings of low-fidelity screens for Hypnos

HIGH-FIDELITY PROTOTYPE

After reviewing and incorporating feedback, I was able to make final adjustments to the UI and generate our final prototype in Figma…

Onboarding

iPhone displaying sign in page for Hypnos
01 New users may sign up. Returning users sign in once
iPhone displaying Hypnos onboarding process: enter current sleep routine
02 Enter basic info and current sleep schedule
iPhone displaying Hypnos onboarding process: set sleeping goals
03 Set new goals for desired sleep schedule. Option to start challenge
iPhone displaying Hypnos onboarding process: select from various activities to add to routine
04 Browse activities and add them to your bedtime routine
iPhone displaying Hypnos onboarding process: customizing activity for routine
05 Set the duration for each selected activity to add to your routine

Main Flow

iPhone displaying Hypnos' homepage; includes line graph of sleep duration, buttons to start routine, log bedtime, and 3 quick stats about sleep
01 Greeted by quick stats on dashboard. Can start routine or sign off
iPhone displaying Hypnos; routine page: includes days of week, activities, welcome message
02 Begin bedtime routine, view activities, and track progress
iPhone displaying Hypnos' "begin activity" page; includes a timer
03 Timer moves you along each activity. Collect points when you finish
iPhone displaying Hypnos' editing activity screen
04 Add, remove, and edit activities in your routine as needed
iPhone displaying Hypnos' homepage; includes line graph of sleep duration, buttons to start routine, log bedtime, and 3 quick stats about sleep
05 Sign off when you’re ready to put your phone down for bed

Rewards

iPhone displaying sign in page for Hypnos
View all the points you’ve collected
iPhone displaying Hypnos onboarding process: enter current sleep routine
Browse deals from your favorite shopping brands
iPhone displaying Hypnos onboarding process: set sleeping goals
Redeem points for exclusive deals
iPhone displaying Hypnos onboarding process: select from various activities to add to routine
Get discount codes to use your deals

Reports & Profile

iPhone displaying Hypnos' homepage; includes line graph of sleep duration, buttons to start routine, log bedtime, and 3 quick stats about sleep
View quick stats and fun facts about your sleep patterns and phone usage
iPhone displaying Hypnos; routine page: includes days of week, activities, welcome message
View your challenge completion history and rewards history
iPhone displaying Hypnos' "begin activity" page; includes a timer
View and edit your personal information
iPhone displaying Hypnos' editing activity screen
View and edit your sleeping goals

VIDEO OF PROTOTYPE & FINAL PRESENTATION

At the conclusion of the course, my team and I presented our work to the rest of our class. Check out our final presentation and our video of our user persona interacting with our prototype!
05 reflect

reflection

No project is perfect; there are many aspects about the project I would change if we had more time. However, I’m proud of my team and what we accomplished throughout this course. Upon reflection, I learned…
black down arrow
Research and validate assumptions before committing to a solution
black down arrow
A great team dynamic makes a HUGE difference!

next steps

If we had more time, I would have liked to do the following:

Acknowledgements

Special thanks to my team for all their hard work and for making this project an especially enjoyable and memorable experience!
Graphs from UI Style Guide
Icons from flaticon.com
Wordcloud generated by WordItOut