Sleepsmart is a gamified mobile app that helps children and caregivers to enhance children’s sleep management skills.
View Prototype
Team
1 Researcher
3 Product Designers
Client
Seattle Children’s Hospital
My Roles
UX Design
& Visual Design
Duration
Jan ~ May 2024
Overview
Sleep disruptions affect 25-30% of children with juvenile idiopathic arthritis (JIA). To help, my team collaborated with Seattle Children’s Hospital, addressing the challenges faced by these children and their families.
What Is Sleepsmart?
Seattle Children’s Hospital developed a web-based cognitive behavioral therapy for insomnia (CBT-I) intervention for children with JIA, and this is called Sleepsmart.
Context
Problem Space
While this intervention was proven to be effective in improving children’s sleep quality through pilot studies with 60 families with children having JIA, users also pointed out issues of the intervention.
The Solution
The one-stop gamified app for 8~13-year-old children and their caregivers that empower them to improve sleep problems and enhance sleep management throughout life.
Initial Brief from Client
To transform the existing web-based intervention (current Sleepsmart) into a user-friendly mobile application, incorporating gamification features tailored to meet the needs and preferences of families, especially children
Who Are Users?
Target users of the Sleepsmart are:
8~13-year-old children with juvenile idiopathic arthritis (JIA) and clinical sleep problems
Caregivers of these children, who would like to help them improve and manage sleep problems
Users Need...
One-stop platform of sleep therapy and management with engaging game elements that can help to empower them to solve children’s sleep problems and enhance sleep management
However, current Sleepsmart called out some user pain points 😨
How might we design and implement an effective app for JIA children aged 8-13 with clinical sleep problems based on Sleepsmart?
Final Solution Highlights
Effortless Task Managing
The app serves as a one-stop task manager, simplifying program progress tracking. Users can easily navigate and follow up on their achievements. Moreover, the app will push notifications at certain time during the day to help users to not to forget completing tasks.
Sleepsmart
3m ago
Let’s complete that 5 min Quiz, Monica!
Sleepsmart
5m ago
Let’s watch a quick Video, Monica!
Sleep monitoring with physical health conditions
Users can track and monitor their sleep status along with sleep-related health conditions, such as arthritis pain. With easy-looking graphs, the information is accessible and actionable for children and their families.
Engaging through games
To keep children motivated, the app provides constant encouragement through their chosen virtual pet and stars for decorating their pet’s room. This provides tangible rewards for completing tasks. The app’s friendly and encouraging tone ensures that children remain engaged and motivated throughout the program.
...and grow your pet!
The most exciting part of this program is that children can choose a pet to accompany them throughout the 6–7 week program. As children complete tasks, the pet grows and transforms, symbolizing their own progress and healing.
Impacts
5/6
of participants would recommend Sleepsmart mobile app
0 1
Built design system from 0 to 1
5+
features were delivered to the client
So, How Did We Get Here?
Research
To understand the existing Sleepsmart program, we conducted user interviews and reanalyzed prior Sleepsmart research. Through this process, we discovered that the current program was not engaging for users.
Children’s lack of motivation to engage with the Sleepsmart program
PAIN POINT 04
PAIN POINT 03
Lengthy and hard content for children to understand and follow
Confusing tasks assignments between children and caregivers
PAIN POINT 02
PAIN POINT 01
Tasks scattered across multiple touchpoint (website, email, survey tool, etc.)
UX Direction
To address these pain points, we've made the following UX directions. These guided our brainstorming of design solutions.
TASK TRACKING
Allow users to manage everything in one place and track their overall progress
CLARIFICATION
Provide clear guidelines and visual aids so that children and their caregivers can easily understand their required tasks
KID-FRIENDLY
Make the app kid-friendly and easily usable so that users can go through the tasks and monitor their sleep patterns easily
REWARDS
Implement characters with storytelling and reward systems for continued motivation
How might we design engaging game elements to sustain children’s interest over time?
Ideation
We brainstormed the necessary features through a lot of sketching and prioritized the features according to our research and stakeholders’ needs. We selected the Solution 1 because it better aligned with user needs and business constraints.
Pet Characters
Users raise a pet character by completing tasks and earn rewards to decorate the pet’s room
Pros: Simple navigation
Cons: Limited narrative depth
Solution 1
Pros: Focus on parent-child collaboration
Cons: Complex design within limited timeframe
Adventure Story
A child and parent pair embark on a sleep-themed adventure, making stops to learn about sleep. Users earn rewards at each stop.
Solution 2
User Flow
Our goal was to design a seamless, one-stop experience that allows users to complete the program conveniently. While the current web-intervention required users to open external links, our solution focused on creating a cohesive and logical user flow, as well as considered the key points where users could earn rewards and how those rewards would be utilized to enhance their engagement.
BEFORE
OUR SOLUTION
Usability Testing
User feedback confirmed the app’s potential to effectively support children with sleep problems and JIA. However, it also highlighted that users needed more clarification on navigation and were confused about certain interfaces.
KEY FINDING 01
The app currently lacked clear navigation and intuitive flows for users to find what they needed to complete on the app every day
KEY FINDING 02
Caregivers often missed or became confused about their tasks, leading to incomplete task completion
KEY FINDING 03
Some icons and naming of the buttons confused users as they didn’t interpret them as we intended to design
Design Iteration
We realized that the following feedback was very crucial. We conducted design reviews with several experts, including an engineer, a UX designer, and a content designer to test feasibility, to refine the tone and language, and to get more ideas on improvements.
KEY ITERATION 01
Added tooltips to improve user navigation
These tooltips provide immediate, contextual guidance, helping users find daily tasks, understand the purpose of side tasks, and know when to complete weekly tasks.
KEY ITERATION 02
Reconstructed the task list and added a short guideline
To clarify task ownership, the new label, such as “Only Kids,” is added in the task list to indicate which tasks belong to whom. The design of the task list was reconstructed to make each task more clear to view. Moreover, a short guideline was added to encourage both children and caregivers to work together.
KEY ITERATION 03
Iterated names to icons Added text labels to icons for more clarity & Revised names
Final Design Flows
The new Sleepsmart mobile app will bring a more personalized and engaging experience for children and caregivers in managing sleep and arthritis pain.
Design System for Better Consistency
Design System
During the development of the app, we established a design system that included a clear visual direction. This design system streamlined our team’s workflow, reducing confusion and iteration time. This system not only benefited our development process but also provided our client with a reusable workframe for future projects.
Sleepsmart Black #000000
Sleepsmart Purple 5
#AA87D5
Sleepsmart Tinted White
#DFDFF3
Sleepsmart Purple 4
#51379A
Sleepsmart Purple 2
#302679
Sleepsmart White
#FFFFFF
Sleepsmart Purple 3
#42308C
Sleepsmart Purple 1
#251855
Reflections
Design for children and their families/caregivers
We faced unique challenges and constraints in designing for children. Our goal was to create an interface that is visually appealing, engaging, and intuitive. Setting the visual direction and tone to be age-appropriate but not too childish was particularly challenging, as it required research and thoughtful consideration. During this process, I learned how to conduct interviews with children aged 8 to 13, gaining valuable insights into their preferences.
I also studied and analyzed popular apps among them and got inspired to create virtual characters, which could be friendly and familiar to users. This experience helped me grow my understanding of the importance of empathy and the true meaning of user-centered design.
Prioritize features and tasks
Since we created this new mobile app from scratch, there were many features we considered important for our final design concept. However, knowing what to prioritize was crucial. Focusing on the most essential features for the minimal viable product was key to meeting our project goals on time.
©2025 JULIA HYERIN CHOI. ALL RIGHTS RESERVED.