Adaptive System Study


The Ask


Food at first come into our eyes at grocery stores. This is the moment when the intersection between their life and our life begin. We choose what to buy at the stores, then stock them in the fridge until we decide to make it into a dish and put it on the table. As time goes by, some of the food are eaten quickly, some stay in the house for a long time, some new ones are brought in just once while some old faces come back frequently, therefore the relationship is constantly refreshing itself.


Is there a way, an interface, that can reflect and manage this human-and-food relationship in real time?


Grocery, storage and meals are three isolated moments when this intersection comes to the surface, getting people's attentions. The interface should not only connect these moments but also make the whole intersection an integrated, visible and manageable experience.




The first challenge is to record food in physical world into the virtual interface. There must be a very simple way to do it. Remember when we do the check-out in grocery stores, items get scanned? If the interface is connected to the check-out system, we can directly get information into the interface.


ORGANIZing food in the interface

Traditional list indicates there are priorities among items, so it is not perfect for showcasing the food we have. I tired using rectangles, hexagons, triangles as modular units for the layout. Eventually equilateral triangle got picked because of the diversity of shapes it can form.

In order to avoid the feeling of chaos on the interface and be consistent with the balance diet idea, I introduced order inspired by the concept of food pyramid. When you click one of the module, you will go into a full screen mode of the basic information of the food. 


Final Visual of the Food Interface

This is the view for food you currently have.






How could the interface notice the changes of food we have throughout time?

I introduced a new feature to allow the system to give recipe suggestion based on the food we have. To ensure that the notification is pushed to the user at the right moment, I set up three conditions in order to for the system to trigger the notification:

Receive a notification when:

  • It is meal time.
  • At home.
  • No appointment in calendar.

Tap on a dish to enter the interface from the notification. User can see the ingredients for this recipe are selected(darken). If user wants to see other recipes for the same selected ingredients, s/he can tap on other highlighted ingredients.

Teriyaki Salmon Recipe copy.png


When user decided to go with a recipe after viewing the details, s/he can confirm it. The system will later remind the user if some of the dishes and ingredients are left over or not.

Through this way, the system can get updates about the changes on the amount of a specific food, and what is still remaining in the fridge.


Interface Changes Throughout Time


Using saturation to represent the expiring process of the food. Image on the left shows food in the fridge is reducing and some of them are slowing expiring:


Introducing Time Line

I marked down my grocery records from March in Microsoft Excel: When did I do grocery? what did I buy? How much(in terms of weight) did I get for each item? Then I apply this real data to the interface.


In the past

          Now in Fridge

Future: Shopping List





Colors here represent five categories of food. By going over the history view of the interface, we can see the percentages of these categories in a specific time range. Also get a summary view by swiping from the left edge.


Bring Out Shopping List


When You Finish The Salmon You Love...


What would you do when you just finished a piece of delicious salmon for dinner and decided to get some next time when you do grocery again?

From the notification, user can directly identify the salmon as finished and it will appear in the history view. If the notification is ignored for some reason, user can always go into the interface later and mark it as consumed.


When You Are In The Grocery Store...

Only the items on sale or in the shopping list would have pictures appear in its location, with dynamic sale or favorite icons sliding in & out. Otherwise the floor plan just shows color modules, telling the user general locations of all the categories.