Tracking Coffee Intake and Temperature
Prototyping a "Smart Mug"

Creating the ideal coffee mug experience

Project Brief
Ahh, that morning cup of coffee - a crucial component of a successful morning for most! The goal of this two week project was to prototype a "smart coffee mug". Our goal was to design and create a coffee mug that would enable coffee drinkers to track how much coffee they drink and let them know when the temperature is just right. In order to reach a functional prototype that could be used to establish the functionality and interaction design of our mug, we conducted several phases of rapid prototyping and testing.
Date: Winter 2015
Role: UI/UX Prototyper
Course: Prototyping
Collaborator: Taysser Gherfal
Project Timeline
Our initial brainstorming efforts addressed the question:
What features/characteristics would make the ideal coffee mug?

Through this brainstorming, we identified the following as the core target functionality for our prototype and began sketching initial design concepts:
  • sense temperature
  • report temperature clearly
  • notify when temperature is OK to drink
  • allow calibration of temperature and intake preferences
Paper Prototyping
In order to receieve feedback on our initial concepts, we created paper prototypes. The main goal of this phase was to inform our design across two axes: Simple v. Detailed and Analog v. Digital.

Simple v. Detailed
This tradeoff would address the number of features and the level of detail of the information presented to the user. For example, a detailed mug might report the exact temperature of the coffee in degrees, whereas a simple mug might map temperature ranges to colors (red = too hot, green = OK, blue = too cold).

Analog v. Digital
Addresses the look and feel of the coffee mug, and impacts how information would be conveyed. Analog options would use literal measurements and physical controls while digital options would use LEDs, digital controls, and might be paired with a mobile app.

Through evaluations with users (family, friends, and classmates), we discovered that most people liked aspects of various tradeoffs, but tended to like designs with simple interfaces and feature sets the most. The main takeaways were:

like a window to see how much liquid is in the container, it is very simple.
like using the 3 colors to communicate temperature rather than seeing the specific degrees.
like the vertical display to communicate liquid level, it's more intuitive than a circle if it is communicating how much is actually in the mug.
Dislike too many measurement readings, makes it feel too scientific.
Dislike having to interact with a mobile app, even if it is only used to set up the mug preferences.
Paper Prototyping Round 2
We conducted a brief second round of paper prototyping after making changes to reflect feedback from the first round. The main changes included moving the display to the side of the mug and including preference settings on the bottom of the mug.
User Interface Design
Once we established a concrete design direction, I created an interactive interface we could use to test various interaction types with processing (a visual programming language similar to java).

By connecting my interface prototype with an arduino, we were able to create a “wizard of oz prototype”. Input from pontentiometers mimicked temperature, current coffee amount, and daily intake. This setup allowed us to physically control the visualization, and walk users through a specific use-case. The processing interface featured a working power button, setting switches, and variable color to communicate temperature. We used this to test different interfaces with users, and get feedback about the usability of various designs.

We were able to learn a huge amount from this interface design phase. The main takeaways were:

Scale complexity: Users were often confused by the two measurement scales combined into a single visualization. They often didn’t know which scale the visualization was referring to.

Intake switch: Users often didn’t make the connection that the switch at the bottom of the scale was used to toggle between the left and right scales. And even when they did, many did not want to have to toggle between them.

Settings: Users generally liked the single button input rather than dual knobs. We noticed that setting the maximum drinking temperature was most important to people, and users were less concerned with setting a minimum temperature (although some mentioned this would be nice). Overall, users did not like having the settings on the bottom of the mug. While this is a better option than having to use a mobile app, they didn’t want to have to lift the cup (filled with hot coffee) over their head to change settings.

After this testing, we re-sketched the basic user interface, which included changes to address all of this feedback:
-Clear plastic window on side shows current coffee level
-Digital display on top shows daily consumption
-Button on top used for power and calibrating settings

Testing setup used to walk through hypothetical use-cases and test the usability of various interfaces.

Paper Prototyping Round 3
This round of paper prototyping focused on creating a simple yet intuitive interaction to perform all of the functionality using a single button. We tested three distinct interaction sets with users. Feedback from this testing helped us to generate a simple and intuitive interaction:

On: Tap Once
Off: Tap Once
Enter Calibration Mode: Press + Hold (3 secs)
     Toggle: Tap to switch between too hot and too cold
Exit Calibration Mode (save): Press + Hold (3 secs)

This interaction set was thought to be optimal because users wanted a calibration mode to reduce accidental input, and press and hold was intuitive for this action. Furthermore, users liked that they could toggle between too hot and too cold, and the toggling colors removed the need to memorize different inputs for them.
Physical Prototyping
In order to simplify the building process and create something that would allow us to evaluate the prototype effectively, we created two physical pieces to demonstrate different parts of the functionality:

The "Guts”: This piece demonstrates the functionality of the interior of the mug. This piece holds the liquid and includes the level and temperature sensors. It communicates with an external arduino, which sends the data to the external piece.

The Exterior: This piece demonstrates how a user would interact with the product. Receives data from the guts and visualizes the information with LEDs. Includes a functional push button to allow the user to interact with the mug.

The "Guts"


Final Testing Setup
Video Demo
3D Modeling
Since the timeline of this project was very limited (2 weeks), our prototype was only meant to allow testing of various information visualizations and interaction types. Therefore, the next step in developing this product further would be to design the physical form and specifications of our smart mug. I created these 3D models as a way of exploring what the physical form might look like.

Since all of the functionality and input associated with our smart mug design is housed within the cap, we imagine that the final product would likely be a “smart lid”, which could come in various diameters to match the majority of standard mug sizes. This would lower the cost of manufacturing, and would allow users to use our lid with their favorite mugs.

back to projects