Sleep-Aid Smart Device App Design
How well do you sleep at night?
Health officials advise adults to have 7-9 hours of sleep each day. However, 80% of American adults report having difficulty sleeping at least once a week, such as falling asleep, staying asleep, and waking up feeling more tired. Why? Consumer Reports suggests issues like social problems (think: COVID-19, unemployment rate, poverty, and gender issues) and unhealthy lifestyles (lack of exercise and bad eating habits) expose individuals to sleep disorders.
Slumbo provides the answer.
It aims to solve the day-to-day problem and allow users to maintain mental, physical, and emotional health by providing the best sleep environment. I designed Slumbo's iOS application that invites the users to actively monitor and control their sleep condition based on the market research, user survey, wireframes, and usability tests.
🌙🌙🌙
Key features
1. Control pillow temperature between 62˚F - 72 ˚F from a mobile device.
2. Turn on/off the smart alarm to adjust pillow temperature at the desired schedule.
3. Provide sleep reports to let the user observe personal sleep patterns and keep quantitative data on sleep.
4. Write a short daily sleep log for self-monitor and reflect sleep patterns.
2. Turn on/off the smart alarm to adjust pillow temperature at the desired schedule.
3. Provide sleep reports to let the user observe personal sleep patterns and keep quantitative data on sleep.
4. Write a short daily sleep log for self-monitor and reflect sleep patterns.
Responsibilities
Ideate
Research
Wireframes
Prototyping
Logo Design
Usability Testing
Research
Wireframes
Prototyping
Logo Design
Usability Testing
Tools
Figma
Adobe Illustrator
Maze
Adobe Illustrator
Maze
Research
Understanding the Problem Space
From the start of this project, I knew the problem was universal. People have trouble sleeping. There have been many attempts to solve this problem -- it was crucial to know what methods the users currently use for better sleep experiences. Thus, I decided to conduct thorough market research on the current products' successes and failures and use a user survey to understand the users' motivations, as well as unsolved problems and needs.
Going into research, I set four high-level goals:
01 Compare and understand its competitors and how they approach the problem
02 Identify the target user group
03 Explore what sleep devices the target users use to improve their sleep experiences
04 Discover scientific proofs to support the functionalities of Slumbo product
User Survey
First and foremost, I was curious to know about the potential users. To understand their interests, pains, needs, as well as current coping mechanisms, I crafted a user survey via Google Form and recruited 8 participants who have sleep issues and have experiences using any kind of sleep-aids.
Questions includes
∙ On a scale of 1 to 10, how would you rate the quality of your sleep?
∙ Please fill in the blank. "When I think about my sleep experience, I wish I could (____________).
∙ What are some devices you used in the PAST to improve your sleeping experience?
∙ Other than sleep-aid devices, what do you do to improve your sleep experience?
∙ If you can have a sleep-aid device, what function(s) do you expect to use the most?
∙ On a scale of 1 to 10, how would you rate the quality of your sleep?
∙ Please fill in the blank. "When I think about my sleep experience, I wish I could (____________).
∙ What are some devices you used in the PAST to improve your sleeping experience?
∙ Other than sleep-aid devices, what do you do to improve your sleep experience?
∙ If you can have a sleep-aid device, what function(s) do you expect to use the most?
The result showed that
∙ All participants are actively trying to improve their sleep
∙ Falling asleep is the main concern for most of the participants, followed by staying asleep and waking up to an uncomfortable feelings
∙ Participants spend 30 minutes to 2 hours in bed before falling asleep
∙ Participants are less likely to utilize tech machines / apps due to ineffectiveness
∙ Participants are interested in functions that can directly improve sleep quality
∙ Falling asleep is the main concern for most of the participants, followed by staying asleep and waking up to an uncomfortable feelings
∙ Participants spend 30 minutes to 2 hours in bed before falling asleep
∙ Participants are less likely to utilize tech machines / apps due to ineffectiveness
∙ Participants are interested in functions that can directly improve sleep quality
Competitive Analysis
The first stumbling block for this project was that the users were less likely to use mobile devices to solve sleep problems. To understand why and what could be improved, I decided to learn about available products in the market. There were five smart devices with sleep-related features: ZEEQ, XIAO MI, MOONA, WHOOP, and fitbit.
All five have a smart alarm feature via temperature, sound, or vibration and allow the user to manage sleep duration and sleep schedule. I learned that in order to create the go-to application for anything sleep-related, adding an alarm feature is required.
Nevertheless, the quantitative data these devices provide the users are just information on past experience. The users can benefit from a solution for future experience.
Click to enlarge
Market Research
Likewise, we see a variety of sleep-aid devices in the market today, from a $1.99 mobile app to a $400 sleep headband. As more and more people are desperate to sleep well, the sleep market is expected to exceed $101.9 billion in revenue by 2023. The question is, what is the effective solution for all?
From the articles, studies, and researches on the sleep, I found one important factor of good sleep. It was the temperature. The body's temperature decreases during sleep and increases again when waking up. Thus, sleeping and waking up at a right temperature could leave positive feeling during and after sleep. Temperature between 60-67˚F will give Slumbo users the quality of sleep they desire.
Self-reflection was also a key to improve sleep. Studies suggested that when the individual actively monitors and analyzes sleep, the duration and quality of sleep improve. The experts recommend writing a sleep journal for that reason.
Thus, I decided to adopt 'temperature control' as the main feature of Slumbo. When the user connects the smart pillow to the iOS app, s/he can manage appropriate setting for a good night sleep. In addition, twitter-like, private 'sleep-log' feature will be added for the users to quickly write short reflection of each night's sleep.
🌙🌙🌙
Define
Translating research results into goals, motivations, and solutions
Persona
I crafted a persona, Emma, to connect and empathize with the potential users. I adopted the user survey results for Emma's characteristics and background information-- I imagined tech-savvy, young, modern, and economically affluent individual as a target user. Emma feels obligated to better herself every day; she is always working, learning, and connecting with the world until the second she falls asleep. Then, how can she restore energy to perform better the next day without a good night sleep?
Creating her story let me stay focused on the users' motivations, needs, and pains. I believed busy and competitive individuals like Emma would want punctuality and efficiency from their sleep as well. Therefore, I decided to create an app with a few core functions that guarantee to help fall asleep fast and easy.
Click to enlarge
Empathy Map
This project, more than the other projects, was all about the experience both in and out of the app. How does Emma feel when falling asleep? How fast does Emma fall asleep? How helpful was Slumbo in that process? To compare before and after Slumbo in life, I created this empathy map. During the process, I set 'think & feel' and 'say & do' areas as the priorities to focus on while crafting a user journey.
Click to enlarge
POV & HMW
I began to understand the users a little better through the persona and empathy map. Since sleep is such a universal subject, I could come up with a long list of problems and solutions. Like I discovered earlier, Slumbo should stand for punctuality and efficiency. It should not have twenty-something functions for the users to choose from. To help myself stay focused on the core features, I wrote POV and HMW statements.
🌙🌙🌙
Ideate
Visualizing the solutions
Site Map
Throughout the user interview, I received the impression that the simpler the better. The Slumbo app has one core function and three "bonus" features. Here, the challenge was to make a connection between the pages to suggest users' engagement with all available features as possible to improve their sleep.
However, as I tried to add a reminder to use other features, the information architecture got disruptive and the user journey was confusing. Most of the users were to use the app right before and after sleep, so I decided to focus on the return rate to the app over the usage duration on the app.
The final version of the sitemap (below) highlights Slumbo's straightforward information architecture. I made sure to include interactive features, like setting a temperature preset, adding graphic aids, and sharing the data with a sleep therapist, for the users to actively engage with their sleep-improvement process.
Click to enlarge
User Flows
After the site map, I thought of the main tasks Emma would want to get done on Slumbo app and test if the IA meet the efficiency and punctuality standards.
How would Emma turn on/off the Slumbo and control temperature?
How many steps would Emma take to set up a smart alarm?
How would Emma write a sleep log in the morning?
How can Emma use sleep data on the app?
The user flow charts were helpful when I had to decide which function or information should live under each tab. The users think of sleep as an easy task they cannot accomplish well. It's a complicated relationship. The less step required, the better the user experience becomes on Slumbo.
Temperature control task
Smart Alarm Task
Sleep Log Task
Sleep Data Task
🌙🌙🌙
Prototype
The look and feel of the solution
Logo
Slumbo welcomes the users to take the control of improving their sleep experiences. The visual branding of Slumbo should imply these three adjectives: comfort, friendly, and fun.
Slumbo is an easy and fun everyday solution for the users. I began the logo sketch with sleep-related words: eyes, stars, clouds, and dreams. Then I thought of the emotions I wish Slumbo could bring to the users, like happiness and satisfaction.
The final version of the logo is a smiley face made of a thermometer (the main function of Slumbo).
Mood Board
When directing the visual narrative of a brand, I enjoy creating a mood board. It allows me to test different aesthetics and find the right tone for the brand I am working on.
For Slumbo, I considered that this is a sleep-aid application. The users would most likely use this app in the night time. So I wanted to create a calm, peaceful, and balanced tone through purple. Blue and red from the temperature could add excitement, fun, and youth to the interface.
For the edges, cards, graphs and icons, I picked rounded edge to be easy on the eyes and minds.
Click to enlarge
Style Tile
The tone and mood I created for Slumbo were organized with a style tile a UI kit . Because I set rules for typography, color, and visual elements beforehand, I did not have to worry about consistency when creating multiple tabs and pages.
Click to enlarge
UI Kit
For Slumbo is an iOS mobile application, I followed Apple's Human Interface Guideline when designing the UI states. I also communicated with a third-party developer on the restrictions and the possibility of visual design elements. The temperature sliders gave me the hardest time, especially since they are 3/4 circle with gradient fill. Still, I pushed through because it was essential to imply Slumbo's fun and rounded identity from the first page of the app.
Click to enlarge
Lo-Fi Wireframes
What screen will greet the users?
This was the first problem I needed to solve. I wanted the first screen to include the overview of the user's activities and some interactive features to give the users a sense of control.
I came up with three different versions of the front tab and ran them to a A/B testing. Based on the site map, the navigation tabs were
∙ Dashboard : Overview of the user activity
∙ Sleep Log : Write a sleep journal that can be bookmarked or send out via message, email, etc.
∙ Temperature : Control temperature and access temperature set history
∙ Smart Alarm : Set up temperature and alarm schedule
∙ Account : Access general information, previous sleep reports, and customer support
∙ Sleep Log : Write a sleep journal that can be bookmarked or send out via message, email, etc.
∙ Temperature : Control temperature and access temperature set history
∙ Smart Alarm : Set up temperature and alarm schedule
∙ Account : Access general information, previous sleep reports, and customer support
After the A/B testing, I decided to move on with the choice B on in the middle. It had temperature on/off button on the bottom of the page for easy hit with a right thumb. Afterwards, I created more pages following the user flows.
Hi-Fi Wireframes
Applying colors and adding more details were fun part of this project. Going back and forth between the mood board, style guide, and the wireframes, I constantly asked if this is the look and feel I wanted to convey.
I wanted to put this version to a test and see what kind of reactions the users have with this in-app experience. Below are some pages of the high-fidelity wireframes.
🌙🌙🌙
Test
Testing the usability and interaction
Usability Test
I had 14 users volunteered to participate in this testing. All of them have experience controlling a smart device via app.
Due to COVID-19 and the state-wide lock down, I was not able to conduct in-person observation. Instead, I used Maze to give test instructions and obtain test results including interaction data. The focus of this test was to inspect potential disruptions in the user flows and identify the user interaction patterns. The tasks were as follow.
1. Connect a smart pillow to the app
2. Turn on the pillow and adjust the temperature
3. Set up a smart alarm
4. Write a sleep log
5. Check your sleep report
Affinity Map
Among the test participants, four volunteers agreed to have in-depth user testing interviews. While comparing the data from Maze, I asked the volunteers to think out loud.
Overall, the major successors were organization of navigation bar and the accessibility of a power button. On the other hand, the blockers were icons and the overview information cards on the front page.
As predicted from the research, the users were less interested about the past experience. Instead, they were a lot more attentive and engaging when they could control something that can benefit their future!
Click to enlarge
Revisions
During the usability test, I realized that the first tab needed more impact. While being simple, it should immediately remind the users why they chose Slumbo in the first place. To solve this problem, I asked one question. What do users expect from Slumbo?
I went back to the user survey. The users want to sleep good tonight. So, instead of giving an overview of last night's sleep, I decided showcase one solution that will directly and immediately improve tonight's sleep: the temperature control.
I also made three other changes based on the user feedback.
1. I replaced icons to clearly label each tab.
2. I clarified the each section's function on the smart alarm page.
4. The users said they would not write a long sleep log in the morning. So I decided to use a sheet instead of a whole new page for the users to quickly write their short sleep reflection.
Sending It Off
Reflections and conclusion
I got an idea to start this project because I have difficulty sleeping. As soon as I started this project, I could relate to the pains and needs of the target users. However, there was a downside too. Because I share similar pains and needs with the persona, Emma, it was hard for me to be unbiased. From time to time, I needed to remember that something that might seem obvious to me might not be the same to the other users, or something that is significant to me might not be so to others. Keeping myself as a user-centered designer, more than a user-designer was the most challenging yet interesting part of this journey.
While sending it off to a developer's hand, I wished more prototype options were available on Figma. I had to explain verbally and make notes for some of the interactions, such as controlling the temperature knob and a sleep log sheet coming on from behind the navigation bar. Such limitation suggested me to learn new tools like Adobe XD or protopie.
🌙🌙🌙
