Case Study on a wellness application
We build an application to improve your sleep called Night Bud
Project Brief
Julie & I had 2 weeks to create a wellness application for the National Wellness Institute. (NWI), leader in resources and services for wellness professionals in need to catch up with technology.
The requirements were to choose a wellness subject and create a native app where the user can set goals, track the data to see progress toward these goals and share them with a coach.
We choose to develop a native iOS App focused on sleep with data tracking, before bed exercises and library of advice & articles to make users improve their sleep, and therefore their health. They also have the possibility to share their data with a coach.
Time management
In order to meet the deadline, we made a day to day retro-planning to help us see the progress of our work and succeed in time. As we always met the goals of the day and a little bit more, thanks to this organization, we had extra time in the end to work on the next steps (android design) of this project.
Background research (competitive analysis)
To start this project we looked into the existing applications, and made a feature analysis on 9 of them. In the end we understand that it’s really difficult for users to find a free application where they can set goals, track their datas and have tools to help them reach their goals with advice.
We went more in depth later in the project to analyze the 4 most complete applications we found: Relaxed Melodies, Health Mate, Sleep Cycle and Pillow.
Research : Interviews (qualitative datas)
To empathize more with the user. Observing them while talking about their sleeping habits and making it easier for them to reveal their relationship with their nights we made seven user interviews.
We interviewed people with very different sleeping experiences.
Some of them slept really badly (one of them was insonica), some wanted to improve their current Ok sleep but didn’t know or spend time understanding how, and some of them said they thought that sleeping was just a waste of time. The things they all seem to have in common though, is that they all have habits or sleep rituals before going to bed.
Affinity Diagram
Made on the Define stage of the project to synthesize our findings, the affinity diagram helped us to have a clear view of the trends and relationships into all the datas previously collected.
We grouped user interview feedback into seven categories.
Empathy Map
In order to be even more precise, we followed our affinity diagram by an empathy map.
Jobs to be done
The value proposition Canvas allowed us to validate targets, needs and found propositions to meet them in terms of service.
So using this framework we grouped Customers Gains, pains and Jobs, and made them match with our value proposition.
This helped us create 3 jobs to be done. One for each context where we wanted to be there with our user. The Morning, the Night and to educate them.
User Persona
We create a user persona; Florent, to group the feedback of all our interviews into a fictional character to make product decisions.
After making this persona, we create a typical day for him.
User Journey Map
The journey map helps us to identify opportunities to help the Florent reach his goals of a better sleep.
It makes us visualize the articulation of touchpoint in his interaction with our product, the context for our solution to succeed.
Problem & Hypothesis statement + HMW
To define the problem of our project and bring us both on the same page, we made a problem statement, followed by an hypothesis statement and finally we ideate on three How Might We to validate our pb statement (see if it’s not too broad, not too small).
User flow
A user flow is a visual information of the movement a user have through a system, it shows how it goes from the start point to the end point. In order to clarify our way through the application to build, we made a happy path, user flow.
Florent buys a sensor mattress, a device that will help him track his sleep, and this evening he is signing up into the application. He is creating a profile, where he sets his goals and shares his data with a coach. Connect his device to the application, following the steps.
Once that’s done it’s time to go to bed so he sets his alarm and tries the sleep help. He chose to take a breathing exercise and fall asleep.
In the morning, his alarm goes on and the sleep report of the night appears when he stops the alarm. Back on the home page of the application, he can see that he has his first sleep tracking data in.
Crazy 8 ideation
We ideate using Crazy 8 brainstorming method on the three axes we wanted our application to help the user for: the bed time, the morning, and educate him on the subject.
This method generates a lot of ideas that help us later to develop our wireframes.
Low-fi
Here are the first sketches of the applications that we made.
We test it, note some changes that we implement on our Mid-fi wireframes.
Mid-fi
After finishing our mid-fi, we tested them with 3 users and gathered feedback that allowed us to improve our wireframe.
For example, the bell we had in the menu bar confused the users. They thought it was a quick access to the alarm clock instead of the notification icon we thought it would be. We remade the sign up pages, we added a success message after this installation of the device. We made a drop down menu to have a more clear view of the filters on the exercises page and so on…
We iterate many times before jumping into the high-fidelity.
Visual competitive analysis
In order to get user habits on this subject and give a proposition that would be appropriate to the sleep and night theme. We made a visual competitive analysis on the four most complete applications we found during the feature analysis.
After this research, we decided to work on a dark mode application.
Brand attributes & Moodboard
To meet our user expectations we select 5 brand attributes. We choose Innovative to pick user interest as they are not always keen on the topic. Friendly, because we wanted to be the user night buddy as the name of our application recalls it (Night Bud). Casual because once again as we position ourselves as a friend and not a doctor, our tone needed to match this. Relaxing, because when people are stressed about sleep, it’s not helping! And finally Gentle, to improve user interest on the matter.
Regarding this brand attributes, we create a moodboard.
Colors palette
We ideate and test many times, before finding our color palette.
Style guide
After defining our color palette, the typography, our buttons, iconography and illustrations, we create styles, components and variants of our elements in Figma. This Styles guide led us to make use of the atomic design methodology to organize our work.
Atomic design
Atomic design methodology inspired by Brad Frost, organized elements by size. The atoms put together create molecules that create organisms, templates, and pages. This method creates effective interface design systems.
Testing
We conduct several testing on our native iOs application.
Desirability Testing:
This makes us divide the original massive profile page we had, into three pages easier to scan and understand for the user. After a new test this proposition was approved.
We also add explanations and advice to improve sleep in the sleep report page to complement the graphs. And change certains colors to focus user attention on the part that could be improved.
Accessibility Testing:
Then to make our application more accessible, we change the size of our body text font from 12 to 14px. We used Stark plugging in Figma to check our colors contrats, and made some readjustment.
As we design a dark mode application, we also put elevation with lighting and shadows on some of our components.
After all those iterations I’m going to show you the result of our work.
Prototype
Florent the healthy technophile, got his device and used the application for the first time tonight.
He input his email & password, create his account. He filled his profile info, rated his current sleep and as he is very busy he allowed notifications to have reminders on sleeping time.
On the next page he set his goals, add a note. After this, he decided to share his sleeping report with the coach of the application on a monthly basis. 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 !
Now it’s a bit late and Florent needs to go to bed. He set his alarm for the morning, put his preferences, and decided to follow the practice as he is not ready to sleep just yet. On the sleep help page he chose the breathing section. Here he goes into the filters, checks what he wants and selects his exercise: Deep breath. He put his phone on the bedside table, started the exercise and fell asleep.
It’s 7.30 in the morning, Florent woke up. He is ready to shine!
After shutting down his alarm, the sleep report of the past night appears, letting him know that he had a good sleep but could have a longer night next time.
Back on the home page Florent, see that the app has now his first datas in.
Androïde
As we had some time on our hands, we decided to make three screens for android, using the materials baseline design kit as neither Julie or I ever worked on Android before.
So we set the correct constraint to change the screen size and add the tap and statut bar specific to android on our google Pixel 2 XL device.
Learnings & next steps
From this project I learned that using retro planning definitely helps me to have better time management. And as a next step we would have to develop the website pages for the National Wellness Institute.
