wordmark-colour

Good Night is a smart sleep and activity journal that helps users establish better sleeping habits.

Mockup

Good Night is the result of my capstone project from BrainStation's UX Design program. 

Group-2

Sole Product Designer

Group-2-1

Academic

Group-3

10 weeks
(July - September 2020)

Group-5

Pen & Paper, Sketch, InVision

Design Process

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.

1_3noihi4CGXPZAgevbk87Yg

Constraints

As this was an academic project, there were three main constraints in place:

  1. A rigid timeline of 10 weeks
  2. The product needed to be a native mobile application
  3. There was no funding or budget to work with

Discover

discoverwhite

Understanding the problem and the people affected by it.

Problem Space

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.

Project Goal

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.

Competitive Analysis

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.

Sleep Trackers

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.

sleep-trackers
Fitness Trackers

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.

fitness-trackers
Meditation & Mindfulness

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.

meditation

Exploratory Interviews

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.

Define

definewhite

Synthesizing findings to frame the problem and opportunities.

Insights

After speaking to my target users, I was able to identify three key insights to guide my design process for this project:

insight1
insight2
insight3

Persona

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.

43-Primary-Personanew

Experience Mapping

I created an experience map for my persona to visualize her journey and help identify possible opportunities for intervention with a digital solution.

45-Experience-Mapping

Opportunities For Intervention

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.

Design Question

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?

Develop

developwhite

Exploring potential solutions.

User Stories & Epics

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.

Task Selection

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:

  • Perceived sleep quality is key, rather than the quantitative data about stages of sleep. Users are most concerned with how they believe they feel when they wake up.
  • The solution needs to be action-focused and provide guided recommendations, and help the user understand the justification behind those recommendations.
  • The product cannot require the use of a wearable to track sleep or activity data.

This led me to select three key tasks for this digital product:

Grouptask
Group-2task
Group-3task

Task Flows

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:

59-Task-Flow
60-Task-Flow-2

Preliminary Sketches & Wireframes

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.

Sketching - Sleep Rating Functions

Exploring different ways to express and record the user's sleep rating.

Image-3

Stars - a scale of 1 to 5

Image-2

Slider - a scale of 1 to 10

Image-1

Thumbs up/Thumbs down (binary)

Sketching - Data Visualization, Insights & Recommendations

Ways of displaying information and recommendations in a simple, digestible way for users who do not have an in-depth knowledge of sleep science.

Image-7

A line graph that shows the trends and changes in the user's sleep rating, as well as their most frequently logged activities.

Image-8

Highlighting days with similar activities and scores to help the user start building awareness of their habits.

Group-4

Recommendation that could be offered to the user based on their sleep rating and previously recorded activity.

Sketching - Other Functions & Screens
Image-4

Selection of pre-loaded activities recommended by the app and laid out for the user to select from.

Image-5

A library of common sleep factors to help the user learn more about why and how their activity is affecting their sleep.

Image-6

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.

Wireframes: Low Fidelity

I began translating my most viable sketches into digital wireframes, adjusting the spacing and components to suit the screen and grid sizes.

Inactive
Add-Activity
Sleep-Library-1
Wireframes: Mid-Fidelity

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.

Slidermid
Add-Activitymid
Sleep-Librarymid

Deliver

deliverwhite

Testing solutions and improving the most viable ones.

Usability Testing & Iterating on Designs

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.

Adding Clarity to the Sleep Factor Library

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.

Sleep-Library-2

Navigating to the Sleep Factor Library originally led directly to this list.

Sleep-Library-Intro

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.

Contextualizing "Bad" Activities

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.

Insights

Version 1 of the Insights screen.

Insightsv2

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.

Visual Design

Bringing the brand's identity to life.

Branding Inspiration

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.

PRIMARY
SECONDARY
DARK
WHITE

Brand Name & Wordmark

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.

2020-08-29-20-30

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:

wordmark-bwsolid

wordmark-bw-copy

This star also became the app icon and allows the logo to scale down from the full wordmark to a single symbol:

App-Icon

Chosen app icon design for Good Night.

logo-exploration

Exploring possible app icons.

Colour Injection & UI Components

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.

Clay-Whitemock3-1
Clay-Whitemock2
Clay-Whitemock

High Fidelity Prototype

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.

Multi-Platform Integration

Exploring other use cases and interactions for the product.

Apple Watch

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.

watch-mockup-2
watch-mockup-3

Product Marketing Website

Attracting New Users

Marketing the Product

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.

Screen-Shot-2020-09-11-at-8.20.35-PM

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.

Screen-Shot-2020-09-11-at-8.21.19-PM

Showcasing part of the brand story.

Screen-Shot-2020-09-11-at-8.21.49-PM

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.

Screen-Shot-2020-09-11-at-8.23.37-PM
Screen-Shot-2020-09-11-at-8.24.25-PM
Screen-Shot-2020-09-11-at-8.24.07-PM
Screen-Shot-2020-09-11-at-8.34.59-PM

Content distribution optimized for mobile, including a fly out menu in place of the header navigation from the desktop version.

Conclusion

Next Steps & Key Learnings

Next Steps

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:

  1. How could this product be used by different user groups or generations, who have different lifestyles and sleep needs?
  2. For existing users, how would the app continue to get “smarter” and promote prolonged use and user retention?
  3. Is there a way to add a social component to this product (eg. sharing sleep tips with friends)?

Tarot Cards of Tech

Considering the potential future impact of Good Night using the Tarot Cards of Tech by Artefact.

The Siren

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.

Screen-Shot-2020-09-10-at-12.57.29-PM
Screen-Shot-2020-09-10-at-12.57.40-PM
The Catalyst

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.

Key Learnings

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.

Prioritizing Designs

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.

Keep Asking Why

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.

Let's Connect

© Kayley Cheung 2020