Mobile UX Design, Behavior Change Techniques
Group of 2 | Sep. 2018 - Dec. 2018
Zzzi - Reduce Your Phone Usage Before Sleep
Nowadays, many young adults are accustomed to overuse smartphone on the bed before sleep.
Many of them tried reducing phone usage to sleep earlier but failed in the end.
Based on Behavior Change Theory
To: Understand the problem space and its impact, we conducted a secondary research.
To understand:
1. Currently, how do users deal with this problem
2. Do they have the motivation to change the behavior
3. Have they succeed in making changes or not
Target Audience
-
Young Adults under 30
-
Overuse smartphone before sleep
-
Motivated to make healthy changes in sleep routine
Frustration
-
Hard to stop browsing the phone at night
-
Cannot stick to the plan every day
Existing Solution
To understand:
1. Has this problem already been solved?
2. How do other products deal with this problem?
#2 Screen Time Apps
#1 General Habit Forming Apps
#3 Sleep Habit Forming Apps
× Not tailored for sleep habit
× Cannot help form a habit
× Not tailored for sleep habit
× Doesn't consider phone usage before sleep
× More like screen time apps
Our Solution
To help our target audience change the behavior, we need to first figure out: why is it hard for them to quit using the phone before sleep?
The Reason
#1 Precious Relaxing Time
"It's the only private time that I have in a day without anyone disturbing me. I can finally relax after a whole day's work."
Our Solution
#1 Set Goal for Phone Usage Before Sleep
The phone usage before sleep is very important to young adults. It's not realistic to deprive this time. Instead, we should prompt users to plan for the phone using time.
#2 No Stopping Point/Force Quit
"When I see the time I know I should put down my phone and sleep, but I just can't do it."
#2 Stopping Cue
People need a stopping cue for them to stop using the phone, no matter it is a notification, vibration or any other cues.
#3 Not Sleepy
"I tried to quit using phone earlier, but I just cannot get sleepy and feel bored just closing eyes doing nothing, then I pick up my phone again."
#3 Suggested Activities
It would be better if people can find some other things to do when they want to sleep but don't feel sleepy. Listening to the podcast, lo-fi music and so on is a good option.
#4 Hard To Insist
"I reduced the my phone usage and went to sleep early for several days, but just several days."
#4 Self-Monitoring
Self-monitoring helps people reflect on their own behaviors. Passive data like sleep time can be provided. People can also rate their performance to help make better decisions.
Design Process
User Testing
#1 Paper Prototype
User Testing
#2 Mid-fi Prototype
User Testing
#3 Hi-fi Prototype
Storyboard
User Flow
Information Architecture
Workflow
Design Details
#1 Goal Setting
To help our users form a better sleeping habit and reduce phone usage, we ask our users to consciously reflect on themselves, and set their own goal.
​
On the plan page, our users can set a bedtime routine for themselves, which include Unwinding Time, Bedtime, Get-up Time. Also, reminder settings and stopping cue settings can be customized on this page.
Design Iterations
#1 Goal Setting
[Design Challenge] How might we help users set a goal for the three times (unwind time, bedtime, wake up time) easily, and display all information straightforwardly?
In the end, the second design was selected because it’s easier to modify plans by dragging and moving the three icons around the clock. Showing sleep time in a clock is a more straightforward way to help users set goals.
#2 Intervention
Stopping cue is our main way of intervening users typical behavior. We suggest our users set a bedtime cue when their sleeping time is approaching. We offer 4 variations of stopping cues: smartphone grayscale, vibration, music alarm and push notification. Users can select a single cue or multiple ones. Users could choose when the stopping cue happens, and snooze the cue if needed.
[Design Challenge] How might we encourage users to quit using the phone at the bedtime while not annoy them by like abruptly cutting off the Internet connection?
#3 Activity Suggestion
We suggest healthy bedtime activities. Examples include: meditation, reading and listen to podcasts.
Users can use this function to fall asleep quicker and have better sleep.
We also suggest other apps for users to explore this page.
#4 Self-Monitoring
To constantly remind users about their performance, feedback happens the next morning when they open the app, and every night when they try to set/review their goals.
The kind of feedback includes sleep quality, goal fulfillment, and self-evaluation. Having a self-evaluation session help them make a wiser plan for the next day’s sleeping time.
For the evaluation form, we ask users to evaluate their last night performance when they wake up. This is going to happen in the next morning, so the feedback is effective and immediate.
Design Iterations
#2 Self-Monitoring
[Design Challenge] What subjective data do we wanna collect in order to maximize the self-monitoring effect while not time-consuming?
We designed the order of the data by considering the importance of each dataset. For example, goal fulfillment is presented at the top, and sleep quality is less important compared to other ones. We used visual representations of their activities last night to help users better perceive the content.
Option #1
Option #2
Option #3
#5 Report
Feedback is an essential way to prolong healthy habits. Our feedback system is based on two kinds of datasets: objective and subjective.
​
For objective data, we collect how users perform by analyzing users’ goal and their actual behavior. We also collect users’ sleep-related data like sleep quality and sleep duration.
​
For our analysis, we also want to know which intervention method (stopping cues) worked. All those data will be provided to users in the report page of the application.
Design Decisions & Iterations
Design #1
Design #2
Logo
Onboarding Graphics
Style Guide
Going Forward
Even though our application has gone through a lot of iterations, there is still a huge room for improvement. And since it is a course project, we did not really put a lot of thought into development and implementation.
​
If I have more time, I would definitely consider conducting more usability testing with the existing prototype and make sure it is polished to a pixel level. On the other hand, we did not fully prototype user’s experience when they enter the sleep page. Right now we only suggest certain activities for them without really prototype further interfaces. We would also consider whether we want to include those activities as an internal feature within the app or just link to other apps as a solution.
​
Besides, we didn't explain the idea of 'Unwinding time' clearly enough to users. It would be better to add a section in the onboarding process to encourage users to set goals for their phone usage time.
​
Since our app does require data from the phone like sleep quality and sleep duration. Thinking from the developer's perspective, access those data would be a major task a developer needs to go through. We would also need a more comprehensive design guide that not only designers but also developers can follow. ​
Take-aways
#1 Behavior Change Techniques
By reading articles and papers, I learned many behavior change theories and techniques as well as the reason why they can help people make changes in habit-forming, which would be a big benefit for me if I have a chance working on another habit-forming/behavior change product (or there's this function in a product) in the future. I'll have the research and proven successful cases to back up my design decisions.
#2 Co-design with another designer
Another important lesson I learned from this project is how to do a collaborative design with other designers. Figma is a super helpful tool that can keep everybody on the same page and display every single change or comment I made immediately to others. Also, I learned how to split design works and how to reach an agreement on the team final design - setting agreed design goals beforehand and articulating the design rationales to each other is the key.
#3 Documenting the style guide from the very beginning
One thing that I'll definitely do better is to document the style guide at the very beginning and modify it along the way. In this project, we didn't make a formal style guide until we almost finished the fi-hi design work, which made the unifying process much harder. Even though we followed mostly the same style when we are creating the UIs, there's still minor inconsistencies in the usage of shades/tints in colors and the weights of the font. With the documentation of a style guide, it would be much easier especially for collaborative designers to follow all the patterns and be more consistent in design.