UI Design
Cibo
Process
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.
Role: UI/UX designer
Softwaare: Photoshop, Illustrator, InDesign
Team Members: KC Liwanag, Nick Turda, Christine Le
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:
From this survey, we were to gather our user’s pain points that our app can solve. During this project, we were also tasked to keep the user’s onboarding experience in mind especially with an app that is not common to most users.
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.
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.
Test PrototypeOur 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.
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.
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 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.
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.
I think we had a lot of fun working on this project, and it was a useful way to strengthen our design skills. I enjoyed creating the app's branding and design, especially finding a name and creating the logo.
