Tiffany Chu Graphic Design Portfolio

UI Design

Cibo

Introduction

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

Empathize

Research

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.

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.

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.

Test Prototype
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.

Reflection

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.