UX Research - UX/UI Design

Good Night

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

Project Overview

 

ROLE
  • Sole Product Designer & Researcher
PROJECT TYPE
  • Academic
TIMELINE
  • 10 Weeks
  • (July – September 2020)
TOOLS

Pen & Paper, Sketch, InVision

The 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.

Dan Nessler's Revamped Double Diamond

Dan Nessler’s Revamped Double Diamond

PART 1

Discover

Understanding the problem and the people affected by it

Problem Space

Why are millennials so tired all the time?

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.

In comparison to previous generations, millennials who suffer from sleep deprivation are:

4

more likely to suffer from poor concentration, memory loss, and relationship problems

3

more likely to suffer from depression

2.6

more likely to experience suicidal ideations and tendencies

Project Goal

With the information uncovered during my secondary research in mind, my goal 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.

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. 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.

Conducting user interviews remotely due to the COVID-19 pandemic

PART 2

Define

Synthesizing findings to frame the problem and uncover opportunities

Insights

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

Desire to feel better

Millennials want to improve their sleep because it improves their mood and productivity throughout the day, and they can predict how well their day will go based on how they feel immediately when they wake up.

Need for small, actionable recommendations

Millennials don’t have an in-depth understanding of what factors impact their sleep and are looking for small, actionable solutions that are not intimidating that they can implement in their day-to-day lives.

Skepticism about data from wearables

Wearables can be fun for the social component and useful for smartphone task integration, but millennials are skeptical about the validity of the sleep and fitness data they provide.

Persona

From my synthesized interview insights, I developed a persona and corresponding experience map 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. 

Opportunities for Intervention

Using my persona as a guide, 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 way. This led me to my design question:

How might we help millennials understand ways to improve their sleep in order to improve their mental health and avoid burnout?

PART 3

Develop

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 lead me to select three key tasks for this digital product:

Log a sleep rating based on the user’s perceived sleep quality
Record activities throughout the day
View insights and correlations between activities in the user’s daily routine and their sleep quality

Task Flow Diagrams

Preliminary Sketches

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.

Click any photo to enlarge.

Sketching: Sleep Rating Functions
Exploring different ways to express and record the user’s sleep rating

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

Sketching: Other Functions & Screens

Wireframes

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

Once the screen layouts were in place, 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.

PART 4

Deliver

Testing solutions and improving the most viable ones

Usability Testing

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 see 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.

Clarifying the Purpose of 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.

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.

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.

Brand Identity & Visual Design

Bringing the product 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.

Image by Pixabay

Image by Wendy Wei

Image by Lost & Taken

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.

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.

I ultimately 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.

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

Chosen app icon design for Good Night

Exploring possible app icons

Colour Injection & UI Components

With my brand colours defined, I needed to find the right balance and contrast as I incorporated them into my designs, keeping both branding and accessibility in mind.

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.

Hi-Fidelity Prototype

Try the full prototype on InVision

I created a prototype with the hi-fi screens, allowing me to share a viable version of the product as it would appear to users:

Multi-Platform Integration

Exploring different 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: 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: 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.

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 and lifestyle, I know that she spends a lot of time online and on social media. This means she will likely 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 to focus primarily 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 while 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

Future Thinking

Design impact, next steps, and key learnings

Next Steps

As I want to continue to iterate and improve on my designs, I have posed myself a couple of questions to begin thinking about what the future of Good Night could look like:

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

Potential Design Impact

I used Artefact Group’s Tarot Cards of Tech to consider the potential impact of this product if its user base were to continue to grow.

The Catalyst

How might cultural habits change how your product is used? And how might your products 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.

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.

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.

Thanks for reading!

If you'd like to learn more about my project and design process, feel free to get in touch:

E-mail Me