Zero Waste Kitchen
Waste Less, Taste More. Recipes from your pantry to your plate.
iOS & Android Native App | UI/UX Case Study
April - May, 2024 | Jess Cope
The Overview
To design the iOS and Android version of a recipe mobile app that helps users stay organised in the kitchen, in order to prevent household food waste.
Goal
Tool
Figma
Role
UI / UX design & research - Jess Cope
The Purpose
Let’s tackle food waste
Are we buying too much and eating too little? I have a real problem with letting food go to waste and, judging by these stats , I’m not alone.
That’s why I wanted to create an app that not only provides cooking recipes, but suggests which ones to cook based on what food is due to expire first.
It’s estimated that the food waste coming from households alone
amounts to 74kg per person each year.
8-10% of global greenhouse gas emissions are associated with food that is not consumed.
UNEP’s Food Waste Index Report.
The Objective
What’s the solution?
Zero Waste Kitchen aims to help users keep track of what’s coming in and out of their kitchen.
Unlike it’s competitors, this app has expiry date tracking, an integrated shopping list, and suggested recipes based on recent purchases and ingredient expiry dates.
The Approach
User Flow Diagram
The Approach
Why Native & Not A Web App?
Shopping lists can still be accessed at supermarkets with poor connection.
Push notifications can be sent when fresh produce is about to expire.
Cognitive load reduced by following iOS and Material Design guidelines.
The Approach
Learning from the current market
Competitor research really helped me improve upon the ideation stage. Seeing what has previously been done in the market, that users would be familiar with, and bringing those elements across to my designs.
For example, the use of segment pickers to organise food items by category, and floating action buttons that draw the users attention to the screens main goal.
The Approach
Mid-Fidelity Wireframing
A key requirement of this project was to follow iOS and Material Design guidelines. Therefore the wireframing was done, in Figma, using iOS & Material Design 3 assets kits to make sure they aligned with the guidelines right from the start.
iOS VS Material design.
It was important to adapt the designs for each platform to make sure they use native elements.
For example, what a user sees after deleting all expire items from their pantry.
*iOS users would see an action sheet pop up, as these are the native element used when a user has initiated an action that may need further action.
**Material design uses snack bars with an undo after the action takes place to speed up the process. If the user has made a mistake, they can easily go back.
UI Elements
Filter chips default position depends on time of day upon opening app and the users diet settings.
Cards are a familiar UI pattern across both operating systems, to use when presenting data like this. An image to grab the users attention works well for the food topic.
Tab bars used, inline with iOS and Material guidelines (called bottom navigation), as this is a familiar element to both Apple and Android users and used in most apps for navigation.
The Approach
Sound & Haptic Feedback
Example:
Item crossed off shopping list
Haptic feedback:
iOS ‘Success’ notification (Indicates that a task or action has completed.)
Vibration starts low and ends high giving positive connotation.
Why?
The user is likely to tick things off their list when shopping at the store. Therefore they may become distracted and briefly look up from their phone. The physical feedback confirms their action to them without needing to look.
The Approach
Mobile Gestures
Before finalising my designs I needed to determine if I allotted enough screen space for mobile gestures and the users’ fingers. So annotated the wireframes to indicate the gestures users will need to use to interact with the UI.
For example the mobile gestures on the Android version of the recipe page include:
Tap the back arrow or swipe to go back.
Spread and hold to zoom into recipe image. Let go to return to original size/space.
Scroll to view contest further down the page
The Challenges
User Feedback & Testing
Participants’ main concerns were with the expiry date icons on the Pantry and Recipe pages.
They expressed issue with the expiry date icons:
confusing users
not being accessible
looking similar to material design’s progress indicators
“What info is the circle showing?”
“Love these circles but I am confused as to what info they represent?”
“Personally, it would be really useful to me if the Pantry section with the different food expiry dates was colour coded. I find it a lot easier to visualise
like that than to judge the little bars. I guess a percentage would also work but I would prefer colours.”
Solution
Icons revised with clarity of meaning, accessibility and brand consistency in mind. They are now colour coded, so time indication is a lot clearer. And the circle percentage bigger to be more legible to users with colour blindness.
Before
After
Expired Icon Adjustments
It didn’t make sense for the expired icon to still have “time on the clock” if already expired. So, an exclamation point icon was used instead to help expired food to stand out and inform the user to take action.
The Outcome
High-Fidelity Wireframes
The final product and prototypes.
Profile
A section of the app where users can view their saved recipes, adjust their dietary requirements and, amend their account settings.
Android
iOS
Sign up & onboarding
The onboarding screens increase product learnability, so the user can jump right in.
Recipes
Recipes suggested to users based on their recent purchases, when items are due to expire & previously saved recipes.
Shopping List
Before the shopping list is populated, the user is presented an empty slate screen.
Pantry
The user can be notified when something is due to expire or has expired, to help reduce their food waste. They can also search their pantry to see if they have an item before adding it to the shopping list.
The Take Away
Project Reflection
-
The user testing really helped me to see issues that I had overlooked, and to get my app to a place where I’m a lot more happy with it.
I also think taking my time during the wireframing stage helped me stick to iOS and material guidelines without rushing into styling and prototyping.
-
I think a dashboard/ homepage could improve the app. Somewhere the user would land after logging in, that gives an overview of the whole app.
This could include sections that show one or two suggested recipes, what items are about to expire and shopping list suggestions, all on one screen.
-
Explore what the screens for scanning receipts and vocal list population look like.
Potential to make a version of the app compatible with Smart Fridges.
Thank You for Reading. Let's Connect!
Drop me a message with some details about who you are and what I can do for you, and I'll get back to you soon.