"Life is too short to be ignorant of good food. You should eat what your heart truly wants!" 

Gourmet's Diary

Personal Project | May 2017

Mobile Development | UX Design

Tools: clmtrackr, HTML, CSS, JavaScript, and Cordova plugin

 

 

 

Synopsis

Gourmet's Diary is an app which lets users, specifically gourmets, to store and organize photos of food, and connect with other gourmets. Also, the app recommends the users what to eat based on their unconscious happy face when looking at the photos of the food of the day (Today's Gourmet). As soon as the users click "Let's Eat!" button and enter the app, it instantly turns on the camera of their mobile phone and starts face tracking, while showing 9 selected photos of today's gourmet for 2 seconds.  At the end, the users get to see the photo of their highest "happy" scored food. When they click the photo, it shows the detailed information about the food, recommending them to check out that restaurant. If they click the photo of the food again, it shows a map to the restaurant.

Gourmet's Diary_design.png
 
 
 

Technology

For face tracking, I used clmtrackr, which is a javascript library for fitting facial models to faces in videos or images. I specifically track facial expressions and emotions to analyze users' unconscious happy face when they see the photos of food in order to figure out what their brain tells which food they truly want. clmtrackr tracks a face and outputs the coordinate positions of the face model as an array, following the numbering of the model below:

facemodel_numbering_new.png

With some generic face models pre-trained on the MUCT database, clmtrackr tells which array of positions of the tracked facial features is happy. Also, it analyzes the degree of happiness. Gourmet's Diary stores the highest score of happiness for each 2-second of the users looking at 9 different foods of Today's Gourmet. I compared the scores between different foods and showed the highest "happy" ranked picture of the food at the end, saying "This is your favorite food!".

Below are details of the pages with face tracking features

 

Today's Gourmet -- 1. Story :

When I enter the app, face tracking starts to analyze my unconscious happy face when I am staring at food pictures. It shows 9 photos of today's gourmet (today's top rated foods) in a row like Instagram's story feature. I can see my face coordinate points on the upper left side of the app as a reference, which are captured and turned into a dataset to analyze my emotions. 

Today's Gourmet -- 2. Favorite Food :

This is my favorite food, Tim Ho Wan dimsum, which scored the highest happy points! That means when I was staring at this picture I was smiling the most unconsciously. Like this example, the app shows my favorite food with a beep sound, telling me that this is the food that I might want to check out.

Today's Gourmet -- 3. Information :

When I click the food picture, the app shows me the map of the restaurant, Tim Ho Wan, to guide me, along with all the detailed information about the restaurant including the 3 hashtags, in this case: #dimsum #chinese #newyork. 

If I click on the restaurant on the map, it starts guiding me from my location. 

 

 

UI Design

Logo + Hex Color : simple and playful

 

User Flow V.1 : without face tracking

gourmetUX2.png

 

User Flow V.2 : with face tracking 

My ♥ Favorite : 

This page is where I can see all of my favorited photos of food both from my own and from others' feed. I can filter out 3 hashtags: #what? #what kind? #where?. Here I am typing #icecream #dessert #newyork to get some sweet icecream after my dinner in new york, and I want to pick one from my previous savings, so I am in 'My ♥ Favorite' feed.

gourmetfeed_blackish.png

A post in My ♥ Favorite feed : 

This is one post selected from filtered 'My ♥ Favorite' page: #icecream #dessert #newyork. I've been to Pop bar last month and it was so yum, so I want to go back and check out with my friends tonight!