Crescent, a moon cycles sleep-tracking app
A UX/UI design case study
After working in the digital communication field for 10+ years, a little upgrade was welcomed. In 2020, I chose to boost my skills by joining a UX/UI Boot Camp in Berlin.
The following case study is one of the assignments we got during the Boot Camp: to create a tracking app from scratch, either in finance or in wellbeing. I team up with Arthur Sean O’Connor during a two weeks sprint. Being both certified yoga teachers and working in the wellness field for some years, we were eager to create our own wellbeing app.
We followed the 5 steps of the Design Thinking Process: Empathize, Define, Ideate, Prototype, and Test.
Empathize
The first thing to do: research our users and understand them better.
We decided to start with a question that was haunting us for a year:
How did the pandemic impact our screen time? And how does this impact our health?
Through survey results, we realized that 60% of the interviewees use the screen more than 50 hours a week. Even 20% of them confessed that they used it for 70+ hours a week. This is widely over the health recommendations:11 hours a week.
The survey shows that screens are mostly used to work or study remotely, meet friends and family online or consume leisure content.
Which is not surprising in the context of social distancing.
After browsing through these results, we already had an idea in my mind: a screen time tracking app seems obvious, right?
But our qualitative research showed otherwise. We made some user interviews, and surprise! No one wanted to reduce screen time consumption.
“It’s a window to the outside world”, said one of them. It was clear, though, that they were suffering from common side effects of intensive screen use, like bad sleep quality, muscle sores, or itchy eyes.
Fair enough, let’s forget about the screen time tracking app then.
Define
The research showed us that the user's pain point is not the amount of screen use, even if they suffer from its consequences.
We gathered on a board all the data of user research.
We went back to our survey results and noticed that the most common symptom was poor sleep quality for 53% of the interviewees.
This is how we decided to conceptualize a sleep tracking application.
We created a persona, a fictive user who is a summary of the previous research. Meet Laura: a hyper-connected tech worker and an urban millennial. Laura uses different well-being apps, and she is opened to try new concepts.
Now, let’s define our Problem Statement.
A Problem Statement is a clear description of the issues that need to be solved by the team. It defines the project's main objective and is based on the data collected during the research phase.
Laura, the hyperconnected tech worker,
needs to improve her sleep quality
because it would boost her concentration, help her focus better and avoid distractions.
From there, we defined our Hypothesis Statement.
We believe that by creating a sleep tracking app linked to the moon cycles, we will achieve the goal of making users track the effect on the moon on their sleep and improve it.
We will know we are right when the sleep quality of our users will improve.
This will be trackable through the datas we are collecting.
Ideate
While we were doing our competitive analysis, a look at the Apple Store and the Play Store crushed our dreams. We realized how much the market was already saturated. How would a news sleep tracking app make sense?
We remembered what our teacher taught us during the classes: don’t try to target everyone, or you’ll end up targeting no one. We decided to go niche, very niche.
We investigated and noticed recent research about how the moon cycle impacts our sleep quality. We also noticed an abundance of recent articles dealing with the new interest of millennials in astrology.
Our app emerged by crossing these two pieces of information: we will create a sleep tracking app related to the moon cycles!
The research showed that the moon could affect people differently regarding their astrological signs. The content will be personalized regarding the user’s astrological. The app would provide personal advice according to the moon's different cycles to improve their sleep quality.
We named this app Crescent.
Now, what would be the features of our products?
We made a group session brainstorming, and here are some ideas which came out of this workshop:
Working on a 2 weeks sprint, we need to focus on the MVP, the Minimal Viable Product. Eric Ries, one of the Lean Startup method inventors, defines an MVP as a “version of a new product that allows a team to collect the maximum amount of validated learning about customers with the least effort.”
To define which one of the features we should develop in our product, we used the MoSCoW method. This technique helps to manage priorities. The letter stands for Must Have, Should Have, Could Have, and Won’t Have.
For this sprint, we will focus on designing the features in the “Must Have” section.
Thanks to this step, we can have a clearer idea of what our product will taste like. We had enough material to created a storyboard where the product would look more tangible and realistic.
1- Laura is spending a lot of time on her screen and watch Netflix until late.
2- It is hard for her to fall asleep. Thoughts keep racing into her head.
3- She is exhausted during the day and is not very productive at work.
4- She explains to her friend Sarah how tired she is, and Sarah advises her to check this new app, Crescent.
5- Crescent is a sleep tracking app related to the moon cycles and gives special tips and audio sessions regarding the user’s astrological sign. Laura noticed that the full moon is coming soon.
6- Laura tracks her sleep on this app and notices some patterns: she has more agitated nights around full moons.
7- Before going to sleep, she is listening to audio sessions specially tailored for Aries during a full moon.
8- Now that she is more aware of her sleeping pattern, she can anticipate and adjust her lifestyle accordingly. She falls asleep earlier and with more ease!
Prototyping
Mid-Fidelity Wireframe
After some quick draft on paper, we were ready to get into the mid-fi!
We did many user testing and iterated each time until the users could find it clear and intuitive.
This prototype sets the user flow:
Laura will first check her astrological predictions and check the moon cycle. The full moon is coming soon.
She then wants to track her last night of sleep. She enters a couple of data in the trackers.
She finally checks her last data to look at patterns in her last night of sleep.
Branding and visual research
We established the brand attributes of Crescent:
- Unconventional
- Enigmatic
- Minimalist
- Calm
We then created 3 different mood boards for our product.
We asked through a survey which of these boards matched the brand attributes.
62% vote for the mood board 2, so we started implementing it in our mid-fi.
High-fidelity prototyping
While using the second mood board style, we realized that we were not really happy with the result. The colors were too bright and too stimulating for a sleeping app.
After many tries, we decided to use moodboard number 3 instead. The black and yellow suggest the celestial sky.
We created a new style-tile from this moodboard. The style-tile gathers the graphical elements used in the app, such as the logo, the color palette, font, and some examples of atomic design.
Now, let’s apply this design to the wireframe:
Here is the home page, the next prediction related to the next moon phase, and the audio library with personalized content.
Every day, the user can track the sleep duration, the sleep quality, and current mood:
All these data are trackable in the Dashboard:
Here is the whole user flow in action:
Key learnings
Don’t assume anything, do your research first.
We had an idea in mind at first, and throughout the research, we realized that this was not the product that would answer the user’s pain point.
Ask for feedback early.
Ask feedback to the stakeholder early and regularly to be sure that the product is on the right track.
Consistency is the key.
Working on the whole product made me realized how consistency in design is essential. The font style, spacing, and colors need to be consistent. All details need to be anticipated to make the hands-off as smoothly as possible.
I enjoyed working on this sleep tracking app, and I would love to see it in real life. But for now, it will stay as a prototyped concept. Crescent needs a lot of research, especially in the astrological field, and this product requires a team of several persons to produce constantly fresh personalized content for the users.
