Olive
How might we help and motivate people to gradually switch to a plant-based diet?
Overview
Olive was my UX/UI project on the CareerFoundry UX Immersion course, where I learned and actively practiced a user-centered design process. I was excited to work with a product focused on personal development and environment, and learn research methods and new design tools while developing it.
My Role
UX Researcher
UX Designer
UI Designer
Context
Individual Project
UX Immersion Course
Tools
-
Figma
-
Procreate
-
Usability Hub
-
Optimal Workshop
-
Google Meet
The problem
More and more people are aware of how we consume our food and other products significantly impacts the environment and in our health. They want to change their eating habits and consumption, but are not sure of how to start without being abrupt and compromising their health.
The solution
Allow health and environment-conscious individuals to log in to an application to record and keep track of their nutritional information, keep them motivated to try new diets in order to switch to a plant-based diet, and learn about the positive impact of doing so.
My design process for Olive
Business Requirements
Competitive Analysis
Problem Statement
User Interviews
Affinity Mapping
User Personas
User Flows
User Journey
Information Architecture
Card Sorting
Sitemap
Low-Fidelity Wireframes
Mid-Fidelity Wireframes
Mid-Fidelity Prototype
Mid-Fidelity Usability Test
Rainbow Spreadsheet
Design Iteration
A/B Testing
High-Fidelity Wireframes
High-Fidelity Prototype
Design Collaboration & Iteration
UI Style Guide
Final Prototype
Explore the current prototype
(Or keep scrolling down to see the detailed design process)
Understanding the problem
I developed the business requirements to better understand the constrains and the stakeholder's perspective set by the course's overview. Then, the SWOT competitive analysis performed with Fooducate and Chronometer was informative to learn what is already done in this market, but it also showed some opportunities that I could explore such as:
-
Business Requirements
-
Competitive Analysis
-
Problem Statement
No motivational
features
There is no feature or gamification element that motivates the user to keep a balanced/desired diet by rewarding them somehow.
Lack of plant-based diet suggestions
Users are underserved for vegan or vegetarian diet options based on their nutritional data.
Limited educational content
Both platforms focus their blog content on weight loss topics, there are not many resources to learn more about environmental-conscious food consumption
Problem statement
The user needs a way to switch to a plant-based diet in a healthy and motivational manner because this is a huge physical and mental change in a person's life, a different process for everyone. We will know this to be true when we see our users being encouraged to keep going with their transition, trusting our app to get relevant information and guidance they need for a safe, smooth and encouraging nutritional transition.
Defining the user
I interviewed 5 participants that somehow fit in the target audience (vegans, users with food allergies or restrictions, and users who simply want to try plant-based diets). I wanted to understand their motivations, needs, and habits towards food and nutrition.
-
User Interviews
-
Affinity Mapping
-
User Personas
Key insights from interviews:
Tracking nutrients when removing animal protein from diet
"It'd be great to have a tool to help me keep track of my calcium and iron to make sure I stay healthy."
User Personas
Based on the research and interviews, I found out that there are two types of potential users that I should keep in mind during my design decision-making process.
Lactose intolerant and plant-based diet enthusiast
Vegan, has anemia
Ideating the product
In order to visualize how the users would interact with Olive, I created a user flow for two different tasks and from each persona's point of view. I conducted a closed card sorting session to organize the information architecture the first sitemap version, then I iterated it based on the usability test and design collaboration, creating a more intuitive flow.
-
User Journey
-
User Flows
-
Information Architecture
-
Card Sorting
-
Sitemap
Slide to see user journeys & flows:
Joe wants to sign up for a challenge so that he gets motivated to try new plant-based dishes.
Joe wants to sign up for a challenge so that he gets motivated to try new plant-based dishes.
Amanda wants to share a vegan recipe with her parents so that they can see how nutritious and healthy her diet is.
Joe wants to sign up for a challenge so that he gets motivated to try new plant-based dishes.
Current Sitemap
(after card sorting, usability test, and design collaboration)
Wireframes & Prototype
I aimed at creating intuitive flows and familiar UI elements such as completion ring for challenges and recipe cards.
- At the home screen, the user will tap on "Add food" button, then they will be redirected to the search page. ​ - The user can also access other categories, such as recent viewed or saved foods. After finding the food, the user will see brief information about it, and then enter the portion and select which meal that food was added to. ​ - On mobile, the user can also scan the barcode of the product.
- At the home screen, the user will see the challenge rings in progress and a plus button to add a new one. - The user will be directed to the challenges list page, where they can browse and see more information about each one of them, and the "rules" required to successfully complete the challenge. - The new challenge and the streak days will be displayed at the home screen as a reminder and to keep the user motivated.
- Besides searching and finding new recipes for consultation, the user is able to start a new meal plan for a given day from the Recipes section. - The user browses the Recipes section, which showcases the title, a picture, informational labels (e.g. vegetarian, portion served, how long does it take to be made), nutritional bars, the ingredients, and the directions. - Then the user will tap "Add to Meal Plan", and choose in which meal and day of the week that recipes will be served.
- At the home screen, the user will tap on "Add food" button, then they will be redirected to the search page. ​ - The user can also access other categories, such as recent viewed or saved foods. After finding the food, the user will see brief information about it, and then enter the portion and select which meal that food was added to. ​ - On mobile, the user can also scan the barcode of the product.
Testing my mid-fid prototype
Six tests were carried out, two in person, and four online. All participants were able to finish the tasks, but each one rated the tasks differently. Overall, all participants stated that they enjoyed the app, that it would be useful to their diet needs. I categorized the most recurring issues in a rainbow spreadsheet and classified the issues according to Jakob Nielsen’s four-step rating scale. Below, you can see my suggestions to improve the experience:
-
Lo-Fi Wireframes
-
Mid-Fi Wireframes
-
Mid-Fi Prototype
-
Usability Test
-
Rainbow Spreadsheet
-
Design Iteration
-
Preference Test
Before
All users went to "My Diary" tab to add food to their daily summary, instead of clicking on "Add Food".
Most users preferred to click on "Challenges" to add a new challenge than clicking the plus button.
After
Both actions were placed in a plus button located at the navigation bar, so that all "add" actions be located in the same place.
Before
4 participants had trouble understanding the menu and keep going with the task.
After
.png)
I created a barcode icon button and added an explanation on the empty page to make the process more intuitive, as well as removing the food categories.
.png)
2 participants mentioned the lack of feedback when finalizing a task. I added a toast notification at the top of the screen.
Refining my prototype
Olive is coming to life! Before moving on to the high-fidelity wireframes, I played around with color schemes related to nature, and developed a style guide for the UI. Once finished, I sent my screens to other designers to get their feedback on my design decisions.
Style Guide & Pattern Library
-
UI Style Guide
-
Hi-Fid Wireframes
-
Design Collaboration
-
Hi-Fid Prototype
Earthy tones of green and brown are the most prominent colors to convey the "plant-based" and nature vibe of Olive.
Poppins
A clear, elegant and readable font, Poppins will be good for the daily usage of our users, both for reading long recipes and for adding new food.
High-fidelity prototype
Next Steps
This is what I would do if I had more time and resources to keep working on Olive:
Further user testing
Diary and field studies would help me to better understand how the user behaves in a restaurant or throughout the day when entering information about their food consumption in a longer period of time.
Add restaurant menus
Adding restaurant menus to the app's database would be good for the user to simply select a meal or dish to add to their daily meals and get the nutritional information right away.
Develop functionalities for nutritionists
Nutritionists are potential users that would highly benefit from Olive, where they could upload meal plans for their patients or follow their progress towards their diet goals.
Key learnings
Communicate
with your team
My team was my mentor and tutor, and they really helped me to see information more clearly to get more insights from my research. Building a good relationship with both of them since day one was key to make me feel more comfortable and assured that my product development and learning process was in good hands.
Keep asking "why"
Keep asking why during user testing to make users reflect on the reasons why they are struggling. This way, testers will have more insights to share, and can reflect on the product they are testing, sharing information that they otherwise would not realize.
Trust the process
There were moments when I felt overwhelmed about the amount of information I was receiving in a short period, and felt that I wouldn't be able to do it, but everything worked out in the end. One step at a time is the key mindset, specially in such a big project like Olive.
Ask for feedback from experienced professionals
Test and iterate the design constantly
Showing my prototype to experienced designers and fellow colleagues in the course, was really important to get insights about best practices in the industry, as well as guidance to future projects. I was the sole designer in charge of this project, so having outside feedback was extremely valuable.
There will always be room for improvement, and a fresh look at the product might bring a new perspective to the product, increasing the creation possibilities.
See also...
StudyBuddy
UI Designer
Study Buddy is a social network for students who are looking for like-minded users who are studying similar subjects to share their academic goals, motivate each other and get some help from their peers.
Stories2Connect
UX/UI Designer
Stories2Connect is an app that brings communities together in book-sharing events, and allow school-age children to have access to books recommended according to their reading level.