An iOS native app that helps people who deal with stress and anxiety sleep better at night by improving their mental-well being.
Passion Project (12 weeks to complete)
Both Vanessa and I evenly split the roles of UX Designer, UI Designer & Researcher.
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.
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.
Before diving into the research, I wanted to briefly outline the constraints that my partner and I worked with during this project.
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. .
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?
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:
For our research discovery, we interviewed 8 individuals who all met the following criteria:
After synthesizing the notes we gathered from our interviews, we grouped our insights into the following four themes.
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:
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.
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.
Ideate
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.
We then proceeded with exploratory sketching.
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.
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.
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
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
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.
Video demo of Luna's high fidelity prototype. For the interactive version, find it here.
This section explores the behind-the-scenes thinking where we look at the mood, logo, colours, and typography of Luna.
Following best practices, we first created a moodboard to define the direction of Luna’s brand.
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.
Here is the final interactive prototype of BoundZero.
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:
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.
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.
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.
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.