UX/UI Case study — Zendo mobile application
By: Dahyun Fidel
Tags: UX Design, UI Design, Stress Management, Mobile Application, Wellness

How to create a mobile application designed to help people to better manage their stress ?

Hello all 🙋🏻‍♀️ For the past 10 days I worked on a new challenge with my super UX/UI-designer-colleague Morgane Lecouffe.

This time, our mission was to create a mobile application dedicated to the wellness ❤️

What is wellness ?

According to Global Wellness Institute, wellness is the active pursuit of activities, choices and lifestyles that lead to a state of holistic health.

In this sanitary crisis situation, when everything goes slower and pass many time at home, I often wonder how I might take more care of myself and have a healthier life. So this challenge came just at the right time !

Wellness is however a very vast topic : physical exercises, sleep quality, weight, nutrition and diet … But Morgane and I quickly decided to dedicate this project time on a particular theme which personally concerns us : the stress management.

Stress and French people

According to a survey from OpinionWay, we discovered that 9/10 people were stressed ! Women are slightly more stressed than men, and especially young adults between 25 to 34 years old seem the most impacted.

They use different methods to fight against stress : sport, relaxation (yoga, meditation …), healthcare professional consultation, or just discuss with friends or family …

And also we observed different mobile applications that already exist and are dedicated for stress management :

Complete kit with mood tracker and relaxing exercises (Sanvello, Norbu …)

Antistress games (Antistress for example)

Breathing exercises (Respirelax+, Relax lite …)

Meditation (Petit Bambou, Dreaming Fox …)

Double checking the insights

With a view to validating our first insights that we got from different web articles and surveys, we launched a quick online survey, containing about 10 questions.

Presentation template from Slidesgo

The results totally confirmed our first assumptions. Most of people are stressed, often due to work. They have different methods to relax, but do not have enough time to do so.

Presentation template from Slidesgo

Understanding the persona

To gather more detailed information about our users, we interviewed 5 more-than-average-stressed people. Each of them have experienced different stressing situations, with various level of stress, and they all had their own methods to decrease stress more or less efficient (playing games, doing sport, watching TV, drinking with friends …). But they had some points in common :

They put pressure on themselves : they want to please to others and to be up to their own expectations, so they are very exigent to themselves.

: they want to please to others and to be up to their own expectations, so they are very exigent to themselves. They think they are stressed by nature , that it’s something they have to live with as it’s part of their person.

, that it’s something they have to live with as it’s part of their person. Even they all have their own method to decompress, the main objective is the same : to change their mind and think about something else than the source of stress (often work).

Photo by Josh Duke on Unsplash

Laura, our persona

Based on our user researches, we defined our persona : Laura, Parisian in her 30’s, she’s young, dynamic and sociable manager, who struggles to do things right despite her stress.

She always tries to do things well and want to be up to her own and others’ requirements. It’s important to her to do things well and satisfy others. But she lacks time to do everything as she would like to do and the stress has negative impact on her health and mood.

How might we help Laura ?

After the persona definition, we used the How Might We method for the problem statement. This technic consists in brainstorming multiple questions starting with “How might we …” (not so broad or narrow). It enables to generate many different ideas and see the problem positively, as an opportunity of design.

Hereunder the 3 HMW that we identified among many others :

HMW help Laura to manage her stress better and quicker , so that she can reach her goals ?

, so that she can reach her goals ? HMW help Laura to do a break before the stress becomes too intense ?

before the stress becomes too intense ? HMW help Laura to prioritize her tasks to relieve her stress ?

Too many ideas !

For the ideation, we used Crazy 8 technic with the help of 4 other UX designers (big thanks to Clémence Gueidan, Amina Ziane-Cherif, Sarah-Lee Accaoui and Arianegaudeaux). This method consists in drawing 8 ideas in 8 minutes (1 draw per minute). And the craziest ideas are more than welcome !

Once we had our bunch of creative ideas (as we were 6 to participate, the Crazy 8’s gave us 48 ideas of solution !), we wrote them on a post-its and sorted them by using the MoSCoW method to prioritize features which will compose our MVP.

Presentation template from Slidesgo

What is MVP ? According to Agile Alliance’s definition, Minimum Viable Product is a “version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort”. By releasing a version of the product with just enough features to be usable, you can gather feedbacks from the real users and quickly optimize it and avoid spending too much energy in developing uncertain features.

And what is MoSCoW method ? According to ProductPlan, MoSCoW method is a prioritization framework invented by Dai Clegg, which consists in classifying features in 4 categories :

Must-have : non-negotiable and mandatory

: non-negotiable and mandatory Should-have : not vital but important with significant value

: not vital but important with significant value Could-have : Nice-to-have with small impact

: Nice-to-have with small impact Won’t have : not a priority

By categorizing ideas like this, it was quite easy to decide which features will compose the MVP.

All this researches resulted in this User Flow !

Let’s prototype it 💪

With my teammate, as we needed to design the prototype in pair in parallel, we began by sketching quickly the screens in low-fidelity wireframes to agree on the structures of the prototype before beginning the mid-fidelity ones. Both of us draw each screens, then we put them together and selected the best elements of each version.

And of course, we set up few components and styles in Figma, to assure that our screens would be consistent even if we were 2 designers to work in parallel.

Once the mid-fi prototype done, we asked to 5 potential users to test it.

Presentation template from Slidesgo

The feedback were quite positive in overall, and we got some precious feedbacks helping us to keep the MVP relevant.

For example, in the homepage screen, the fact that we presented immediately the stress tacking graph was revealed stressful for someone already stressed. So we kept it in the bottom of the screen in the final version.

Another example is the “What happens if I don’t do this task ?” field from the task page. During the usability testing, we discovered that this was seen as another source of stress and unwanted feature (no one wanted to use it as it’s too long to fill 🙈). So we simply removed it from the hi-fidelity prototype.

And what would it look like ?

According to Zendo’s brand attributes that we defined, which are calm, supportive and efficient, we constituted a moodboard and a style tile.

Moodboard made with images from Unsplash

Zendo’s style tile

To check that our design corresponded to the ideas that we wanted to communicate, we realized a quick desirability testing with about 15 people. We showed the prototype screen for 5 seconds, then asked them to vote for 5 words among displayed 42.

The 42 cards

The results were Young, Cheerful, Secure and Confident which were aligned with the brand image that we wanted to transcribe through our design 🤩

Small but important details

While designing the hi-fidelity screens, we also wanted to pay attention to details and check that the design would be accessible also for people with visual disabilities.

For example, we used Stark plugin for Figma to check that the colors were contrasted enough for people with visual disabilities, and adapted them when the result was not good enough.