Project Overview
Through the 12 weeks of this Bootcamp, there were countless “4 AM”s when I stared at the ceiling of my bedroom and wondered “why can’t I just sleep without having too many thoughts?” Then I realized, that if there is a digital solution like an app, that can not only record my sleep pattern and behaviour, but also help me plan my night time and prep me for a good night's sleep, that will be a lifesaver for me, and other people who suffer from the same issue as I do.
SleepBank is an iOS app that educates and helps users organize and plan their night time more efficiently so that they can achieve a better sleep quality.
Trying to sleep eh?
Have you ever experienced the frustration of not being able to fall asleep after a long day? Or constantly waking up multiple times at night? Or even feel irritated, depressed, and anxious about not feeling well-rested after a night's sleep? All of these struggles can result in difficulty paying attention and hard to focus on tasks for the next day, affecting people’s work and study performances.
Core Problem
At some point, many adults will experience some degrees of acute insomnia symptoms, ranging from one night to a few weeks.
Many of the symptoms are caused by stress, busy work and study schedules, poor sleep habits and other life practices
What if there is a solution...
I wish my digital solution can help millennials feel a sense of release when they are thinking of planning their time before bed. By using simple layouts and minimalist design, I hope my users can just relax and follow the app’s instructions to optimize their rest quality.
A good UX design always started with a solid UX design process. So I started to follow the UX design thinking process to ensure my final design had every aspect rooted back to human centred design core with research support.
Design Process
Problem Space
Study conducted by American Psychological Association has shown that across all age groups, millennials have the highest percentage (29%) on reporting feel stressed by a lack of sleep.
64% of the millennials state that they sleep fewer than 8 hours a day. This sleep deprivation can affect memory, judgment and contribute to health problems.
To dig deeper into the problem space, I want to take a close look at some potential root causes that relate to millennials’ sleep issues and possible design solutions. To do so, I started with more detailed secondary researches in the problem space.
Statistics
Through secondary research, I found that during the COVID quarantine period, according to a study published in the American Academy of Sleep Medicine, there were 2.77 million Google searches for “insomnia” in the U.S. during the first five months of 2020 — an increase of 58% over the same duration in the previous three years...
With the data and statistics support, I could see the rising importance of insomnia symptom and sleep issue. To learn more, I decided to conduct interviews. My goal was to gather some personal experience, opinions, and insights about sleep behaviours and patterns, and some current practices that people are using right now.
Participant Criterias
Based on the primary research and interview insight summaries, I finalize the How Might We so that it covers the participants’ pain point and behaviours mentioned in the interview. A scientific and efficient planning and preparation guideline before bed will help users to improve their sleep quality at night.
How might we help millennials plan and prepare for better quality rest in order to sustain a healthy lifestyle.
After going through my interview findings, summarized pain points / motivation / behaviours and synthesized insights, I created a persona that could best represent my target user and demographics. This persona was constructed with real interview data I collected, and shared same pain points and motivations as my targeted demographics.
Hello
My name is Jacob Wong
“There was one time that I needed to get up early in the morning for an important work presentation. I felt stressed as I thought ‘I had to fall asleep and sleep well.’ Then I was awake until 7 am. Melatonin was not working at all, and I was exhausted for the entire day...“
Motivations
-
When I wake up in the morning, I want to feel fresh and energetic for the day.
-
I don’t want to wake up in the middle of the night.
-
I want to sleep before 0 am and sleep about 8 hours.
-
I want to try some guided meditation apps, which might be helpful.
Frustrations
-
I often have stressful dreams about my work.
-
Sometimes I wake up multiple times in the middle of the night.
-
The lack of high-quality sleep has given me anxiety.
-
I can’t fall asleep right away after putting down the phone due to heavy stimulation.
Behaviours
-
I try to maintain a 4-day workout schedule.
-
Sometimes I need to take melatonin to fall asleep.
-
Oftentimes, I will wake up with a headache because I know I wasn’t sleeping well during the night.
With a developed persona, I was able to create a usr experience map for Jacob. It helped me to visualize the entire end-to-end user experience that an average user like Jacob will go through in order to accomplish a goal.
Following this user experience map, I developed a quick task flow and then revised three times for the persona Jacob. It includes a basic workflow of one of the main functions of the digital solution, which is set up the bedtime and wake up time in the app, and follow the suggested night time routine checklist for improving the sleep quality at night.
Task flow
.png)
Once I decided on my main task flow, it's time to move on to the sketching. I began drawing frames based on the key step I identified in the task flow. As a very early design process, I was aiming to to create a quick layout guideline for my low to high fidelity wireframe and final prototype.
Sketch
I then moved on to medium fidelity grey-scale wireframe. By doing 2 rounds of user testing with mid-fi wireframe, I implemented user feedback and I was able to put in some more details design to showcase some features and minimum user interactions.
Branding
Before moving on to complete the prototype, there was one more thing ---- Branding. I needed to figure out my brand image for SleepBank, logo and wordmark, typography, and brand colours. So I began searching for inspirations online, mainly focused on the overall mood I wanted to set for SleepBank and the message I wanted to deliver while using my app.
Visually Identify Moodboard
I wanted SleepBank to deliver calm, approachable, peaceful and relax feeling to my users with abstract, clean and simple UI design and colour. Therefore, for visual identity of SleepBank, I wanted to mainly use waves and lines as connections to guide users through the app and the task flow.
Naming & Logo Inspirations
For naming, I wanted it to be playful and straight forward to the users. So I ending up with a productivity related name SleepBank as it contains the idea of saving up the sleep time for future health investment.
For logo, I wanted it to reflect both “sleep” and “bank”, so I came up with an idea of a piggy bank wearing eye mask as it symbolized sleep in most of the culture.
Then I was experimenting with different typography and arrangement for the logo and the wordmark.
I wanted my logo and wordmark to have high readability even on a small screen, which helped me to make the highlighted one as my final logo and wordmark choice.
Typography
SF Pro
Primary Typeface
SF Pro is a neutral, flexible, sans-serif typeface that is the system font for iOS, iPad OS, macOS and tvOS. SF Pro features nine weights, variable optical sizes for optimal legibility, four widths, and includes a rounded variant
Mosk
Logo Typeface
Mosk is a clean linear sans serif type with nine powerful styles and various weights. It is perfect for my titles because of its simple angled letterforms.
Colour
Once I was happy with the branding, typography and brand colour, I started to experiment with colour injection. From there, I added final colour choices and some additional user interactions to make the whole experience smoother. Couples of design iterations with peers and friends, twisting in figma, "3am-sparks-of-inspiration" and "maybe-I-should've-started-this-yesterday" later, I was finally able to put this high fidelity prototype together.
Marketing Website
In order to delivery a fuller experience to the users, I created two responsive marketing / campaign websites that can be view on both mobile and desktop device.
The theme I set for the website was "from morning to night", I wanted to bring everyone who visited the site an immersive experience while scrolling through.
What's for the future?
As people are now transiting between on-site/in-person and hyper/remote styles of working and studying, I want to expand SleepBank's function from just sleep prep to sleep management. I hope to create a digital solution that educates and helps users organize and plan their nighttime more efficiently so that they can achieve better sleep quality. Meanwhile, users can find other sleep-related information as such suggested supplement education and sleep performance monitoring. My goal for SleepBank is to educate people on how to properly rest and understand their sleep behaviour as well as their sleep patterns better. If anything happens, people will have a resource to refer to when they need to quickly look up some tips to cater to their sleeping needs.
Key Learnings & Reflection
Throughout this project, I have learned a lot as a UX researcher and designer. Coming from an engineering background, I found myself using more structural problem-solving techniques when approaching this new field. Leaning on the time-management skills, problem-solving skills, and academic research techniques I developed during my undergrad and master's engineering education, I was able to quickly navigate around and find alternative solutions to any blockers I ran into for this project.
I quickly learned that sometimes during the design process, one feature might seem obvious to the designer, but not necessarily to apparel obvious to the user. Hence, it’s very important to perform user testing on the prototype, so that designers can gain primary user feedback in real-time.
On the other hand, I realized that a good UI design isn’t just about how pretty the interface is, it’s more about how easy can users navigate through your design and how the design suits their natural habits.
Last but not the least, I want to thank my cohort from BrainStation and the education team for giving me incredible support and professional critics.