Back

AI Product Design - UX Research - Interaction Design

NightShift turns bedtime anxiety into a calm sleep sanctuary.

A sleep wellness app for college students that combines task offloading, sensory comfort, digital detox, and positive sleep reinforcement into one nighttime flow.

Role: UX/UI Designer
Scope: Research, Strategy, UI, Testing
Timeline: 8 Weeks
Tools: Figma, Research Synthesis, Prototyping
Team: 3 Designers

Overview

The Context

College students face immense academic and social pressure, leading to a high prevalence of sleep difficulties. 68% of college students report experiencing sleep issues, with 63% directly caused by anxiety and stress rather than environmental factors.

Users juggle disjointed coping mechanisms: taking melatonin, scrolling TikTok for "just 15 more minutes," and relying on fragmented reminder apps. NightShift unifies this chaotic bedtime routine into a single, cohesive AI-driven sleep sanctuary.

What I Did

Working with Yanxun Wang and Zehan Lu, I conducted generative research with 9 interviewees and synthesized 113 research notes to uncover the "nighttime anxiety spiral" phenomenon. I designed a holistic UX that consolidated four coping mechanisms into one calming app.

I pioneered the sticky-note task stacking UI and crafted dark mode color psychology specifically for nighttime use, reducing visual tension through midnight blue palettes and 85% text opacity. The sticky-note task stack made planning feel visually smaller than a heavy to-do list, helping users offload tomorrow without amplifying bedtime anxiety.

Problem

Students were not just sleepless. They were stuck in a nighttime anxiety spiral.

NightShift started from one core proposition: what if college students could reduce anxiety and fall asleep faster? The research showed that the root cause was anxiety about tomorrow's tasks, not just sleeplessness itself.

Story Pitch

One exhausted night made the fragmented coping cycle visible.

Mia studying late at night on her laptop — 01 Coursework stretches into bedtime.

Mia lying awake with unfinished tasks on her mind — 02 Her body is tired, but her mind keeps racing.

Mia scrolling on her phone in bed — 03 The phone becomes a quick emotional escape.

Mia reaching for melatonin as a quick sleep fix — 04 She reaches for a disconnected quick fix.

Mia trying another sleep app on her phone — 05 Another single-purpose app promises relief.

Mia still awake and frustrated after trying separate sleep tools — 06 The tools remain fragmented, so the cycle repeats.

A Night in Mia's Life

From task panic to emotional grounding.

11 PMStill working

Presentation work spills into bedtime.

Mind racingAnxiety comes

Tomorrow's unfinished tasks loop repeatedly.

Phone escape"One TikTok..."

Revenge procrastination keeps her awake.

2 AMMelatonin

She reaches for a quick fix in desperation.

NightShiftOffload + soothe

Tasks, audio, and lock mode help her settle.

Journey Map

Before NightShift, the night keeps falling. With NightShift, it can recover.

The comparison maps the same bedtime sequence before and after NightShift: one path becomes more anxious, while the other uses planning, audio, and sleep tracking to move back toward calm.

Before NightShift After NightShift

Positive Negative

Research

This wasn't just personal frustration. It was a sleep-anxiety care gap.

With 68% of college students experiencing sleep difficulties, the demand for better sleep solutions has grown. But existing tools remain fragmented, leaving the anxiety-stress intersection underserved.

01 Student Sleep Challenge

68%

52%Anxiety / Stress

48%Other Causes

68% of college students report sleep difficulties, and 52% identify anxiety or stress as the major cause behind poor sleep.

Data: ARA / NCAA, 2023

02 Top Causes of Sleep Difficulty

Anxiety / Stress
Noise / Dorm Environment
Screen Use / Light
Other

Anxiety emerged as the main intervention target, outweighing environmental and screen-related sleep barriers.

Data synthesized from American College Health Association, 2023

Research Plan

The study connected bedtime behavior, emotional needs, cognitive load, and measurable sleep signals.

I combined generative interviews, secondary data research, and journey mapping. Participants were screened for recent sleep difficulty or nighttime anxiety before joining a 30-45 minute interview.

01

User Interviews

Individual conversations explored nighttime habits, emotional states, stress triggers, and coping behaviors.

02

Data Research

Published sleep research connected HRV, heart-rate drop, sleep latency, screen use, and environmental noise.

03

User Journey Map

The late-evening-to-sleep sequence exposed emotional drops, behavioral detours, and design opportunities.

Research Objectives

Understand sleep behavior and nighttime stress patterns.
Identify emotional and sensory needs for relaxation.
Explore task-management habits and cognitive load.
Evaluate how digital interaction disrupts sleep rhythm.
Define measurable indicators for sleep improvement.

Participant Screener

Full-time student? Yes Sleep difficulty or nighttime anxiety in the past two weeks? Yes Suitable for interview

Institutional partners were screened for student wellness programs, data-based sleep initiatives, and openness to wearable or mobile collaboration.

Interview Guide

5-minute introduction, 25-minute discussion, 10-minute wrap-up.

What daily pressure affects sleep later, and why?
What goes through your mind after studying in bed?
What makes nighttime thoughts feel stronger?
What helps you feel relaxed or safe before bed?
Why is it difficult to stop scrolling at that time?

Interview Synthesis

9 interviews revealed the hidden pressure behind sleepless nights.

I clustered interview notes around recurring emotional triggers, then translated scattered statements into product-level pain points. The strongest pattern was not simply poor sleep hygiene. It was a loop of unfinished tasks, self-pressure, and nighttime loneliness.

"my brain can't calm down" "pressure doesn't switch off" "worry about unfinished tasks" "everything else goes quiet" "I create invisible pressure on myself" "without sleep I'm running on anxiety and caffeine"

01

Cognitive overload keeps the mind active.

Students replay unfinished work, future goals, and academic performance when they should be winding down.

02

Quiet moments amplify emotional pressure.

Nighttime creates space for worry, loneliness, and self-doubt to become louder.

03

Rest needs visible reassurance.

Users wanted proof that tomorrow was manageable, not another tool that made their task load feel bigger.

Raw interview notes spreadsheet used to synthesize NightShift user pain points — 113 notes from 9 user interviews

Say / Mean / Want

Raw statements became product needs instead of isolated feature requests.

Say Mean Want

"I scroll for a few minutes, then another 15. If I start, I can't stop."

I know the habit hurts my sleep, but I cannot interrupt it alone.

Screen Lock / Mindful Reminder

"Loneliness and fear appear because the night is quieter than the day."

Quiet can feel emotionally empty instead of calming.

Emotional Support / Sleep Companion

"If nothing important is waiting tomorrow morning, I feel calmer."

Unresolved tasks make tomorrow feel threatening at bedtime.

AI Task Planning / Stress Relief

"Small sounds, faint light, and phone vibration make me stay alert."

Environmental changes keep the body in a hyper-alert state.

Sensory Comfort / Environmental Balance

"A quiet environment helps me relax."

Predictable sensory conditions create safety and calm.

Relaxation Audio / Sleep Environment

User Personas

Who are we designing for?

We interviewed students and early-career professionals about their nighttime routines, challenges, and goals to understand who NightShift is designed to help.

Mia sitting in bed at night, looking at her phone beside a warm bedside lamp

Primary Persona

Mia, 21
College Student

Undergraduate | Urban | Usual bedtime: 12:30-1:00 am

"I want to sleep, but my brain keeps listing everything I still need to do."

Background

Mia is a full-time college student balancing classes, assignments, a part-time job, and a social life. Her mind is often busiest right before bed.

Behaviors

Finishes coursework late and brings tasks to bed.
Scrolls TikTok or social media to escape.
Uses audio or notes apps but does not stick with them.

Pain Points

Her brain will not switch off.
Scrolling gives quick relief but makes her feel worse.
Unfinished tasks make sleep difficult.

Needs

A calmer way to offload her thoughts.
A simple before-bed routine.
Less digital stimulation so she can rest.

Secondary Persona

Jordan, 24
Young Professional

Marketing Associate | Urban | Usual bedtime: 11:30 pm

Has an irregular schedule and relies on fragmented sleep tools.

Uses audio, alarms, notes, and app limits without one connected flow.

Needs gentle boundaries and visible feedback that makes rest feel worthwhile.

"I don't need another sleep app. I need something that helps me actually put the phone down."

Design implication: NightShift should help users offload unfinished thoughts and reduce digital stimulation before sleep.

Pain Points

The recurring barriers behind bedtime anxiety.

01

Revenge Bedtime Procrastination

Students sacrifice sleep to reclaim "me time," endlessly scrolling social media.

02

Cognitive Overload at Bedtime

Unfinished tasks loop endlessly without a way to offload them before sleep.

03

Sensory Void Amplifies Loneliness

Silence and darkness trigger isolation. Users need sensory comfort, not just silence.

04

No Centralized Sleep Sanctuary

Users juggle Calm, Notes, Clock, Reminders, TikTok, and melatonin.

05

Lack of Positive Reinforcement

Cold sleep data fails to create emotional connection or long-term motivation.

Insight

Bedtime anxiety is a loop, not a single sleep problem.

Students were not failing because they lacked sleep knowledge. They were moving through the same loop every night: unfinished tasks create pressure, quiet makes worries louder, the phone becomes an escape, and fragmented tools make recovery harder.

Fragmented bedtime timeline showing tasks, scrolling, audio, app lock, sleep, and habit restoration

The Root Cause

Extreme bedtime fragmentation.

Users were not lacking motivation to sleep. They lacked one connected system that could move from task offloading to sensory grounding, digital boundaries, and positive habit reinforcement.

AI Task Planner Multi-Audio Comfort App Lock Sapling Tracker

Design Goal

Design a sleep sanctuary that turns bedtime into emotional decompression.

The 8-week goal was to design and launch NightShift for anxious young adults, targeting 0.5% of the U.S. young adult market in Year 1: approximately 36,000 users and more than $2 million in projected annual subscription revenue, with growth potential through wearable partnerships and campus mental health channels.

Calming Comfortable Structured

8 weeksMVP design and launch target

0.5%U.S. young-adult market target

36,000Projected first-year users

$2M+Projected annual subscription revenue

Experience Wheel

Three layers shaped the product feeling.

Physical sensation focused on dimmed lighting, reduced sound volume, and structured planning. Self state focused on control, relief, awareness, and balance. Deep emotion focused on peace, recharged energy, and feeling supported rather than alone.

It is...Calming · Comfortable · Structured

I am...In Control · Relieved · Balanced

I feel...Peaceful · Recharged · Supported

Why a Mobile Product?

The intervention needed to happen on the same device that shaped the bedtime routine.

Planning, audio, notifications, screen-time boundaries, alarm settings, and sleep reports already happen on the phone. NightShift is more than an AI conversation: it connects those device-level actions in one workflow.

Screen Time Notifications Audio Alarm Health Data Ambient Signals

Ideation

Four research directions clicked together as one bedtime system.

SCAMPER helped the team combine, adapt, simplify, and refocus early concepts. Each puzzle piece solves a different research signal, but the experience only works when all four connect.

Combine + Adapt 01 · Ease of Sleep

Offload the Mind

Simplify unfinished tasks into a light plan for tomorrow.

AI Planner

Substitute + Modify 02 · Sensory Comfort

Create Comfort

Replace restless silence with adjustable calming sound.

Multi-Audio

Eliminate + Reverse 03 · Nighttime Distraction

Break the Scroll

Turn the phone from a trigger into a gentle boundary.

App Lock

Put to Use 04 · Emotional Balance

Make Progress Visible

Translate healthier sleep into reassuring visual growth.

Sapling Report

One connected loop: plan tomorrow, soothe the senses, detach from distractions, and see recovery grow.

Product Strategy

The concept became a responsible mobile workflow, not a collection of separate sleep tools.

The strategy connected acquisition, campus partnerships, privacy, device permissions, and safety support with a navigation model that keeps the bedtime journey clear.

Launch Ecosystem

Acquisition

TikTok and Instagram introduce the product through student-centered sleep education.

Campus Partners

Student organizations, Discord communities, and mental-health programs support distribution.

Privacy & Policy

FTC guidance, health-data disclosure, age considerations, and privacy reviews shape trust.

Mobile Operations

Screen-time permissions, app-store billing, and device data require transparent consent.

Safety & Support

Non-medical disclaimers, crisis resources, and customer support define responsible boundaries.

User Flow

One navigation model connects the full bedtime journey.

OnboardingtoRegistertoCreate Account

Home

Tree · Live · Audio · Mindfulness · Favorites

Lock

Apps · Limits · Lock status

Sleep

Music · Mindfulness · Stories · Tracking · Alarm

Plan

Task list · Notes · AI planner

Profile

Settings · Favorites · Reports · Sound quality

Prototype & Iteration

The system moved from low-fi structure to a testable mid-fi prototype.

Early sketches established the full bedtime routine. Mid-fidelity screens then clarified navigation, content hierarchy, and the sticky-note planning interaction before usability testing.

Mid-Fi Map

From system map to core sleep flows

The map connected onboarding, home, sleep, lock, plan, and profile before the visual system was finalized.

NightShift low-fidelity hand sketch screens

Low-Fi Sketch

Exploring the bedtime routine

Early sketches tested how planning, tracking, lock mode, audio, and sleep reports could work as one sequence.

NightShift high fidelity sticky note planning interaction

Interaction Direction

Sticky notes reduced perceived task weight

Stacked notes made tomorrow's plan feel lighter and more manageable before the first test.

Mid-fidelity NightShift home screen — 01 Home

02 Profile

Mid-fidelity NightShift sleep report screen — 03 Report

Mid-fidelity NightShift audio player screen — 04 Audio

Mid-fidelity NightShift app lock screen — 05 Lock

Mid-fidelity NightShift planning screen — 06 Plan

Usability Testing

Prototype testing measured clarity, emotional comfort, motivation, and task performance.

Testing focused on whether the prototype could support essential bedtime tasks without adding cognitive pressure, then connected each finding to a concrete design revision.

01

Task Flow Efficiency

Complete alarms, wake scenes, reports, and planning tasks without hesitation.

02

Navigation Clarity

Move confidently between Home, Lock, Sleep, Plan, and Profile.

03

Readability

Understand charts, buttons, descriptions, and hierarchy quickly at night.

04

Emotional Comfort

Confirm that the dark palette and imagery feel calm rather than distracting.

05

Motivation

Assess whether sapling growth, reports, and audio encourage healthier routines.

"I thought the Plan tab meant sleep schedules, not daily goals."

"The dark theme feels calm, but the white text is a bit too bright at night."

"The growing plant is nice, but how do I make it grow faster?"

"Can I test the sound immediately after adjusting it?"

"If I sleep well, do I unlock a reward?"

"What does Gentle Wake mean: an alarm or a relaxation mode?"

"The sticky-note size should be adjustable."

"I expected a countdown after locking and wasn't sure it was active."

"The Sleep Track icons could be a little smaller."

Before

to

After

Sapling progress and the weekly report became visible from the home experience.

Before

to

After

The generic task list became a lighter sticky-note flow with clearer planning controls.

01 · Weekly Report + Sapling

Progress was immediately understandable and emotionally motivating.

Task completion: 100%
Prompt efficiency: 90%
Satisfaction: 4.8/5

Iteration: Add a short motivational message beside the sapling, such as "Your tree is thriving."

02 · Reminder + AI Planner

Planning worked, but the primary creation action needed stronger visibility.

Task completion: 95%
Prompt efficiency: 85%
Satisfaction: 4.5/5

Iteration: Make "Add New Plan" more visible and clarify time prompts and calendar sync.

03 · Multi-Audio Tools

Sound mixing delivered the strongest overall usability result.

Task completion: 100%
Prompt efficiency: 95%
Satisfaction: 4.9/5

Iteration: Add immediate audio preview when users adjust equalizer or spatial effects.

04 · Screen Lock

The boundary was useful, but its active state needed clearer confirmation.

Task completion: 90%
Prompt efficiency: 80%
Satisfaction: 4.6/5

Iteration: Add a calm lock-in animation, countdown, and persistent lock-status feedback.

Final Product

Testing refined the four connected moments into one final experience.

NightShift combines cognitive offloading, gamified sleep tracking, sensory comfort, and digital detox into a single nighttime system.

01 x Homepage

Weekly health report becomes a visual sleep check-in.

The homepage combines today's sleep quality, sleep report access, and sapling planting to make progress feel visible.

02 x Plan

Note paper reminders make planning feel lighter.

The Plan flow uses note paper reminders and AI planning to help users organize tasks before bedtime.

03 x Sleep Audio

Sound options turn silence into sensory support.

Multiple audio choices, sleep tracking, and sound tools support a calmer nighttime environment.

04 x Lock

Screen lock creates a boundary before sleep.

Users can choose distracting apps and limit screen time to reduce revenge bedtime procrastination.

NightShift homepage high fidelity design showing sleep quality, sapling, and alarm list

NightShift Plan high fidelity design showing sticky note reminder and AI planner

NightShift audio player high fidelity design

NightShift Lock high fidelity design showing app choice and screen time limit

Impact & Takeaways

Testing showed that emotional design made the sleep tools feel easier to trust.

The strongest results came from features that reduced pressure: sticky notes made tasks feel smaller, audio created comfort, and lock mode interrupted the scrolling cycle without feeling punitive.

Task Completion 0%

Weekly health report, sapling, and multi-audio tracks reached full task completion in testing.

Highest Satisfaction 0/5

Multi-audio comfort received the highest satisfaction score from testers.

Novel Pattern

Users said sticky-note tasks felt less overwhelming and tearing them off felt satisfying.

Translating Emotion into UI

Dark mode was treated as a nervous-system design choice.

Midnight blue palettes and 85% text opacity reduced visual tension. Every design choice served the emotional state users needed before sleep.

Designing for Detox

The goal was less screen time, not more engagement.

NightShift balances planning and audio with intentional detachment. Success means helping users put the phone down when the system has done its job.

NightShift sleep report screen showing sleep time analysis — Sleep Report

NightShift sticky note planning interaction screen — Sticky Note Planner

NightShift sound quality adjustment screen — Sound Quality

NightShift app lock screen with selected distracting apps — Digital Detox Lock

Reflection

What the team learned, what worked, and what should improve next.

01

What I Learned

Emotional and behavioral sleep insights can become concrete interaction decisions. Calm visuals, gentle feedback, and reduced cognitive load can support healthier nighttime behavior without feeling clinical.

02

What Went Right

The sapling, customizable audio, and app lock translated pain points into a cohesive system. Testers described the direction as peaceful, motivating, and easy to follow.

03

Future Improvements

Add personal sleep goals, adaptive AI guidance, clearer save and lock confirmations, calendar sync, wearable signals, and more responsive feedback after every completed action.

References

Academic research and design tools used in the project.

Cedernaes et al. · Circadian rhythms and metabolism · PNAS, 2015 Asher & Sassone-Corsi · Circadian clock control · Gastroenterology, 2015 Morris et al. · Circadian disruption and cardiovascular function · PNAS, 2019 Chang et al. · Evening eReaders and sleep · PNAS, 2015 Yilmaz et al. · Night-shift circadian disruption and liver health · Liver Research, 2024

Figma supported prototyping and usability iterations. Sora AI supported concept visuals. ChatGPT supported copy refinement and research-note structuring. Canva supported presentation layout.

Next Projects

Choose another story.

01