top of page
hermes-rivera-Ww8eQWjMJWk-unsplash.jpg

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

iPhone 11 Pro-1.png
iPhone 11 Pro.png

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. 

Untitled_Artwork 32.png
Untitled_Artwork 34.png

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

Frame 61.png

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

Untitled_Artwork 21.png

"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.

Persona 2.png

Lactose intolerant and plant-based diet enthusiast

Vegan, has anemia

Persona 1.png

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:

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. 

Testing my mid-fid prototype

Olive's sitemap

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
Home Screen.png

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
Home Screen - Carousel menu.png
Home Screen - Pop-Up Plus Menu.png

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. 

Add Food 1.png
After
Add Food 2.0 (1).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.

Add Food 2.0 (3).png

2 participants mentioned the lack of feedback when finalizing a task. I added a toast notification at the top of the screen.

Home Screen - Version 2.png

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. 

Frame 43.png

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

MOCKUPS - MOBILE.png

Next Steps

This is what I would do if I had more time and resources to keep working on Olive:

Frame 49.png
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.

Frame 50.png
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.

Frame 62.png
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

Untitled_Artwork 29.png

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. 

Untitled_Artwork 32.png

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.

Untitled_Artwork 30.png

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. 

Untitled_Artwork 27.png
Untitled_Artwork 28.png

Ask for feedback from experienced professionals

Untitled_Artwork 33.png

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. 

Thank you for taking a look at my work :)

Now you know how my design process worked for this project. How can I help you with your next project?

Let's connect and share our thoughts about UX, UI, and the industry in general! I like to learn new stuff :)

Aline Carbonaro

UX/UI Designer

Untitled_Artwork 35.png

See also...

Breakpoint Mockups.png

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. 

MOCKUPS - MOBILE.png

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. 

bottom of page