Superbelly is a personal project designed to address the growing issue of food waste among individuals who tend to overshop for groceries.
The app aims to help users reduce waste by transforming the ingredients already in their pantry into delicious and creative recipes.
Superbelly, the digital supermarket, wants to create a standout online shopping experience that’s different from its competitors. They also want to promote their premium products in a fresh, new way.
I had many unanswered questions, so I knew I needed to conduct thorough UX research to gather enough data and insights to create a truly useful product. The challenge was doing this well within just two weeks.
Survey & Interviews.
I conducted several interviews and a survey with over 100 responses, which helped us pinpoint key areas for improving the user experience and addressing pain points.
I transferred the collected data and created an affinity diagram to group findings based on patterns and relationships.
Survey made with Google Form.
Affinity diagram.
Insights
After conducting countless user interviews, contextual inquiry and analyzing the gathered data, I was able to categorize the insights into these 3 categories:
Opportunity
Based on these insights, I can create a product that helps reduce food waste by:
Problem statement
After analyzed the findings, I could define the following problem:
“People who overshop need to find a way to manage their groceries better because they don’t want to waste food”.
User persona
I introduce you Carlo, our User Persona based on the previous research.
Carlo often forgets fresh items in his fridge, leading to repurchasing or throwing them away when they expire. He’s frustrated by overshopping and food waste and wants a better way to manage his groceries and find meal inspiration.
User persona’s card.
Prioritize features
It’s time to prioritize app features using the MOSCOW method, categorizing them as must-haves, optional, or out of scope based on Carlo’s pain points:
MoSCoW method for prioritize Superbelly features.
User story & User flow
Due to time constraints, I focused on three key user needs, captured in these user stories:
I want recipes based on ingredients I have to avoid food waste.
I want to order missing ingredients to complete my recipe.
I want to order premium products for gourmet cooking.
User flow of the main experience.
After defining the main user flows, I created the information architecture and low-fi wireframes for key use cases.
I tested these with users, revealing pain points and issues with the intuitiveness of icons, buttons, titles, and other elements.
Prototype of Superbelly app craft on paper (Low-fidelity).
Brand attributes & Moodboard
I brought together insights from previous stages and named the app Superbelly, defining its brand personality. Then, I created a moodboard to set the visual style and tone.
Moodboard of Superbelly app.
Colors & Typography
Superbelly’s UI colors.
Superbelly’s font families.
Style tile & Illustrations
The app’s UI highlights photos of ingredients and recipes to simplify entering ingredients and displaying matching recipes.
Illustrations add personality to the brand, making the experience more engaging and user-friendly.
Some Superbelly’s illustrations (source: Freepick)
Some Superbelly’s UI components.
Onboarding
When users first open the app, they’ll be welcomed with a brief onboarding overview of Superbelly's key features. It explains how the app helps them create delicious meals using the ingredients they already have at home.
Superbelly’s onboarding.
Home
At the top, you'll find news on offers, discounts, and new arrivals.
Below, product categories make grocery searches quick and easy.
At the bottom, frequently purchased items are highlighted for easy access to your favorites.
Superbelly’s homepage.
Turn ingredients into recipes
Our app lets users input available ingredients, ensuring nothing goes to waste.
Smart algorithms then match these ingredients with recipes, helping users find meals they can make with what they have, saving time, money, and reducing food waste.
Adding ingredients.
Add the ingredients
The user simply enters the ingredients they want to cook with into the app, which quickly identifies each one and makes them easily recognizable with images.
Once the ingredients are confirmed, the algorithm instantly displays recipes that include them.
Choosing ingredients to order.
Find delicious recipes
Once the ingredients are entered, users can quickly discover delicious meals they can create.
The recipes may include additional ingredients, and the app also suggests premium options to enhance the dishes further.
Looking for recipes.
Choose the ingredients
If a recipe includes additional ingredients beyond what the user already entered, these items will appear pre-selected by default, making it easier for the user to add them to their order. Anyway, users can deselect ingredients easily.
Choosing ingredients to order.
Add ingredients to cart
Users can add the ingredients they wish to purchase to complete or enhance the recipe by adding them to their cart for easy ordering.
.gif)
Adding items to cart.
Organized shopping cart
The shopping cart is divided into two sections to provide users with a detailed shopping experience.
This layout allows them to easily track the ingredients they want to purchase, whether for specific recipes or as part of their general shopping list.
Superbelly’s cart: recipe and ingredients.
Projects where I’ve made an impact, transforming ideas into user-centered solutions and tangible results.
