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
Tool Used: Figma, InVision, Otter.ai, and Google Sheets + Docs
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?
Using Hasso-Plattner's design thinking framework as our roadmap, we ensured a human-centered design process.
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
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².
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.
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%⁴
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 stress and anxiety were common feelings that people experienced before bed. Other insights included phone usage before bed, using meditation as a remedy, people caring about their sleep quality, and feeling a lack of incentive to follow good sleep habits.
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?
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 this project we decided to focus on only one user.
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.
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
Finally, we defined how Alexandria might discover and use our solution for the first time.
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.
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.
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".
Conforming with Apple’s Human Interface Guidelines, we used the typefaces SF Pro Text and SF Pro Display throughout the app.
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.
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.
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.
First Greyscale Wireframe
It took 2 hi-fi iterations to achieve the desired look and feel of Luna.
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.
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.
Find the part of the app that allows user to select a period where they won’t use their phone
Select a gentle waves sleep track and choose 45 minute timer
The Final Prototype
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 ✨
Calm (2020). About. Retrieved from https://www.calm.com/blog/about?gclid=CjwKCAiAi_D_BRApEiwASslbJ36PrR3a1eIAluYnsCbrQP-dLBdj_tTL4zAOPvClt-w8MvqEwjGUTxoCH9kQAvD_BwE
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
Headspace (2020). About Headspace. Retrieved from https://www.headspace.com/about-us
Healthline (Sept 23, 2020). Headspace vs. Calm: How Do These Meditation Apps Compare? Retrieved from https://www.healthline.com/health/headspace-vs-calm
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