Good Night is a smart sleep and activity journal that helps users establish better sleeping habits.
Good Night is the result of my capstone project from BrainStation's UX Design program.
Sole Product Designer
(July - September 2020)
Pen & Paper, Sketch, InVision
My process for this project followed the Design Council’s Double Diamond model. This model is “a process of exploring an issue more widely or deeply (divergent thinking) and then taking focused action (convergent thinking)” and is divided into four main stages: Discover, Define, Develop, and Deliver.
As this was an academic project, there were three main constraints in place:
Understanding the problem and the people affected by it.
The early stages of this project were inspired by my own experience and my friends’ and colleagues’ experiences as working millennials - it seems as though we’re always tired, no matter what, and we don’t know what to do about it.
Through some secondary research, I found that millennials, as a generation, experience exhaustion and sleep deprivation at higher rates than other generations, making them more likely to suffer from depression and putting them at greater risk of cancer, Alzheimer’s, and obesity. With that information in mind, I knew this was a problem I could dig into deeper.
My goal for this project was to create a digital tool that could help busy millennials improve their sleep quality, and by extension, their mental health so that they can be more productive, satisfied, and happier in their personal and professional lives.
There are several digital solutions that address sleep on the market already, and they can be divided into three main categories: Sleep Trackers, Fitness Trackers, and Meditation & Mindfulness Apps. I researched and compared several of these products to see what their capabilities and limitations were, and what gaps they left in the market that my product could potentially fill.
Mobile applications that track the user’s sleep cycle, normally using motion and sound detection.
Biggest Gap: These products do not offer solutions to address or improve the user's low sleep scores.
Applications that allow the users to log and track their physical activity, including step counts, calories burned, and periods of inactivity.
Biggest Gap: These apps often require a wearable to access their full functionality and treat sleep information as secondary.
Applications that promote relaxation and mental clarity through guided meditation, calming noises, and bedtime stories.
Biggest Gap: These apps are time consuming and don’t provide any quantitative information for the user to see improvements in their mood.
I knew I needed to speak directly to my target users to uncover their pain points, motivations, and behaviours surrounding their sleep cycle, so I sought out some working millennials and arranged to interview each of them. The goal of my interviews was to find out their existing behaviours and frustrations with their sleep, what motivates them to want to get better sleep, and what they like and dislike about solutions they have tried previously.
Synthesizing findings to frame the problem and opportunities.
After speaking to my target users, I was able to identify three key insights to guide my design process for this project:
After compiling and synthesizing my interview insights, I developed a persona that encompassed the most pressing needs and frustrations expressed by my interviewees. I consistently referred back to my persona, Mabel, throughout the design process to ensure that I was designing for real needs with a human-centred approach.
I created an experience map for my persona to visualize her journey and help identify possible opportunities for intervention with a digital solution.
Based on my persona, it was clear that my solution needed to be focused on the causes of sleep deprivation and giving users small behavioural nudges that would have a larger cumulative impact on their sleep quality. Overall, there is an opportunity to educate users about how their daily habits and behaviours affect their sleep, and ways they can improve it in a personalized manner.
I posed myself a How Might We question to frame my problem and help launch my ideation. After several iterations and refinement of the scope and boundaries, the question I moved forward with was:
How might we help working millennials understand ways to improve their sleep in order to improve their mental health and avoid burnout?
Exploring potential solutions.
I authored a set of 30 user stories, from the perspectives of different users, each of which led to different tasks that could be performed on my app. I then categorized the user stories into epics, which allowed me to prioritize which tasks would most effectively help my users reach their goals.
With the needs and goals of my persona in mind, I knew a few things needed to be true for this solution to be effective:
This led me to select three key tasks for this digital product:
Based on my user stories, I created task flow diagrams for two of the above tasks to help visualize how a user would complete tasks within the product:
With task flows developed, I sketched out several concepts of what a user interface might look like for these tasks in an effort to explore which options might best address my user's needs.
Exploring different ways to express and record the user's sleep rating.
Stars - a scale of 1 to 5
Slider - a scale of 1 to 10
Thumbs up/Thumbs down (binary)
Ways of displaying information and recommendations in a simple, digestible way for users who do not have an in-depth knowledge of sleep science.
A line graph that shows the trends and changes in the user's sleep rating, as well as their most frequently logged activities.
Highlighting days with similar activities and scores to help the user start building awareness of their habits.
Recommendation that could be offered to the user based on their sleep rating and previously recorded activity.
Selection of pre-loaded activities recommended by the app and laid out for the user to select from.
A library of common sleep factors to help the user learn more about why and how their activity is affecting their sleep.
A single detail page for sleep factors with more in-depth information, but still phrased in a way that is easy for the user to understand and learn from.
I began translating my most viable sketches into digital wireframes, adjusting the spacing and components to suit the screen and grid sizes.
At this stage I began to add iconography and adjust the shapes, corners, and copy to better reflect the desired feeling of the product and have it ready for usability testing.
Testing solutions and improving the most viable ones.
After building an InVision prototype out of the mid-fidelity screens, I conducted two rounds of usability testing for Good Night, with five participants each. My goal for these sessions was to find out if users could successfully navigate through the primary and secondary tasks laid out during the Develop phase and to iron out the most pressing usability issues.
One of the most common issues during the first round of testing was that the users didn’t understand what the Sleep Factor Library was or know what to expect when navigating into that section of the app. This was important because, from my interviews, I knew that my users wanted access to information about how their behaviours can affect their sleep, and they had a need to understand the reasoning behind the recommendations and tips being offered to them. However, my test users indicated that this information wasn’t being communicated clearly.
Navigating to the Sleep Factor Library originally led directly to this list.
Updated landing screen for the Sleep Factor Library.
To address this, I added an additional screen to the flow that clearly but quickly explains to the user what purpose the Sleep Factor Library serves. The user has the option to not see the message again in the future if they wish, but they now have more context for what this section of the product is for and how it helps them achieve their goals. With this screen included during the second round of testing, none of the users struggled with understanding the Sleep Factor Library.
On the Insights screen, Good Night shows users activities they have frequently recorded and whether they commonly correlated with good or poor sleep ratings. During testing, some users were confused by this feature - for example, if the app shows that drinking a coffee or watching TV often correlated with a low sleep rating, does that mean the user should never do those things? They’re human beings, and that would be an unreasonable suggestion.
Version 1 of the Insights screen.
Updated Insights screen.
To amend this issue and add context and clarity to the user’s insights, I included labels to introduce suggested boundaries and limits for recorded activities, such as time of day (eg. coffee after 3 p.m.) or amount of time (eg. 2+ hours on social media), that could help users adjust their habits and behaviours.
Bringing the brand's identity to life.
I wanted the look and feel of this app to be soft and calming - mostly monochromatic, with no harsh lines or angles. I drew on a lot of colours and textures from nature and environments with a relaxing ambiance.
I settled on lilac and taupe colours, which work well both separately and together in a soft gradient, and added a darker oxblood colour and white for accents and function where needed for contrast.
I experimented with a few possible names for the product, but one phrase that came up multiple times during my user interviews was, “I know I’ve had a good night when…” Seeing as this mobile app is designed to help users have those good nights, it felt like the right fit for the brand name.
I sketched out the name “Good Night” in a few different cases, weights, and orientations, but felt most drawn to the lowercase iterations and rounded font styles, as they were consistent with the softer mood of the app.
I chose a sans-serif font, Tsukushi A Round Gothic, in a bold weight, because I felt that the roundness of the bowls and terminals best suited the visual identity I wanted to build. After translating the wordmark into a digital version, I customized it by modifying the tittle of the letter i into a diamond shape that resembles a star in the night sky:
This star also became the app icon and allows the logo to scale down from the full wordmark to a single symbol:
Chosen app icon design for Good Night.
Exploring possible app icons.
With my brand colours defined, I needed a bit of experimentation and trial and error to find the right balance and contrast as I incorporated them into my designs.
I ultimately chose to incorporate soft shadows for depth and some transparency and background blur into the UI elements to give them a “frosted glass” effect, which incorporated elements from my visual identity moodboard but also allowed the text and icons to remain legible and accessible.
With the visual identity and UI components fully realized, I built a new prototype of Good Night with the high-fidelity screens, allowing me to experience and share a viable version of the product as it would appear to users.
Exploring other use cases and interactions for the product.
While users expressed that they do not place a lot of trust in the sleep and activity data wearables provide, about 50% of my interviewees during the research phase stated that they liked having a smart watch because it allows them to streamline their workflow and perform basic, common tasks without pulling out their phone every time.
I authored a few additional user stories to consider ways that existing Good Night users might benefit from having a smart watch integration, and selected one to pursue:
“As an existing user, I want to be able to record my sleep rating and activities without taking out my phone when I am on the go.”
Sleep Rating (Top): With much less screen real estate to work with, I replaced the slider from the iOS version with plus and minus buttons, and incorporated the red and green feedback colours so the difference between good and poor ratings was still clear to the user.
Logging Activities (Bottom): For the Apple Watch version, I kept the UI style and vertical scrolling from iOS but removed the icons and placed the options in one column instead of two, again to preserve screen space and keep the activity logging process quick for the user.
Attracting New Users
As part of my business strategy for Good Night, I considered possible ways that new users could be attracted to the product, and encouraged to download it and sign up.
Based on my persona's experience map, I know that she spends a lot of time online and on social media, and she will be searching the Internet for solutions to her sleep problem, as well as seeing targeted advertisements and blog posts from other users. It is highly likely that she will be redirected to a web page at some point during her search, so I designed a marketing website to introduce prospective users to the product.
Landing page for Good Night's product marketing website.
Rather than focusing on the function of the app, I wanted the website content to focus on the value proposition of Good Night, which is that it helps users get better sleep. I also chose to include my brand's story, emphasizing that the product was created by a millennial, for millennials, and appealing to users' human sides and keeping the friendly, inviting mood of the app consistent.
Showcasing part of the brand story.
Video explaining the validity behind Good Night's recommendations.
Because I know my target users are frequent and savvy smartphone users, I also made sure that the website design was responsive and could adjust to mobile viewports.
Content distribution optimized for mobile, including a fly out menu in place of the header navigation from the desktop version.
Next Steps & Key Learnings
As I want to continue to iterate and improve on my designs, I have posed myself a few questions to begin thinking about what the future of Good Night could look like:
Considering the potential future impact of Good Night using the Tarot Cards of Tech by Artefact.
What would using your product "too much" look like?
With trend-tracking apps, I think there is a risk of more extreme users becoming overly reliant on data. Using this product “too much” could mean a user is recording their activity in extreme detail, while neglecting to make any of the recommended adjustments in their daily routine. Success with a product like Good Night will require some commitment to action on behalf of the user, and not just relying on the technology as a quick fix. I definitely want to take this into consideration when designing the onboarding and tutorial processes for the product to help users optimize how they use it.
How might cultural habits change how your product is used? And how might your product change cultural habits?
With the quick advancement of the Internet and mobile technology available, working professionals, especially millennials who are trying to secure stable careers, often feel pressure to adopt the “always on” mentality. I hope that a product like Good Night can help to not only boost their productivity and mental health, but also to better their understanding of the importance of sleep and finding balance between work and rest.
Experiencing the end-to-end design process on my own in 10 weeks allowed me to challenge my own working style and adapt my thinking in many ways.
With a tight timeline and short turnaround times on my deliverables throughout this project, I had to learn quickly how to evaluate and compare my designs, and prioritize making the changes that were most viable, realistic within my constraints, and beneficial to my users.
This was so important during all phases of my design process. From uncovering my users’ pain points and motivations to questioning my own design choices, I needed to keep myself on track by digging deeper and asking why. Why does a user feel the way they do? What makes this a problem they need solved? Why does this specific feature or component need to be included in the design? This helped me stay focused on my users’ needs and guided me to create a solution to a real problem instead of over-designing with no purpose.
© Kayley Cheung 2020