Luna

An iOS native app that helps people who deal with stress and anxiety sleep better at night by improving their mental-well being. 

Luna-Project

Project Type

Passion Project (12 weeks to complete)

Role

Both Vanessa and I evenly split the roles of UX Designer, UI Designer & Researcher. 

Team

Raymond Chou
Vanessa Ungerer (Online Portfolio)

Tools

Figma, InVision, Adobe Photoshop

Project Overview &
Design Process

Luna is a passion project that Vanessa, a fellow designer, and I began shortly after we graduated from BrainStation’s UX Design diploma program. We discovered that we both had a shared interest in health & wellness, so we sought to tackle the problem space of sleep deprivation among the adult population. 

In terms of the design process, we adopted the 5-stage design thinking methodology developed by Hasso-Plattner Institute of Design. 

Design-Thinking

As hinted at by the arrows of this diagram, our process was not always linear and there was a fair bit of back and forth between the different 5 stages as new data emerged. However, in order to make this case study more readable, I’ve arranged it so that the 5 stages appear in the order shown above.

Project Constraints

Before diving into the research, I wanted to briefly outline the constraints that my partner and I worked with during this project. 

  • No research budget due to this being a passion project
  • Limited to research methods and resources that are free
  • UI will be specifically for the iOS platform
  • Final product will be a high fidelity prototype
unsplash-image


Empathize

The Problem

Most of us innately know that sleep deprivation is a very common problem among adults in North America. According to a study led by the CDC in 2016.

  • 1 in 3 adults are not getting the recommended 7-9 hours of sleep each night

  • 1 in 2 adults having trouble falling and staying asleep at night.

When people get less than the recommended hours of sleep per night, as many do, it can eventually lead to a number of health problems. These can include forgetfulness, inattentiveness, being less able to fight off infections, and even mood swings and depression.

One group of young adults that is especially prone to these problems are full-time post-secondary students, usually those attending college or university. This is not surprising due to their demanding academic lifestyle, which often results in studying late at night, poor sleep hygiene, and stress before going to bed*. 

*Sleep hygiene refers to behaviors before bedtime that affect sleep. . 

sad-businessman-sitting-head-hands-bed-dark-bedroom

The consequences of sleep deprivation and daytime sleepiness are especially problematic to college students and can result in lower grade point averages, increased risk of academic failure, compromised learning, impaired mood, and increased risk of motor vehicle accidents.

- US National Library of Medicine National Institutes of Health

Solution Exploration

Focusing on post-secondary students as our primary audience, we set out to create a design intervention that would help them sleep better at night. We began our exploration broadly by positing the follow design question:

How might we help sleep deprived post-secondary students take better care of themselves in order to improve their overall health?

Primary Research

Using our initial design question as a frame of reference, we conducted research interviews in order to better understand the behaviors, pain-points and goals of post-secondary students

We built our questions around the following research objectives: 

  • To discover the behavioural patterns people make in their day to day that cause them to be sleep deprived.
  • To understand the attitudes and behaviors people have towards managing their sleep. 
  • To find out how educated people are generally about good sleeping habits.
  • To come away with an understanding of what might incentivize people to get more sleep. 
  • To walk away with some concrete ideas for a human-centered design intervention.

For our research discovery, we interviewed 8 individuals who all met the following criteria:

  • Between the ages of 23-32
  • Currently or previously a post-secondary student
  • Current or past experience with sleep deprivation
Luna-Mockup-5

Key Findings

After synthesizing the notes we gathered from our interviews, we grouped our insights into the following four themes.

Themes-Insights

Define

Design Challenge

After completing our research, we concluded that a combination of stress, anxiety, and poor sleep hygiene are the principal reasons behind poor sleep quality and sleep deprivation. 

These insights led us to refine our design question as follows: 

team-business-job-working-with-laptop-open-office-meeting-report-progress

How might we help people experiencing stress and anxiety improve their mental well-being so that they can sleep better at night?

User Persona &
Scenario Mapping

Our next step for our design intervention was the creation of a user persona. Based on the pain points, goals, motivations, and quotes we captured during our interviews, we created our persona: Alexandria Jones.

User-Persona-1

We then conducted a scenario mapping exercise in order to map out the opportune moments where our design intervention would have the most impact.

Scenario-Mapping

Competitor Analysis

After creating our user persona and scenario map, we did a competitor analysis to see what solutions already existed. Upon exploring the iOS App Store, we discovered that there were already many digital solutions on the market. Here is a summary of our top competitors:

Competitive-Analysis

Finding a Unique
Value Proposition

Coming up with a unique value proposition for our design intervention was for me the most challenging part of this project. Even though this was only a passion project and there was no money at stake, I still wanted to create something that stood a chance of making a dent in the market if it were a real product.

After a couple days of brainstorming, we noticed that there was a feature being used by a number of non-sleep apps to great success, but that sleep apps in general lacked: gamification. 

I was particularly inspired by a language app called Duolingo, which has applied gamification masterfully to become one of the most downloaded language apps. Vanessa and I therefore decided to build a healthy sleep app that would utilize some of the same gamification features we’ve seen from other apps.

gamification-1

User Stories &
Task Flow Diagram

For our next step, we authored user stories in order to better understand what Alexandria might be looking for in a gamified sleep app in terms of functionality. The following user story, which was inspired by apps we’ve explored previously, served as a foundation for our design intervention.

As a student who usually is anxious before going to bed, I want to have access to a library of sleep stories, sounds, audios to listen to before bedtime so that I can calm myself down and fall asleep more easily.

Based on this user story, we created a task flow diagram based on two tasks:

  1. User selects a sleep audio to relax to.
  2. User selects a timeframe where they will commit to not using their phone.
Task-Flow-Diagram-Complete

Ideate

Inspiration

After creating our task flow diagram, we put together an inspiration board to help us visualize what our app might look like. Here were some of the screens we drew our initial inspiration from.

Sketching

We then proceeded with exploratory sketching.

Sketches-2

Prototype

Low Fidelity Prototype

For the next step, we crafted the first of 3 iterations for our low-fidelity prototypes. It was also during this process that we named our app Luna. 

Greyscale-Prototype-1

Test

Usability Testing

As part of our design process, we conducted 2 rounds of usability testing with 5 testers per round. Below are our user scenario and tasks that we communicated to our testers. 

Test Scenario

You are a 4th year business student balancing a full course-load with a part-time job. Lately, you’ve been feeling overwhelmed about your upcoming midterms and finding a job after graduation. As a result, you often feel anxious at night and this has made it difficult for you to sleep.

A friend recently recommended that you download an app called Luna. It is designed to help users sleep easier at night by offering a library of relaxing audios. Additionally, it encourages users to use their phone less at bedtime.

It is the end of the night and you’re ready for bed. In preparation for a good night’s sleep, you turn to Luna

User Tasks

  1. Set a time period where you won’t use your phone after bedtime.
  2. Find and play the sleep audio track “Gentle Waves”.
tired-student

Design Changes

After each round of usability testing, we made design changes based on user feedback. Below are the key design changes and mockups for our second and third iteration. 

Design changes after first usability test

Second iteration

Greyscale-Prototype-2-1

Design changes after second usability test

Third and final iteration

This is the version that served as the base for Luna’s high fidelity prototype.

Greyscale-Prototype-3-1

High Fidelity Prototype

High-Fi-Mockups

Video demo of Luna's high fidelity prototype. For the interactive version, find it here.

Visual Identity

This section explores the behind-the-scenes thinking where we look at the mood, logo, colours, and typography of Luna. 

Mood

Following best practices, we first created a moodboard to define the direction of Luna’s brand. 

Mood-Board-1-1
Luna-Wordmark

Logo & Wordmark

Luna was selected as the name of our app because we wanted a name that would be memorable for users, and symbolic of a sleep based digital solution. 

The logo itself went through many iterations as we experimented with the wordmark. We thought that the rounded geometric sans-serif typeface Comfortaa fit with the mood of being relaxed that we wanted to evoke. A moon was used in place of the “u” to make the logo more on brand. 

Brand Colours

The goal of the palette was to help our user feel calm, relaxed, and sleepy when using the app. We chose blue as our primary brand colour due to its associations with health, tranquility, and the night sky.

Purple, another sky colour that nicely compliments blue, was selected as an accent colour. Lastly, we added yellow as a tertiary colour due to its universal association with the moon.

Colors
Typography

Typography

We selected SF Pro Text and SF Pro Display as Luna’s primary typefaces for two reasons: conformity to iOS design guidelines, and high versatility in terms of font weights. 

High-Fidelity Prototype

Here is the final interactive prototype of BoundZero.

Future Thinking

Next Steps

As Luna was a passion project between my partner Vanessa and I, we didn’t have the resources to make this into a real app. If we did, however, here would be possible next steps: 

Customer Desirability 

Before developing Luna any further, more market research is needed to determine whether or not there is a place for Luna among the hundreds of sleep apps that already exist. This would involve additional interviews with more people, conducting interest surveys, and other available research methods to validate customer desirability. 

Customer-Desirability
Business-Considerations

Business Viability

In terms of monetization, one way would be to make Luna free to download, but require users to pay for a monthly or premium subscription if they wish to access premium content. All the competitors we explored earlier use this freemium SaaS model. 

The other monetization method is in-game currency, which is a very popular mechanic among mobile gaming apps. In Luna’s case, the user would be rewarded with currency for maintaining their streak over a period of time. which they can then use to purchase locked audio content. However, users could also purchase in-game currency directly with real money. This would bypass the need for users to farm currency so that they can access the premium content they want right away.

Product Feasibility

Until now, we have not consulted with any developers regarding Luna’s product feasibility, so that would be the first thing we’d do before building any new task flows. After we’ve determined that Luna could be built with the desired functionality, we would continue to build the app one task flow at a time until we have a minimum viable product. From there, we would finally bring it to market, gauge user interest, and go from there.

Luna-mockup-with-hand-1-1

Reflections

Design for User Familiarity

Luna was a challenging project as it brought me into unchartered territory where I tried to build UI elements that I haven’t seen in other apps. For example, the Digital Health Goal UI from the first iteration was too complicated for users to understand. We eventually ended up removing it and replaced it with the alarm function which was more in line with our users’ mental models. For me, this cemented the importance of designing for user familiarity. 

Specific Designs for Specific Problems

Another key takeaway for me is that apps are specifically designed in a way to solve its own specific problems. As I wrote earlier in this case study, the language app Duolingo served as inspiration for our initial sketches. However, we allowed Duolingo’s UI to influence our design decisions more than we should have despite Duolingo being a completely different type of app. This led to some of the more severe usability issues in our first greyscale prototype. 

For future projects, I will definitely do a better job of identifying the specific UI elements from other apps that can aid my own design intervention, and leave the rest alone.

I'd love to connect with you! Feel free to say hello.

Copyright
© 2021 Raymond Chou