UX / RESEARCH / UI DESIGN
🌙 Crescent, a sleep tracking app that takes in account the moon cycles and your astrological sign.
Mission
Create a prototype of
a very niche sleep app
Deliverable
High-Fidelity Prototype
Team
2 UX/UI designers
Duration
2 weeks sprint in February 2021
For this two weeks sprint, I teamed up with another UX/UI designer, who also happened to be a yoga teacher, just like me. We wanted to challenge ourselves by creating an app that would ally UX/UI design and well-being together.
We chose to apply the Design Thinking Process and kept it as user-centric as possible. Let’s go.
Empathize
Since March 2020, a question has been haunting me:
How did the pandemic impact our screen time? And how does this impact our health?
In February 2021, in the middle of the German lockdown, we set up a survey on Google form to gather some data.
60% of the participants 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. This only makes sense in the context of social distancing.
The screens are used to:
1. work or study remotely
2. meet friends and family online
3. consume leisure content
After browsing through the survey’s result, I 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
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.
We created a storyboard where the product would look more tangible and realistic.
Prototyping
Mid-Fidelity Wireframe
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 different mood boards for our product.
Moodboard 1
Moodboard 2
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.
The first attempt of our design, adapting to the Moodboard that the users preferred for our brand attributes. It is visually too stimulating for a sleep app.
After many tries, we decided to stop wasting our energy on this mood board and use the other moodboard instead.
We created a new style-tile from this moodboard.
Style-tile
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.
Final thoughts
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.