Case Study: Create a wellness app from scratch!
Introduction
As part of my UX/UI training at Ironhack, we had a new project to work on: create a full UX/UI design process, during 2 weeks, in pairs (hi )!
The goal is to introduce a Hi-Fi prototype of a wellness app, for The National Wellness Institute, leader in resources and services for wellness professionals.
They want to explore how they can leverage technology to help people live a healthier life and have 3 requirements: the user has to be able to create his/her account, the app has to track the user’ progresses, and the app has to push the user to commit to a healthier lifestyle, by offering the possibility to share his/her data with coaches.
And this is where our work begins! We decided to work on an app dedicated to sleep, because sleeping well is one of the keys to be more efficient during the day and therefore to feel better in general. Also, we chose to develop a native App for iOS platform.
Before jumping into the project, we created a day-to-day planning so we can meet all our deadlines for each milestone and deliver our app on time.
From the competition and user research to the design thinking process, this is how our sleep app “Night Bud” is born!
Research
First, we realized a competitive analysis to have a better knowledge and understanding of the current “sleep app” market. We benchmarked several applications and what came from this analysis is that:
- You have to pay for most of the apps to unlock all the key features.
- You have a to use your phone, a wearable or connected device to track your sleep accurately.
- You have to use several apps if you want to track your sleep, use exercises to fall asleep easily or to have access to content on the sleep topic. There is no “all in one” application on the market.
During this project, we have decided to focus on 4 apps that were the most relevant according to us: Relaxed Melodies, Health Mate, Sleep Cycle and Pillow.
After this competitive analysis we conducted 7 qualitative interviews to empathize with the users and understand about their knowledge on sleep topics in general, their rituals before going to bed. We were lucky enough to have different kinds of sleepers: the insomniacs, the good sleepers, those who think that sleeping is a waste of time, those who don’t sleep very well but who are resigned, those who already track their nights with devices.
We used the affinity diagram and the empathy map to render our interviews and highlighted below the most powerful quotes from these interviews. We realized that they’re not really aware about sleep in general and about what happens during their nights. They all have a routine before going to bed. And for the users of connected devices, they really appreciate to understand what happens during their night, but they would like to go further than simple data, with more personalized coaching to improve the quality of their sleep.
Value Proposition Canvas and Jobs to be done
As a reminder, in this project we had to create a non-existent sleep app. So we used the Value Proposition Canvas, to define the app that would be the most in line with our users’ expectations.
Thanks to this method, we defined our “value proposition”, we focus on our users, their problems and therefore their needs, and the answer we can provide to them. This tool, designed by Alexandre Osterwalder, allowed us to validate our target, its needs/problems/hopes, and to imagine how we could respond to it in terms of services, offers and value proposition.
This helped us to create 3 “Jobs To Be Done” (JTBD), one for each moment where we wanted to interact with our user:
- the Morning: When I wake up in the morning, I want to understand & review my night so I can improve my sleep experience for the next nights.
- the Night: When I go to bed for a night of sleep, I want to be tutored for falling asleep and avoid sleep interruptions so I can feel rested and positive for my day.
- During my free time: When I sleep poorly, I want to understand why and get tips & tricks so I can get better habits and sleep rituals.
As a reminder, the JTBD consists in replacing the product (our sleep app) by the service: you start with a situation (when I…), you follow it with a motivation (I want to…) and the expected result (so I can…).
Here, we focus on the user’s objective, on his real desire, the one that comes before any product desire. Beyond the functional dimension, we are interested in the deep motivations, especially the emotional ones, to understand not how users use products, but why?
The JBTD theory invites us to change our perspective on the user and his/her relationship with our app. It’s a tool to find innovative solutions based on the principle that the user wants the job done as well as possible. There are many similarities between JTBDs and Personas. We have therefore chosen to mix these two approaches to better understand our design phase, so I am delighted to introduce Florent, our primary persona.
User Persona
Now you have met Florent, let’s jump into a typical moment of his daily life with the User Journey…
User Journey
Florent is working late in the evening because he has a very important meeting the next day, and he’s stressed about it. He goes to bed, has some troubles to fall asleep and wake up tired in the morning. He hopes this fatigue won’t impact his performance during his meeting. Finally, the meeting went well, but it’s time for him to take some actions regarding his sleep, because a good sleep will improve his efficiency during the day for sure.
All the emotions he lives during this journey helped us to find several app’s features opportunities because we highlighted all the touch points we could have with him, let’s define the problem statement so you can learn more about it, and see in which direction we went for the ideation step.
Define: Problem Statement, Hypothesis and HMW
User flow
A user flow is a visual representation of the path taken by our user, from point A to point B. In this particular case, we have designed a Happy Path User Flow:
- Sign Up in the app: Florent is a new user
- Create a profile: Florent can set up his goals and decide to share his sleep data with a coach
- Connect a device: as Florent is a technophile, he bought a connected device (a sleep sensor he will put under his mattress) compatible with our app, to track his sleep more efficiently
- Set up the Alarm clock for the next day
- Try a breathing exercise which will make him fall asleep
- Wake up the next day thanks to our app alarm clock
- Check his 1st sleep report
- Go back to the home page where he can see a full display of his data
Once we were done with this User Flow, we decided to use the “Crazy 8’s” method to generate as many ideas as possible about the look and feel, and the content of our app. Please check below our low-fi prototypes to get a first vision of our app!
We have tested these Low-Fi prototypes with different people, sum up the feedbacks and implemented changes in our Mid-Fi wireframes.
Mid-Fi Prototypes
When we were done with the Mid-Fi, we decided to test them with 3 different users and collected again very precious feedbacks to improve the user experience.
Here are some findings from these tests:
- We had a bell in our tap bar to display the app notifications, but this was confusing for the users: they all thought it was a quick access to the alarm clock.
- We also redesigned our sign-up pages because the 1st iteration was not clear and complete enough.
- We added a success message after the device’s installation of the device.
- We created a dropdown menu for our filters, in the exercise’s page.
At this moment of our project, we were almost ready to design our Hi-Fi prototypes. Indeed, we were missing a crucial element to move forward: our Brand Identity! As a starting point, we decided to analyze our competition, on a visual perspective.
Visual competitive analysis
Analyzing our competitors’ universes was a good way to get an overview of the colors used when talking about sleep. We had of course a first feeling, and this one was clearly confirmed by this analysis: we need to go with dark mode. In addition to this overall “atmosphere”, it was time to define the brand attributes that would be able to meet our users’ expectations…
Moodboard and Brand Attributes
- Our app has to be Innovative: people don’t really know about sleep, so we need to come with something innovative to catch them. That’s why we add electronic devices on the mood board.
- Our app has to be Friendly: the sleep topic is not “fascinating” for most of the users, so we need to make this experience fun: we should be a buddy rather than a doctor.
- Our app had to be Casual: it has to remain accessible; we don’t want to be a complicated app.
- Our app has to be Relaxing/Gentle: as we’re talking about sleep, it has to be as pleasant as being in clean sheets, lying down in bed or even watching a sunset/sunrise.
So what did we build from this? Il’s time for the big reveal of our App, with the style guide!
Style Guide
We decided to call our app Night Bud, for the friendly side first but also to make it clear that we wanted to become the user’s best buddy regarding his sleep.
We’ve chosen an overall dark theme with soft colors touches, in order to bring a bit of brightness and fun all the way. We decided to complete this by cute illustrations and home-made icons.
And to save time on the UI part, knowing that we were 2 different persons working on the same project, we’ve created a components’ library for our cards and buttons.
Let’s see how these elements look like when they’re all together with the Atomic Design.
Atomic Design
The Atomic Design methodology organizes elements by size. First you have the atoms, and when you put all the atoms together you create molecules. These molecules create organisms when they’re gathered. And finally, the organisms create templates and pages. This method creates effective interface design systems and help a lot to maintain consistency all along the creation part.
With all these tools in hands, we have developed our Hi-Fi Prototypes.
At this point of the process, it’s again always nice to test your design. So we did desirability and accessibility testing, with 2 persons.
Desirability and Accessibility Testing
From the desirability testing, here are the changes we made:
- We divided the original massive profile page into three pages easier to scan and understand for the user.
- We reviewed our “sleep report page” to improve its readability, by adding an overall comment at the top of the page, in addition to our graphs. And also, by changing certain colors to focus the user’s attention on the part that could be improved.
From the accessibility testing, here are the changes we made:
- We changed the size of our body text font from 12 to 14px.
- We used the “Stark” plugin in Figma to check our colors contrasts, and finally changed the brightness of our purple color.
- We added elevation with lighting and shadows on some of our components, because of the dark mode.
Now it’s time to show you the result of this 2 weeks work, I hope you will enjoy our Hi-Fi prototype!
Hi-Fi Prototype
Before watching the video, I invite you to read the following scenario so you can have a better understanding of Florent’s navigation.
1. Florent the healthy technophile, bought a connected device (sleep sensor) in the afternoon and download our app in the evening (it’s a 1st time for him with Night Bud).
2. He adds his email address & password and creates his account.
3. He fills his profile info, rates his current sleep and as he’s very busy, he allows the notifications so he can get useful reminders from the app regarding his sleep routine.
4. On the next page he sets his goals and adds a note.
5. After this, he decides to share his sleeping report with the coach of the application on a monthly basis.
6. Now it’s time to connect his device to the application, he selects the sensor mattress, follows the installation steps, and success! It’s installed!
7. It’s a bit late and Florent needs to go to bed… He sets his alarm for the next morning directly in Night Bud, sets all his preferences, and decides to practice as he is not really ready to sleep yet.
8. On the sleep help page he chooses the breathing section.
9. He goes into the filters, checks what he wants and selects his exercise: Deep breath.
10. He put his phone on the bedside table and starts the exercise.
11. This is successful, he manages to fall asleep quickly.
12. Night time…
13. It’s 7.30 in the morning, the Alarm Clock rings and Florent wakes up. He is ready to shine!
14. After shutting down his alarm, the sleep report of the past night appears on his screen, letting him know that he just had a good night but could improve the duration next time.
15. Back on the home page Florent can see all his data have been added.
Design for Android
As we had free time at the end of our project, we decided to design 3 screens for Android, using the materials baseline design kit as neither Alice nor I ever worked on Android before. In order to do so, we set up all the constraints on the iOS screens, changed the screen size (from iPhone X to Google Pixel 2 XL device) and add the tap and statut bar specific to Android.
You can see the result below:
Conclusion and retrospective
I’m super proud of Alice and myself, because we managed to meet our milestones without any delay, all along the project. And also because I believe we came with something very strong, despite the fact that we are both UX/UI beginners.
We would have liked to have more time to fine-tune our illustrations, to realize drafts of new app features, to work on a 1st website draft and to test again our app, in order to improve the overall user experience.
