Yummy Cart
A Recipe Based Grocery Delivery App
----------------------------------------------------------------------------------------------
"Wish I could have an app that drops my favorite recipe ingredients at my door-step without having to step out"
----------------------------------------------------------------------------------------------
App Overview
Yummy Cart is a grocery delivery app that helps users order the right amount of ingredients based on the recipes they select using the app. Once the order is placed, the items are delivered to the users' preferred location.
----------------------------------------------------------------------------------------------
The Problem
While most users prefer to shop in-store, rather than with a groceries app, often, they find it extremely exhausting to travel every time to their neighborhood/farther groceries store to get the right quantity of ingredients for recipes.
----------------------------------------------------------------------------------------------
Goals
-
To design an interactive app that makes the online grocery shopping experience easy for users.
----------------------------------------------------------------------------------------------
My Role
Duration
UX/UI Designer
8 months
----------------------------------------------------------------------------------------------
Design Process
----------------------------------------------------------------------------------------------
User Research
I identified three groups of potential target audience members to recruit for my surveys and interviews:
-
People who prepared meals and shopped for groceries both in-store and online.
-
People who used grocery delivery apps and other recipe apps.
-
People who frequently traveled to grocery stores.
----------------------------------------------------------------------------------------------
User Insights
----------------------------------------------------------------------------------------------
Competitive Analysis
Competitors
The competitors that were evaluated are as follows:
-
Mealime (App & Website)
-
Budget Bytes (App & Website)
-
Instacart (App & Website)
They were evaluated based on Norman-Nielsen's Group Usability Heuristics:
-
Visibility of system status
-
Match between system and the real world
-
User Control and Freedom
-
Flexibility and Efficiency of Use
-
Aesthetic and Minimalist Design
The following areas that I selected for evaluation of the Apps are:
-
Searching the right ingredients in the right quantities
-
Grocery Delivery Feature
-
Recipe details of meal preparation
----------------------------------------------------------------------------------------------
Personas
The persona below presents a bigger picture of a section of users and their pain points involving travel to groceries to get the right quantities of groceries at a desirable price.
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
Information Architecture
Yummy Cart - Sitemap
User Flows
Sketches
Based on the sitemaps and user flows, the following sketches and wireframes were designed as initial ideations before creating a high-fidelity prototype.
1. User Onboarding
----------------------------------------------------------------------------------------------
2. Checkout Recipes and Place Orders for Ingredients
----------------------------------------------------------------------------------------------
3. Check Order Status and Get Notified When Order Is Delivered
Wireframes
1. User Onboarding
2. Checkout Recipes and Place Orders for Ingredients
----------------------------------------------------------------------------------------------
3. Check Order Status and Get Notified When Order Is Delivered
Moodboard
Style Guide
User Interfaces
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
Prototypes in Action
1. User Onboarding
Please click here to try the prototype.
2. Checkout Recipes and Place Orders for Ingredients
Please click here to try the prototype.
3. Check Order Status and Get Notified When Order Is Delivered
Please click here to try the prototype.
----------------------------------------------------------------------------------------------
Key Takeaways
Post-completion of the initial high-fidelity prototype, I set out to conduct user interviews in order to understand their usability of the prototype I created. One of the important features of my focus was the flow from a selection of a recipe leading to its ingredients getting automatically added to the cart. The app was highly appreciated by all the users on an overall basis and they said:
Likes:
"This is a one-stop app for same-day grocery delivery & recipe preparation"
"Wish this app was a reality"
"This app is so easy to understand"
Wished to see/Enhancements:
"Wish this app had a store selection feature on the cart screen instead of the account screen(original location)"
"A recipe preparation video would be helpful"
"I would love to see a curbside pickup option if I am anywhere near the store"
Iterations
Based on the user feedback, the following screens were iterated which I plan to include in future MVPs.
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
Results
The design addresses the original problem by helping users in getting groceries delivered within a 2-hour window of placing the order for ingredients based on the selection of their favorite recipes. Goes without saying:
-
Users can save time instead of driving long distances to buy groceries.
-
As the right quantity of ingredients is purchased, there is less food wastage in the end.
-
A 3 step hassle-free online grocery shopping from users' favorite stores.
----------------------------------------------------------------------------------------------
Personal Takeaways
-
Through this project, I was able to hone my rapid design and prototyping skills using Figma.
-
Gained an immense amount of expertise in building a product from start to finish.
-
Being able to figure out what feature works best or aligns with the user goals and what doesn't.
"Wish this app became a reality"
- Quoted by several usability participants.
Experimentations for BETA Version (Work In Progress)
The BETA version below features a budget-based recipe app called "Eat Plan" which helps users in planning their meals and grocery budget. This experimental version is being created to add additional features to the alpha version "Yummy Cart".
Eat Plan
A Budget-Based Recipe App