Ironhack Project 4: Wellness
Hi ! This project about wellness lasted 2 weeks, and I had the chance to work with the incredible, the inspiring and the so talented Hélène !
So, what was it about ?
The Client
The National Wellness Institute
To begin with, our client is 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.
The company has years of experience in the wellness field, but have been slow to catch up with technology. So they need to focus on creating a set of digital tools for Wellness coaches and update their image as creating a new visual system that reflects their innovative and refreshed approach to wellness.
Challenge and requirements
Our challenge as designers was to reimagine how people can adopt and maintain a routine that enhances their well-being, by creating a native iOS app with the requirement to track the user’s progress and push them to commit to a healthier lifestyle.
And that is how our app was born !
Yummami
Brief
So first of all, Yummami, the app we created for this project, is a healthy eating, diet app helping you reach a weight goal you set in your profil. Basically you are monitored by a coach, he creates a weekly meals plan, and all those recipe calories can not exceed your goal because it is based on your profile.
Road map
When starting a new creative project with a design team, a roadmap allows each designer to clearly see their tasks across the entire process.
Here for our 2 weeks project you can see we tried to get the UX part done for the first week so we could focus on the UI the second week.
Kanban
Kanban is a workflow management method for defining, managing and improving services that deliver knowledge work. It aims to help you visualize your work, maximize efficiency, and improve continuously. From Japanese, kanban is translated as billboard or signboard.
This is our kanban a few days ago, most of the UX part was already done and as you can see we were still refining our high fi prototype, doing users testing and working on the Atomic Design Inventory.
1 — Empathize
Features Analysis
We began an analysis of the business itself and made a feature analysis to differentiate Yummami against its competitors and compare the proposed features by each app. We chose as competitors for the analysis :
- Noom
- Le secret du poids
- Weight watchers
- Lifesum
- Myfitnesspal
Market Position Chart
In this Market position chart, we can see where our app stands against its competitors.
Survey
We made a survey to reach users and also interviewed five people for the qualitative research.
Here are some datas we collected to help us know more about our users habits concerning healthy eating and diet.
Affinity Diagram
With all the findings we have gathered from both research, quantitative with the survey, and qualitative with the interviews in person and by phone, we have made an Affinity diagram.
This helped us for a better understanding about our users’ needs.
Let us highlight a few significant quotes for you :
- “I would like to be given recipes ideas” — Marion
- “I don’t want to weigh all of my food and put it in an app” — Arthur
- “I have a weigh goal but I can’t reach it” — Mylène
- “Coaching is essential” — Joe
- “I need recipes with substitute ingredients” — Laurent
Empathy map
Empathy mapping is tool that really helps you get to to know your customers. By understanding what your customers think, feel, say and do you can develop rich insight which helps you to identify genuine issues, problems or concerns that your customer may have right now.
Jobs to be done : Value Proposition Canvas & Jobs stories
The Value Proposition Canvas is a tool which can help ensure that a product or service is positioned around what the customer values and needs. It was initially developed by Dr Alexander Osterwalder as a framework to ensure that there is a fit between the product and market.
When it comes to really understanding customers, including jobs to be done, pains, gains as well as your offer to them, the Value Proposition Canvas developed by Alex Osterwalder is the greatest tool.
We created 3 jobs stories to understand what job our product is hired for and identify what customers are trying to achieve.
Job stories evolves from real people, not from the personas. The situation of a user triggers the motivation, which leads to the expected outcome. It talks with the real people’s context and casualty. Job stories triggers the “WHY” which helps the product team to look at the casualty of a user without any assumptions.
2— Define
Primary Persona
The purpose of personas is to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics. Remember, your personas are only as good as the research behind them.
Based on the insights we gathered, we created a primary persona. Meet Caroline, the joyful gastronome.
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 an app where she has 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.
After defining our primary persona, now is time to define a user journey map to help us further empathize with our users.
User journey map
User journey map is a visualization of an individual’s relationships with a product/brand over time and across different channels. While user journey maps come in all shapes and formats, commonly it’s represented as a timeline of all touch points between a user and a product.
This is Caroline’s journey map to help us empathize with her. So the story is about Caroline finding out she gained pounds and asking her friend about healthy eating and diet apps. She is told two apps by her friend, and in the first one after creating her profile and setting a weight goal, she feels annoyed by measuring each ingredient’s weights to calculate the calories. Also for dinner she has to cook her own meal, the app does not advise on any recipes and Caroline does not know if what she is cooking is healthy enough to counterbalance her excesses. At the end of the day she deletes the app, and finds the second app better.
As for opportunities, Caroline needs an app with a coach offering a weekly meals plan. The recipes she will find in the app will help her not exceed the number of calories she put in her profile goal.
Problem and Hypothesis Statement
According to Caroline’s frustrations, we find a problem statement and an 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.
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.
How might we Statements
Here are the three “How might we” that sum up the actual issues of our users.
“We use the How Might We format because it suggests that a solution is possible and because they offer you the chance to answer them in a variety of ways. A properly framed How Might We doesn’t suggest a particular solution, but gives you the perfect frame for innovative thinking.” — Ideo.org
MOSCOW Method & MVP
MoSCoW prioritization, also known as the MoSCoW method or MoSCoW analysis, is a popular prioritization technique for managing requirements. The method is commonly used to help key stakeholders understand the significance of initiatives in a specific release.
MoSCoW stands for four different categories of initiatives: must-haves, should-haves, could-haves, and will not have.
A minimum viable product, or MVP, is a product with enough features to attract early-adopter customers and validate a product idea early in the product development cycle. In industries such as software, the MVP can help the product team receive user feedback as quickly as possible to iterate and improve the product.
Because the agile methodology is built on both validating and iterating products based on user input, the MVP plays a central role in agile development.
User flow
User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.
This is our user flow for Caroline’s epic story. She creates her profil when opening the app and selects the mood of the day. She then picks a breakfast recipe chosen by her coach. She heads back to the home page where she sees her calorie graph growth and finally she clicks on the recipe for cooking instructions.
Ideate
Low fi prototype
This is our low fi sketches of the app. You can see after 5 user testing, a lot had to change for a better experience. Here is a glimpse of iterations we have made in our mid fi :
- We added an “other” field for allergies and moved the “anything else” section at the end of the profile settings, as users were confused to see this field in the 3rd screen and not at the end of the profile setting.
- In the calendar we put a button with left and right arrows for choosing different months, our previous calendar visual was not clear enough for our users.
- And lastly, here when users are looking at the steps for a recipe, they are presented with a video tutorial.
Visual Competitive Analysis
A visual competitive analysis helps compare the qualities of your product against the specific features of the competitor’s products. This is a form of comparative analysis and is used for several purposes, including identifying potential customers and finding ways to improve your product.
We created four visual competitive analysis. These are the current identities of our competitors as we want to look different and set our product apart from the competition.
Mood board
A moodboard is a collection of visual materials that evoke a certain style or concept. Designers, illustrators, photographers, filmmakers and all types of creative professionals create moodboards to communicate the “feel” of an idea.
We made a mood board to convey our design idea. As brand attributes we have :
- Healthy
- Personalized
- Supportive
- Unstressful
- Motivating
Atomic Design Inventory
Atomic design (by. Brad Frost. ) is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together.
This is the atomic design inventory, all the elements we are using in the app we created.
Style guide
UI Style Guides are a design and development tool that brings cohesion to a digital product’s user interface and experience. At their core, they: Record all of the design elements and interactions that occur within a product. List crucial UI components such as buttons, typography, color, navigation menus, etc.
The style guide is all of the design elements and interactions that occur within a product, such as color, icons, buttons and typography.
Prototype
Now we we can present you our final product, Yummami, a healthy eating and diet native iOS app.
Conclusion
You can not worry about failing a project when you are working with the greatest !
Thank you again Hélène !
This 2 weeks project was a BLAST !
Could not be more proud of us :)
