Illustration.png

Luna is a native iOS app that helps people who experience stress and anxiety sleep better at night by improving their mental well being. 

Project Type: Passion Project

Team Member: Raymond Chou

Roles: We equally contributed to the roles of UX & UI Designer

Timeline: 12 weeks

Tool Used: Figma & InVision

How It Started

Sleep-deprived and filled with copious amounts of coffee ☕ - that’s how Raymond and I finished our intense UX boot camp. While TAing for the following cohort, we wanted to keep our UX skills sharp and decided to tackle a common interest in the problem space of sleep deprivation. We were curious to learn why we and so many others don’t get the recommended 8 hours of sleep each night. Was there an opportunity for design intervention?

The Process

Using IDEO's design thinking framework as our roadmap, we ensured a human-centered design process.

Image credit: Ian Health

The following are some constraints and goals we set early on. 

  • Limited to free research methods and resources

  • Final product will be a hi-fi prototype with 12-20 screens of 1 or 2 task flows

  • Native iOS app

  • Deadline: December 1, 2020

Image by Kinga Cichewicz

EMPATHIZE

 

The Facts

With a growing sleep aid market set to reach up to 114B USD in 2025, it’s clear that people care about their sleep⁵. A study done by the Government of Canada found that approximately 1 in 3 adults get less than 7 hours of sleep each night, with 1 in 2 having trouble falling and staying asleep at night. The main factors contributing to this are chronic stress, sedentary lifestyles, and poor mental health².

Studies have found that maintaining good daily habits can result in successful sleep. Some habits include regular wake-up and bed-times and practicing mindfulness and stress-reducing techniques². 

Competitive Landscape

Due to the large sleep aid market, we were interested in learning more about other sleep apps and the potential for a new and differentiated entrant. Apps like Headspace, Sleep Sounds, Wysa, and Calm would be our direct competitors.

Competitive Analysis.png

Studies done on HeadSpace and Calm found that

  • college students that regularly used the Calm app experienced reduced stress and boosted mindfulness⁴

  • users experienced a 14–28% decrease in stress after 10 days of using HeadSpace⁴

  • HeadSpace improved user focus by 27%⁴

Primary Research

We conducted 7 one-on-one interviews, asking open-ended questions to learn about people’s sleep, bedtime habits, and experiences with sleep deprivation. We interviewed people who have experienced sleep deprivation, targeting post-secondary students and working professionals. From the research, we found that people get distracted by their phones before bed and commonly use meditation as a remedy to help them sleep. Additionally, while people care about improving their sleep quality, they often lack the incentive to do so.

Insights.png

With our initial research complete, we crafted a design challenge - our north star for the project. 

HMW help people experiencing stress and anxiety improve their mental wellbeing so that they can sleep better at night?

 
Image by Benjamin Voros

DEFINE

Primary Persona

We created Alexandria to encompass the pain points, motivations, and behaviors found from our interviews. She’s a stressed student that is always up late studying and only gets 5-6 hours of sleep each night as a consequence. She wants to get into a routine of sleeping earlier but often finds it difficult to calm their thoughts. On top of that, her phone is a distraction before bed with a constant fear of missing out.

A secondary persona of a working professional was also created, but for the sake of this project we decided to only focus on one type of user.

User Persona.png

User Stories

Brainstorming user stories helped us determine potential solutions for Alexandria. We then grouped the stories into epics, with our core epic being to play sleep audios as this would best support our design challenge.

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

Task Flow

A task flow diagram was made to help us understand how a user might go about accomplishing the goal of finding a sleep track to help them calm down before bed. Here, we brainstormed the screens, flow, call-to-action buttons, and system decisions. The diagram below did end up changing as a result of user testing results, but this was the initial concept of Luna.

Task Flow Diagram of Starting a Sleep Routine

Task Flow Diagram.png

Scenario Mapping

Finally, we defined how Alexandria might discover and use our solution for the first time.

storyboard.png
 

IDEATE

Inspiration

Before starting sketches and digitizing a prototype, Raymond and I looked at other apps (competitors and unrelated) for inspiration. We set up an InVision board and added categories for various screens and elements then had a discussion of what we wanted to include in Luna.

Home

Sketching

Based on our inspiration we sketched multiple variations of each screen from our task flow and used dot voting to choose which ones we would digitize. Check out some of our very rough sketches below.

Sketches.jpg

Mood board

When brainstorming how we wanted Luna to look and feel, we came up with the following mood board that highlights key words such as "calm", "relaxing", "warm", and "welcoming".

Moodboard.jpg

Typography

Conforming with Apple’s Human Interface Guidelines, we used the typefaces SF Pro Text and SF Pro Display throughout the app.

Typography.png

Colour

Extracting colours from our mood board helped us achieve a look and feel that was fitting for Luna.

 

We chose blue as our primary colour due to its stress-reducing properties. The palette is mostly analogous with a mixture of blues and purples. A yellow was added for the Luna moon and to help evoke feelings of warmth and optimism. In general, the primary colours used in Luna are darker tones to help users reduce eye strain before bed. We wanted Luna to be accessible and ensured with our colour choices that we met WCAG AA standards throughout the app.

Colours.jpg

Logo & Wordmark

Luna, another word for the moon, was chosen as the app name as we wanted something memorable and that users could easily find on their phones before going to bed. Other app name contenders were Zenny, CloudScape, and Medi. Dot voting led us to agree on Luna.

The wordmark went through many iterations as we experimented with various typefaces. Comfortaa, a rounded geometric sans-serif font, was chosen as it evokes comfort and coziness. The Luna moon used in place of the “u” was added to complete the wordmark and give it a unique look.

Luna Wordmark.jpg
 

Greyscale

We digitized our initial sketches into greyscale wireframes to start testing our solution on users. We wanted to uncover usability issues and validate if users felt that the task would reduce stress and anxiety experienced before bed. We were less concerned with UI elements such as typography, spacing, or alignment at this stage. After completing three greyscale iterations, we had fixed most usability issues and could move onto hi-fi. 

Greyscale 1

Prototype Round 1.jpg

Greyscale 2

Prototype Round 2.png

Greyscale 3

Prototype Round 3.png

PROTOTYPE

High Fidelity

It took 2 hi-fi iterations to achieve the desired look and feel of Luna. 

Hi-Fi 1

Hi-Fi 2

Hi-Fi - Prototype 1.png

Hi-Fi 2 (Final)

Hi-Fi - Prototype 2.png
Mobile Phone

TEST

 

We conducted formalized usability test sessions for the first two iterations of Luna. As mentioned previously, we fixed usability issues in our greyscale prototypes, whereas the hi-fi focused on cosmetic issues and UI.

Test Script

Hi [name]. I'm [Raymond/Vanessa], I’ll be walking you through this usability testing session today.

Before we begin, I want to thank you for taking the time to do this session with me. My partner and I are eager to have you try our app Luna, so that we can understand if it works as intended, and if there is anything that can be improved. Your open and honest feedback during the test is greatly appreciated. If something frustrates or confuses you, please let us know. 

As you go through the app, I’ll be asking you some questions on each screen. I encourage you to think out loud. If you have any questions along the way, I will do my best to answer them at the end of the session. 

Finally, with your permission I would like to record this session. The recording will only be played by my partner and I, and once again this is just so that we can gain a better understanding of potential issues of our app so that we can improve it.

Tasks Evaluated

  1. Find the part of the app that allows user to select a period where they won’t use their phone

  2. Select a gentle waves sleep track and choose 45 minute timer

Round 1 Updates

Round 2 Updates

The Final Prototype

mockup.jpg

After multiple rounds of iterating and testing, we felt that we finished what we had set out to accomplish with this project. Watch the prototype video of Luna below, or try it out yourself on Figma.

 
Image by processingly

REFLECT

1.  When in doubt, do a paper prototype or card sort first.

During the first round of usability testing, Raymond and I learned that people didn't understand why a sleep app had a digital health feature. Users questioned what digital health was and mistook the goal-setting screens of when they wouldn't touch their phones for an alarm clock. In hindsight, starting with a paper prototype or card sort could have saved us time and effort. 

2. Collaborating with a partner on a project is extremely rewarding.

I had so much fun jamming on ideas with Raymond over the last 12 weeks. We spent evenings and weekends on Google Meet and working together on our Figma board that was always covered in comments. Overall, I'm very proud of the work that we accomplished and look forward to working with Raymond again in the future.

If you've made it this far, thanks for reading 😎 

Works Cited

  1. Calm (2020). About. Retrieved from https://www.calm.com/blog/about?gclid=CjwKCAiAi_D_BRApEiwASslbJ36PrR3a1eIAluYnsCbrQP-dLBdj_tTL4zAOPvClt-w8MvqEwjGUTxoCH9kQAvD_BwE

  2. Government of Canada (2020). Are Canadian adults getting enough sleep? Retrieved from https://www.canada.ca/en/public-health/services/publications/healthy-living/canadian-adults-getting-enough-sleep-infographic.html

  3. Headspace (2020). About Headspace. Retrieved from https://www.headspace.com/about-us

  4. Healthline (Sept 23, 2020). Headspace vs. Calm: How Do These Meditation Apps Compare? Retrieved from https://www.healthline.com/health/headspace-vs-calm

  5. PR Newswire (May 15, 2020). Sleep Aids Market Worth $114.15 Billion by 2025: Exclusive Report by Infinium Global Research Retrieved from https://www.prnewswire.com/news-releases/sleep-aids-market-worth-114-15-billion-by-2025-exclusive-report-by-infinium-global-research-301060012.html

Have a project in mind? Let's create something together!

  • Dribbble
  • LinkedIn

©2021 by Vanessa Ungerer