Fridgeventory

Client

Conceptual

Deliverables

Mobile app mockups
Graphics

Year

2021

I was approached by a team of National University of Singapore (NUS) students to come up with a design for a project idea of theirs. The app was designed to allow families keep track of their groceries stored in the refrigerator. The app would also remind them to use their items as the expiry date nears, so as to combat food wastage.

Material-Theme-Light-1

The original designs for the app were created using Google’s initial material design guidelines from 2014.

At Google I/O 2018, Google Design unveiled the Material Theme Editor, a Sketch-exclusive plugin which gave designers and developers access to an extensive library of components that could be easily edited and customized while designing their apps. Excited to use this new plugin and test out the components introduced with this release, I redesigned the entire app on Sketch to make it look cleaner and easier to use.

Frame-2-1 Frame-3-1
Frame-4 Frame-5
Frame-8 Frame-9
Frame-6 Frame-7

Icon explorations

icon-variations
MY-Light MY-Dark

In 2021, with the introduction of Material You, I decided to revisit this project and redesign parts of the UI. Google also decided to retire the Material Theme Editor and switch design support from Sketch to Figma.

Using Google’s new Material Design Builder plugin with support for Material You, and extensive community libraries, I was able to redesign the app to make it fit in with Android 12ʼs new design system.

Frame-3
Webp.net-gifmaker

The introduction of ground-up refreshed widgets in Android 12 also inspired me to create new widgets for the app. Having compact information about grocery inventories right on the homescreen would provide easy access for keeping track of items. The widgets also beautify the homescreen while the new Material You design makes it feel personal.

MY-Widgets

The upcoming Android 12L will also introduce support for larger screens with a more adaptive layout for apps. I decided to mockup what the app would look like on a tablet and experiment how elements would be reordered to fit the larger screen.

Tablet-Light3
Tablet-Dark-2

While reworking on the design of the new Android app, I decided to also try out a iOS version, crafted to fit in with Apple's Human Interface Guidlines.

iOS-Light iOS-Dark