Luna is an idea for 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
Tool Used: Figma, InVision, Otter.ai, and Google Sheets + Docs
Why Luna?
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?
We set some constraints and goals 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
-
Design as a native iOS app
-
Timeline: 3 months
EMPATHIZE
What is the sleep aid market like?
At the time of writing this, the sleep aid market is set to reach up to 114B USD in 2025⁵. 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².
Who is the competition?
With a 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%⁴
Why are people sleep deprived?
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?
DEFINE
Who are we designing for?
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.
What problem should we focus on?
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.
When would Alexandria use the app?
Based on our research, we created a story about how Alexandria might discover and use Luna for the first time.
What is the golden path?
A golden path was designed for how Alexandria might accomplish 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.
Golden path of starting a sleep routine
IDEATE
Gathered inspiration
Before sketching and creating wireframes, 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 with the goal of creating an experience that users are familiar with.
Home
Sketched design variations
We also sketched multiple variations of each screen from our task flow. We used dot voting to choose which ideas we would digitize. Check out some of our very rough sketches below.
Curated a moodboard
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".
Typography
Conforming with Apple’s Human Interface Guidelines, we used the typefaces SF Pro Text and SF Pro Display throughout the app.
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 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.
PROTOTYPE & Test
High fidelity
It took 2 hi-fi iterations to achieve the desired look and feel of Luna.
Final hi-fi
We conducted usability test sessions for the first two iterations of Luna. We fixed usability issues in our greyscale prototypes, whereas the hi-fi focused on cosmetic issues and UI.
Tasks Evaluated
-
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
Post-test updates
The final prototype
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.
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 also questioned what digital health was and thought that the goal-setting workflow was an alarm clock. In hindsight, starting with a paper prototype or card sort could have been a fast and easy way to learn about this problem before designing.
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 collaborating on our Figma board (that was always covered in comments). Overall, I'm very proud of the work that we accomplished together.
If you've made it this far, thanks for reading ✨
Works Cited
-
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