4 —Case study: Wellness app — Part 1 : UX
For this 4th project of Ironhack’s bootcamp, we had to work in pair during 2 weeks and I was with my amazing cancer partner: ✨Sombath Her!✨
We worked together for one client: the National Wellness Institute.
🔎 Who are they?
The National Wellness Institute is an organization founded in 1977 with the mission of providing health promotion and wellness professionals unparalleled resources and services that fuel professional and personal growth.
Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle.The National Wellness Institute gives us the following challenge:
“Re-imagine how people can adopt and maintain a routine that enhances their well-being.”
The only obligation was to build a required system to tracks the user’s progress and pushes them to commit to a healthier lifestyle.
We focused on creating an eating/diet application for a native iOS.
And that’s how YUMMAMI was born! 🥗
Why Yummami?
We create this app with a specific purpose: conduct a diet with healthy eating habits.
But we have to find a way to be different from our competitors because there is a lot of diet app, healthy food etc.
Our name come to the fusion between two terms: “yummy” and “umami”.
Umami is one of the core fifth tastes including sweet, sour, bitter, and salty. Umami in Japanese means “essence of deliciousness” : its taste is often described as the meaty, savory deliciousness that deepens flavor.
The point of the app is to have recipes (both tasty and healthy, in order to lose weigh without frustrations) send by a coach. To do that, the coach creates for the user a weekly meals plan: recipes calories can’t exceed the goal, based on your profile informations.
To help us in the process, we used some tools…
Road Map
Using a roadmap is really helpful when you worked with a team: this tool helps us to define tasks to do for each day, to stay organized and not lose time.
Each designer can follow this document and see at which stage we are: “do we need to hurry up? What do we have to do today?”
For the 1st week, we tried to get the UX part done and on the 2nd week, we were focused on the UI part.
…and Agile methodology:
Lean Kanban
Kanban (Japanese word for “sign, panel”) facilitates collaboration between your agile team members. Like Scrum, it encourages work to be broken down into small tasks (e.g: To Do — Doing — Done). Teams will use a Kanban board to visualize this work as it progresses through the workflow.
This is our board, few days before our presentation. The UX part was done, we were in progress on the UI part (Hi-Fi prototype, Atomic design…) and we had some final steps to do (Animations on the prototype…)
Now that you have seen our organisation about our 2 weeks projects, we must follow once again the steps of design thinking :
1 — EMPATHIZE
To understand more the business, we’ve made a feature analysis to know more our competitors and compare their features with Yummami.
We select famous brands like: Weight Watchers, Le Secret Du Poids (LSDP), Noom, Lifesum and My Fitness Pal.
It help us understand the kind of features each app possess and to see where our app stands out against his competitors, we created a Market Position Chart:
Survey
Now that we know more about our competitors, it’s time to discover more our user’s point of view: expectations or frustrations… it’s our job to investigate a lot, that’s why we had conduct quantitative data first!
As usual after quantitative data, we must affine our interviews to gather more details, so we made 5 users interviews to collect a lot of insights.
After that, we grouped all of these in another tool:
The Affinity Diagram
As u can see, we got a lot of interesting quotes! Affinity diagram is an excellent tool to help us for a better understanding about our users’ needs.
The point is to gather the comments of our users in groupes to clarify the categories (pains, needs etc)
To understand and explain user needs more deeply, we also use another design thinking’s tool:
The Empathy Map
An empathy map is a simple, easy-to-digest visual that captures knowledge about a user’s behaviors and attitudes.
You can have a better view of your user behavior by responding to these questions:
* Who is the user?
* What do they need to do?
* What do they see?
* What do they say?
* What do they do?
* What do they hear?
>> What are their pains & gains?
Now we can see more precisely our user’s behavior, but to be sure you don’t run into the wall, we must continue to define our future product by using “Jobs to be done”.
The Jobs to be done: Value Proposition Canvas & Jobs stories
Jobs to be Done is a theory of consumer action. It describes the mechanisms that cause a consumer to adopt an innovation : in other words, it focuses on why a customer needs to buy a product, the tasks they have to perform, and not on the features that might lead a certain customer profile to buy it.
To do so, we use the “Value Proposition Canvas”, a tool developped by Alex Osterwalder as a framework to ensure that there is a fit between the product and market: customer segments and value propositions.
The Value Proposition Canvas can be used when there is need to refine an existing product or service offering or where a new offering is being developed from scratch.
After doing this, we created 3 job stories to understand what motivates the customer to use our product:
Now that we see more clearer, we can jump into the 2nd step of Design Thinking.
2 — DEFINE
Persona
With all of our previous researches, we could now build our persona.
A persona in user-centered design is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.
It is the archetype of an interface user group.
Caroline DEVILLE, “The joyful gastronome.”
Caroline is a food reporter, she has a passion for travel and discover beautiful places. Because of her job, she is always asked to taste the dishes, and it’s hard for her to maintain her weight. However she takes care about herself and aspires to a healthier life. After a busy week at work she likes to treat herself the weekend, as an hedonist, with tasty food with her friends.
Goals :
- She is seeking support from a coach and to be given advice throughout the day.
- She would like to be suggested recipes and not worry about exceeding her weight goal.
Frustrations :
- She does not want to weigh her ingredients because it is time consuming.
- Cooking takes too much time and recipes are too restrictives.
- It is hard to stay motivated alone in the long term.
User Journey Map
After identified the goals and frustrations of Caroline, we used the user journey map to help us empathize even more (it’s the point of UX Design 😉).
A customer journey is a compilation of the user’s goals, actions, thoughts and emotions on a timeline. It is used to understand and satisfy customer needs and pain points.
The story is about Caroline finding out she gained pounds and it upset her a lot. To try to get back on track, she asks her friend about healthy eating and diet apps. Her friend recommends two applications she used:
After creating her profile and setting a weight goal, she finds that she has to count her calories by measuring the weight of each ingredient, which already annoys her greatly.
Wanting to cook for her dinner, she finds that the app doesn’t offer any recipes, so she doesn’t know if what she’s cooking will be healthy enough to counteract her excesses.
Frustrated, she deletes this app and try the second one which she finds much better.
It has helped us to bring out different opportunities:
Caroline needs an app with a coach offering a weekly meals plan. The recipes she will find in the app should be tasty, healthy, easy-to-make and must help her not exceed the number of calories she put in her profile goal by tracking them on a weigh graph.
What is our problem?
Problem & Hypothesis Statement
Caroline needs to find a way to eat healthier without weighting her ingredients to count each calories because it’s time consuming for her.
Whilst your problem statement identifies the problem you hope to solve, the hypothesis helps you decide on how you will try to solve it.
We believe by offering Caroline a coaching system and advising her in her daily nutrition, will achieve in helping her saving time and taking care about her healthy eating. We will know we are right when she will reach her setting goal in the app without frustrations.
So how might we:
- help users to find support and not exceed their setting goal?
- help users to lose or gain weight without frustration in an healthy way?
- allow users not to be stressed by weighting their ingredients?
That is what we are going to see with the MoSCoW method that facilitates decision making.
— MoSCoW stands for four different categories of initiatives —
must-haves/ should-haves/ could-haves/ and will not have.
All of these different categories help us to define precisely our products features: the unmissable, the core of the products (Must Have : Coach with meals plans for example) ; the added features to complete the previous ones (Should Have : emotional states) ; the other possibilities to implement after (Could Have : Community) and the things the app will not have because they are not relevant or useful to users (Won’t Have : Weigh ingredients).
To further synthesize, we use the MVP method:
When creating the Most Valuable Product (MVP), our focus is to find the simplest solution while considering the needs of the user.
“ The goal of Yummami, at the bare minimum, is to help users to lose or gain weight in an healthy and tasty way. Therefore, we must do the following:
- Proposing recipes plan for users by a coach for each week, and have a look at their daily weigh and calories graph based on their goal.
- By having a personalized coaching menus, they can stay motivated and reach their goal without stress thanks to all of these features. ”
One last step before the ideation (third step of design thinking process) is the User flow.
Indeed, how could we iterate and think of one thing if we don’t have the global view and path to take?
This is the second version of our user flow for Caroline’s epic story.
We thought first about another version when Caroline just needs to take a picture of her meal and send it to the coach. By doing this, the coach could analyze her meal and told her more about that. But a coach is often expensive according to its request so we had to think of another way!
And this is our final version :
Caroline creates her profil when opening the app and selects her mood of the day. Then, she chooses a breakfast recipe from the selection proposed by her coach. Once added, she heads back to the home page where she sees her calorie graph growth and finally she clicks on the recipe for cooking instructions.
Now that we have all of the informations we needed and complete the empathize & define steps of design thinking, it’s time to jump to the stage 2: the UI part!