ABOUT THE PROJECT
Discover the cooking you love, with what you have.
People who tend to overshop need better ways to manage their groceries to avoid food waste. Superbelly is the app that transforms the ingredients already in your pantry into delicious recipes, inspiring you every day with no waste.
DURATION
2 weeks / August 2018
FIELD
User Experience * Visual Design * Prototyping * User Testing
CLIENT
Group project
00. BRIEF
The challenge
A digital supermarket wants to create a differentiating digital experience of its e-commerce in order to stand out from its competitors. In addition, the market want to promuove its premium product in a different way.
01. EMPATHIZE
Survey & Interviews
To create a standout experience for our digital supermarket app, conducting UX research was essential to understand users' needs and preferences while shopping. My team and I conducted multiple interviews and a survey with over 100 responses, which helped us pinpoint key areas to enhance the user experience and address any pain points.
With these insights, we can seamlessly introduce premium food options during the shopping process, adding value and boosting user satisfaction.
73%
Improvise their meals with leftover products in your fridge.
78,5%
Throw way the food because it expires.
Insights
We transferred the collected data and created an affinity diagram to group findings based on patterns and relationships.
We discovered that people are concerned about food waste, which occurs primarily for three reasons: they tend to overshop, their fresh food expires, or they're unsure what meals to make with the ingredients they already have at home.
Therefore, we saw an opportunity to create a product that helps reduce food waste by suggesting tasty recipes based on the ingredients users already have. Additionally, users can order any missing ingredients to complete the recipe and premium ingredients to elevate the recipes to a gourmet level.
02. DEFINE
Problem Statement
After analyzed the findings, we 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 the fresh products in his fridge, causing him to either repurchase them or throw them away when they expire.
Carlo feels frustrate when he overshops and throw their food away so he would like find a way to manager their food groceries better and be inspired for cooking delicius meals.
03. IDEATION
MoSCoW method for prioritize Superbelly features
Prioritize features
It’s time to select and prioritize what we want to include on the app.
We used The MOSCOW method in oder to categorize what features are a must, optional and out of the scope of the product or Carlo’s pain points:
Reduce food waste by suggesting tasty recipes based on the ingredients users already have. Additionally, users can order any missing ingredients to complete the recipe and premium ingredients to elevate the recipes to a gourmet level.
User Story & User flow
Due to lack of time, we decided to focus on projecting only three user needs, described in the following user stories:
As a Superbelly user, I want to find a recipe that includes the ingredients I have in my kitchen so I don't throw away food.
As a Superbelly user, I want to order any missing ingredients for a recipe to ensure I can prepare the meal properly.
As a Superbelly user, I want to order premium products so I can cook a gourmet recipe.
Prototype of Superbelly app craft on paper (Low-fidelity)
04. PROTOTYPE & TEST
Wireframes
After clearly defining the main user flows, we began visualizing the structure of the Android app using wireframes. We sketched the key screens on paper and tested them with users.
Through this testing, we observed how users interacted with the prototype in a more realistic way, identifying the main pain points in the user flows. We also discovered that certain elements—such as icons, buttons, titles, components, and sections—were still not as intuitive as we had hoped.
05. UI DESIGN PROCESS
Brand attributes & Moodboard
It’s time to bring together all the concepts and insights from the previous stages. We’ve decided to name the app Superbelly, defining brand attributes to shape its personality. Next, we created a moodboard to establish the visual style and tone of the interface.
Convenient but not overwhelming
User-friendly but not simplistic
Comprehensive but not confusing
Moodboard of Superbelly app
Visual Identity
Discover the cooking you love, with what you have
Superbelly is the app that transforms the ingredients you already have into delicious recipes, inspiring you daily with zero waste. Just enter what you have, and we’ll suggest creative, easy-to-make dishes.
Missing an ingredient? No problem: order what you need directly from the app.
Want to add a special touch? Choose gourmet products to elevate your recipe and turn every meal into a unique experience.
We chose two fonts families:
For main titles and smaller subheadings, we chose the DM Serif Text family, which offers strong serifs and a distinctive, character-rich design.
For the remaining content in the Superbelly app, we chose the Source Sans Pro family. This font is well-suited for user interfaces due to its clean lines and modern proportions.
TYPOGRAPHY
COLORS
Style tile & Mock up
The app's UI design highlights photos of ingredients and recipes to enhance clarity and simplify the process of entering available ingredients and displaying recipes that use them. Additionally, illustrations add personality to the brand, making the experience more engaging and user-friendly.
UI components
ONBOARDING
Welcome to Superbelly
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.
Find recipes: First, users will be prompted to enter the ingredients they currently have in their kitchen. By using smart algorithms, the app creatively matches ingredients to recipes, helping reduce food waste while enabling users to discover new and exciting dishes.
Order products: If users are missing a few items for a recipe, the app will suggest adding them to a shopping list, which can be accessed at any time. This feature helps users stay organized when planning meals for the week.
Delivery services: Users can schedule a delivery and have their groceries conveniently brought right to their doorstep.
HOME
Quick guide to the Superbelly app
The Superbelly app homepage is designed to offer a smooth and intuitive shopping experience. At the top, you'll find the latest news, such as special offers, discounts, and newly arrived products, helping you stay up to date with the best deals.
Below this, you’ll see the product categories, organized to make your search for groceries quick and easy. Whether you're looking for fresh produce, pantry essentials, or household items, you can easily navigate through the different sections.
At the bottom, the most frequently purchased products are highlighted, showcasing popular items based on your previous purchases or overall customer preferences, so you can quickly add your favorites to your cart.
COOK
Turn ingredients into delicious recipes
One of the standout features of our app is the ingredient entry system. When users first start using the app, they will be prompted to input the ingredients they currently have in their kitchen. This feature makes it easy to keep track of what’s on hand and ensures that no food goes to waste.
Once the ingredients are entered, our app utilizes smart algorithms to creatively match them with a variety of recipes. This means users can quickly find delicious meals they can prepare with what they already have, minimizing food waste, saving time and money.
1. 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.
2. 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.
3. 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.
4. 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.
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.
Recipes: If the user wants to purchase ingredients for different recipes, they will be listed separately under each recipe.
Ingredients: All food items will appear in a single list, regardless of whether they belong to different recipes.
