About the company
Justo is an online delivery-only supermarket chain that focuses on better quality products and fairer prices (justo means fair in Spanish) both for their providers and their customers. They have raised over $240M USD in funding and have been growing in México and Latam for a few years.
How it started
Around 95% of Justo’s orders included vegetables and/or fruits, and 35% of these orders included specific instructions on how the products should be manually selected. These instructions were being written on a comment box just before checkout and received by Justo’s “pickers” in the warehouse exactly as users had written them.
Empathize
Most of the comments left by customers on their orders were about the ripeness of their fruits. People cared a lot about how ripe their products were going to be by the time they got to their door. Other comments discussed were size, color, shape, and various characteristics of the produce.
Jüsto wanted to add a new feature to their app for users to feel like they were selecting their own fruits and vegetables. The solution also needed to consider a different –more organized– way of receiving the requests for analytics purposes.
Going deep into the data dump
When the project began, I received a file from Jüsto with 180 comments from real orders. This is a translated example of a typical comment posted:
“Some of the avocados should be almost ready to be eaten and one should be green, the bananas should be slightly green, the turkey breast should be thin but it shouldn’t break, and make sure the fruits aren’t damaged”.
In order to separate requests by category, I deconstructed de 180 comments into 270 specific requests. For example, the comment above would turn into four requests (avocados, bananas, turkey breast, and general fruits).
I also grouped requests into categories (maturity, general quality, size, thickness, and others) and made subdivisions within them. For example, within maturity people could request their fruits green, medium, ripe or varied.
These are the main insights I collected from the data:
- Ripeness was by far the most commented trait with 74% of the requests, followed by general quality with 10%.
- The items that were most commented on were avocados 36%, bananas 14%, and general mentions of “fruits and vegetables” with 13%.
- If we solved the problems for avocados, bananas, and “fruits and vegetables”, we would be solving the majority of the comments.
- By far the most requested “combination” was avocados with varying levels of ripeness (see chart below for the top 5 combinations)
- By far, the most common expression to ask for varied avocados was the phrase “para la semana” or “for the week”. Meaning a varied degree of ripeness than can last the whole week.
Research: Quantitative
I surveyed 200 people and asked them several questions about their grocery consumption habits (especially for fruits and vegetables online). The main purpose of this survey was to help me narrow down our demographics to better define our user persona.
Here’s what the funnel looked like for those 200 answers:
- 196 people said they lived in México.
- 185 people said they were in charge of shopping for groceries at home always or sometimes.
- 166 people said had at least once tried ordering their groceries online.
- 142 people said their level of concern regarding the different experiences in choosing their fruits and vegetables online was 3, 4, or 5 out of 5.
- 87 people said they had at least once left a comment detailing the way they wanted their fruits and vegetables selected.
I decided to select the tier of “concerned” as a base for our user persona. As I took a deeper look into the demographics of this segment, I realized most were women aged 26–34, who lived with their partner or husband and did not have children.
Research: Qualitative
I conducted one-hour interviews with three frequent users of Justo and three frequent users of other online grocery delivery options. Here are some of the main insights I gathered:
- Not being able to select the ripeness of fruits was very annoying for some of the users, they complained mostly about avocados and bananas. The problem is real and they felt it was being ignored.
- They were also annoyed by the general condition of fruits and vegetables. “I prefer to not get it rather than getting it in bad condition”, one person said.
- An option to automatically order avocados “for the week” was suggested.
- There wasn’t enough consensus on what the default state of ripeness should be for each fruit.
- There was a clear repetition of behaviors that led to perfecting our user persona.
Define
User persona
Putting the quantitative and qualitative research together, I reached the following main user persona:
User Journey
This is a snapshot of what the experience of buying fruits and vegetables in Justo looked like, according to some of their users and my own exploratory research. In order to give the most amount of information to the client, I also added some suggestions that weren’t directly linked to our current problem.
Analysis of the problem
After synthesizing our research and taking a step back to see the whole picture, I wrote several How Might We statements to figure out our main problem. These are the main ones:
- How might we replicate the experience of selecting fruits and vegetables in person?
- How might we provide the option to automatically select a varied selection of avocados in terms of ripeness?
- How might we design a simple system to establish better communication between the user and the picker?
Our Hypothesis
If we establish a communication system between the user and the picker that is intuitive for the input and simple to understand for the output, we will be able to replicate the experience of in-person shopping for fruit.
Ideate
Thinking about solutions
Now that we understood our problem, it was time to take a closer look at what other companies in the industry were doing. I picked the largest supermarkets and grocery delivery apps in México and USA to check out their UI.
To my surprise, only one of these major companies was doing something different than a comment box for their users to select the ripeness of their fruits and vegetables.
That company was Rappi and this was their solution:
This solution looked appealing to me at first sight, but then I noticed two issues that clashed with my research.
- Not all fruits and vegetables are the same: Rappi applies the same bar to all of their fruits and vegetables. Although this is probably a very practical first version, not all fruits get riper after they’ve been harvested. This bar could only be used for climacteric fruits like avocados, tomatoes, and apples. It makes no sense to make it available for non-climacteric fruits like grapes, lemons, or peppers.
- Users want varying levels of ripeness: As my research revealed, users in México are interested in getting their fruits in varying levels of ripeness so they can eat them “throughout the week” without them going bad too soon. This bar doesn’t allow that option.
So, after considering different needs and possibilities, I decided to figure out what our priorities would be to be able to ship the best possible product in a short time span.
Prioritization Matrix
Let’s forget about the items in the “forget them” and “do these later” quadrants.
- Do these first
- Ripeness personalization: This is clearly our most important goal.
- “For the week” button: At this point I was pretty sure our users wanted a shortcut to asking for varying levels of ripeness by “trusting” Justo’s common sense rather than specifying the exact amount and level of ripeness for each item.
2. Easy wins
- Categorizing for “days till ripe”: An important insight from my research suggested that users weren’t concerned about the ripeness in itself. The real problem was receiving fruits that were ready to be eaten at an exact date. So, instead of categorizing with a ripe-level system (green, medium, and ripe), we should use a system that tells users how long each item will take before it's perfect for eating.
Prototyping and testing
Justo’s UI
There are three instances in Jüsto’s mobile app for users to add items to their cart.
- Miniature shortcut: You can add and subtract items without entering into the item’s detail screen. This section doesn’t have much space for adding without changing the size of the mini cards.
- Item detail: Apart from adding and subtracting items from the cart, users can change the way they visualize the number of items (piece and weight). This screen has a lot of space to add more information or functionalities.
- Shopping cart: This screen works the same way and has the same functionality as the miniature shortcut. Users can add or subtract their items one last time before paying.
Varied ripeness shortcut
For the first Mid-Fi prototype testing, I tried to design a way for users to select “varied ripeness” from the miniature shortcut card.
- The first alternative was an icon especially designed for this issue. (see the first card in the picture below)
- The second alternative was a checkbox with the word “varied” on top
- The third was the same checkbox but with a longer text: “varied ripeness”.
The idea for either one of these options was that once they were clicked on, Jüsto would apply an algorithm (differently developed for each item) that would select a varied selection of ripeness depending on the total amount of items selected.
After showing the prototypes with the different alternatives to five different testers, I landed on two important insights.
- None of the alternatives were simple to understand.
- The central idea of a “varied ripeness shortcut” was mistaken. My assumption was that people would prefer to do less work, but the reality is that our user personas want to be able to replicate the experience of selecting their fruits and vegetables in person. Our solution should empower them in a simple way.
Item detail ripeness personalization
This Mid-Fi prototype test consisted in comparing two versions of the same solution with different texts. Inside the item detail screen, users can add items with three different options in ripeness.
Version 1
- “Ripeness: ready at delivery”
- “Ripeness: ready 2–4 days after delivery”
- “Ripeness: ready 5+ days after delivery”
Version 2
- “Ripeness: green”
- “Ripeness: normal”
- “Ripeness: ripe”
After testing both options with five different testers, it was clear that version 1 was the best alternative. However, test subjects were skeptical of Jüsto maintaining consistency and delivering on the promise of ripeness being ready for the specific date.
Final Prototypes
At last, here are two user flows showing the solution to our problem.
Next Steps / Suggestions
Even though my help was requested specifically for UX/UI purposes, the problem at hand required thinking about the entire production/distribution chain, not only the digital product.
So here are some of the recommendations I made to Justo to improve their overall experience.
- Determine the minimum standard in quality for each product (how it should look, smell, and feel) and always stick to it.
- Separating baskets for pickers in the warehouse with the same parameters of ripeness as we portray in the app would reduce the risk of human error and increase the speed of packaging.
- Design an educational onboarding process for pickers about the processes of ripping for each product and their more common applications in the kitchen.
- Turn the experience into one that is 100% paperless.
- Keep online offers up to date with what’s actually in stock.
Results (2022 update)
As a frequent customer, I have kept an eye on how Justo’s UI has improved throughout the years. A few months after I delivered the project I noticed the system had been implemented with a few small improvements to the UI.
After almost three years and hundreds of thousands of new customers, they are now using native components for their iOS app, but the system for the experience remains the same. You can order your avocados in relation to the moment they will be ready to be eaten. Below is a screen recording of the flow that’s live as I write this.
