Cibo
UI Design / Mobile App
- Role UI/UX Designer
- Tools Adobe XD, Illustrator
- Team KC Liwanag - UI/UX Designer
Nick Turda - UI/UX Designer
Christine Le - Copy Writer - Timeline 3 months
Project Scope: Food wastes that are sent to landfills decompose and emit methane gas which largely affects the temperature and our climate. Cibo is a fictional food app that helps reduce food waste by keeping track of your groceries and their expiry dates, and providing recipes that are customized to what you have remaining in your pantry.
Empathize
Understanding the problem
A survey was conducted between a group to learn about the struggles with grocery shopping and how people deal with food waste at home led us to the following conclusion:
- People forget what ingredients or produce they still have in their fridge.
- People have random ingredients going to waste because they don’t know how to cook it.
- People forget their grocery list at home.
- People forget about produce’s expiry date.
Possible Solution
- Ingredients tracker: Reminds the user when an item they purchase is about to expire
- Grocery List: Allows the user to list items they want to purchase during their grocery runs.
- Online Fridge: Keeps track of what's in the user's fridge while being away from home.
Who is Cibo for?
This product would appeal to budget-conscious or environmentally conscious cooks. My goal was to empathize and understand the frustrations, goals, and motivations of the app's ideal users through a user persona.
User Flow
After our research and survey, we had listed the features that would be our app’s value propositions. Our user flow was then created to help us visualize the user’s process when using our app was vital.
Design
Our team went straight into design since we already had established what we wanted our app to look like. This deviated from the normal process of creating wireframes before going into the high fidelity mockups, however our team had already established our app’s design guide and we were confident in going straight into the hi-fi mockups.
Onboarding Screens
Our team did some research on the popular apps with the best onboarding user experience and gathered the main features that can better help users to better understand the app. We wanted to focus on reinforcing the value of our app, highlighting the app’s key features, and keeping the sign-up process quick and easy.
Login & Sign up
A simple and seamless login & sign up process. If the password needs to be reset, a code will be sent to the email used to create the account.
Primary Destinations
The bottom navigation bar allows the user to easily navigate through the primary destinations of the app. The 'My Fridge' feature allows the user to keep track of what's in their fridge and add ingredients each time they go grocery shopping.
Adding to Fridge
Adding to the fridge is accessible through the green plus icon in the middle of the bottom navigation. Users can search for ingredients to add in their fridge with details such as 'date of purchase' & 'expiry date'. This is to prevent food from going bad because it is forgotten in the back of the fridge.
What I've learned
The high-fidelity prototype with clickable functions was completed, but it was not tested outside of the classroom. Each time we went through the prototype, something broke, so we had to edit, design, and fix it, which made it harder since we were working on a high-fidelity prototype. As a result, I learned how important wireframes and low-fidelity mockups are. A low-fidelity mockup would've been easier to edit and find the errors in our process than a high-fidelity prototype.
In addition, I would like to see some user testing done to give us feedback on the design and user experience. As it was tested among us, we already knew what the buttons did and how to complete the task.
