Image for post
Image for post

UX/UI Case study — Zendo mobile application

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 .

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

From Giphy.com

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.

Image for post
Image for post
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.

Image for post
Image for post
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 think they are stressed by nature, 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).
Image for post
Image for post
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 ?
  • HMW help Laura to do a break 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 , , and ). 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.

Image for post
Image for post
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
  • Should-have : not vital but important with significant value
  • Could-have : 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 !

Image for post
Image for post

Let’s prototype it 💪

Image for post
Image for post

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.

Image for post
Image for post
Presentation template from Slidesgo

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

Image for post
Image for post

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.

Image for post
Image for post
Moodboard made with images from Unsplash
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Stark plugin enables to simulate the colors for people suffering from Protanopia, Deuteranopia and Tritanopia
Image for post
Image for post

We also put a small “point” to indicate the selected tab in the nav bar, in addition to the colored highlight.

And to finished we also anticipated potential error actions from the users.

Image for post
Image for post
Image for post
Image for post
The “Validate” CTA is disabled until the reason select is not filled (first image), and in case of the users would mark a task as “Done”, a “Cancel” link is displayed with the confirmation message during few seconds (second image).

Zendo MVP Prototype

Here is the result of our 10 days-work in a quick video !

Thank you so much for reading until the end ! Hope you enjoyed the article ❤️

Do not hesitate to comment and stay zen 🧘🏻‍♀️

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store