categories: coding, UX, UI, data visualization
tools: p5.js, Logic Pro
collaborator: Zhe Wang
Hotpot.js is an interface that visualize emotion through food and flavor. Users can check-in their feeling at the moment and read the emotion of people who checked-in before. We imagined this project to be installed at ITP, for example, near the elevator or in the hallway, so people passing can quickly interact with it and see how others on the floor are feeling. Through this project, we hope to visualize emotion in a playful way and build a sense of community.
There are 12 buttons that have an emotion word on it, such as, anxious, yay, or meow. Users can touch a button that matches their current feeling. Then, a corresponding ingredient relate to that emotion will drop into the hot pot. There are six ingredients, such as hippy green onion, dancing chicken, and sexy apple. The number of ingredients cumulate at the bottom of the interface, which shows the current flavor/recipe of the hotpot.
To play hotpot.js: https://email@example.com/full/is6S2K_X0
To view the original code: https://firstname.lastname@example.org/sketches/is6S2K_X0
Our interest was to make a data visualization interface about human emotion. When we researched about this topic, we found that many emotion data visualization project produces abstract, beautiful, and minimal graphics (like the picture shown on the right).
We felt that these visualization results are too technical. The graphics felt too cold to allow us to relate these pictures with human emotion. These charts could be used to visualize other categories of data. From a glance of these pictures, we felt that we cannot quickly extract an overall understanding of the emotion data these interfaces present.
Our research inspired us to create an emotion data visualization interface that
has a sense of humor
is easily comprehensible
relates to user’s daily life.
What is emotion related to? We thought about food. Food can trigger feelings. For example, the smell of fresh fruit makes us feel refreshing. Cutting onions could make us cry. Can we use food to represent emotion? Through food, we hope to introduce another dimension of sense, taste, into this interactive experience.
Based on our playtest with about 20 users, we noticed the following problems:
user does not know where to start
the relationship between emotion and food is vague
the hotpot soup flavor title does not quite make sense
user may not see a change in hotpot flavor after selecting emotion tag
We adjusted our UI design from right left to top down. We figured that people are used to read from top to bottom, and that would help indicate the user flow.
We limited number our emotion tags to 13 buttons.
We corresponded two to three emotions with a food item, and we tried to match emotion and food that most people feel more connected during playtest.
We changed food names to be more interesting and emotion related. For example, dancing chicken and hippy green onion.
Rather than using the top 2 ingredients as hotpot flavor of the day, we curated a recipe showing all food ingredients .
We recorded funny sound to make the cooking experience more fun