top of page
Top of Page


Your Ultimate Caffeine Tracker

Deliverables: A full cycle from user research, design prototypes, to development of a minimally viable mobile application (React Native)
Duration: 6 Weeks
When: Dec 2019
Context 01

01. Social Context


Large Audience

For this project, I’m focusing on coffee drinkers, to be more specific, people who consume caffeine frequently on a daily basis. Considering coffee culture being a mainstream nowadays, this project will work to provide service for a large community.

Lack of Guidance

One common problem shared among the coffee drinkers is that they keep track of their caffeine intake by counting the cups of coffee they consume daily instead of the actual number of caffeine intake. This results in flaw calculation because depending on the types of coffee, the amount of caffeine various distinctly. 

Overconsumption Is Easy

Overconsumption of caffeine is fairly easy to achieve than most people think. Although how much caffeine a person can consume on a healthy level depends on the age, weight, etc., for average, 400mg caffeine is the limit for most healthy adults, that’s two cups of Starbucks’ grande americano.

Consequence Is Severe

The side effects relating to overconsumption of caffeine can various from sleepless to heart attack, depending on people’s physical sensitivity      to caffeine.

Design Problem 02

02. Design Problem

Users who frequently consume caffeine need to have guidance on how to control the amount of consumption because overconsumption can easily make people experience levels of body discomfort or even endangered their lives.

Persona 03

03. Persona

Solutions 04

04. Solutions


How might we make people conscious of how much caffeine they are consuming and keep track of the amount to their personal limit?


Right now, there are a few online caffeine calculators that allow users to input their general descriptions of the coffee they consumed for the quick lookup. There are also apps (mostly for Android users) existing to keep track of the total amount of caffeine consumption on a daily basis. But they all limit themselves to one feature.


Tracking caffeine consumption can be a new habit to develop for most of the users. There should be multiple tools to assist them with that. An app or website needs to be created considering multiple functions. The app, Cacha, will initiate features that focus on four major intentions:

  • to educate the users before they consume caffeine

  • to help them keep track of their consumption

  • to adjust the caffeine consumption based on body comfort

  • to overview their daily status at one glance

Design Philosophy 05

05. Design Philosophy


My role as a designer is to think on the user’s end as much as possible. My design philosophy is to discover what the user needs, what they don’t need and satisfy the need to the user’s ease, getting rid of the ones that hinder the user flow. I went through the user’s daily routine and find out the easiest way to fit this habit into their life. I take responsibility to organize a robust database so that the user won’t need to take extra steps. I do think keeping track of caffeine consumption is a crucial habit to have. In order to encourage the user to take good care of their body, we, as designers need to take the first step. By implementing the daily education feature into the app, I also intend to advocate for the coffee vendors to take part in this process as well. The coffee vendors are already labeling their drinks with the number of calories. The amount of caffeine is no less important than calories in the effects on human bodies. 


Eight Solutions Supported by Competitive Analysis and Design Philosophy


Storyboard Developed Based on the Eight Solutions


Analysis on Major Features

QOC Diagram.png

Based on the analysis in the QOC diagram above, I would apply a mix of these choices. Although the procedures in each approach make sense to connect with each other, some of the decisions are better than the others that have the same goal. For instance, for the login process, creating an account with the user’s favorite social media platform can make it accessible in the various platforms, at the same time, giving the app a sense of community. For the logging process, using a voice input requires a lot less effort from the user. But the typing in one single form field can be the second-best interface because not all the mobiles have a voice detection system. For the purpose of accessing the past logging history, I think the avatar solution outscores the others because not only it provides a clear view at first glance, it also leaves a deep impression. As for the notification system, I think informing the user beforehand is better than alerting after the user reached the limit.

Prototypes 06

06. Prototypes


A low-fidelity prototyping in the early stages of design, focusing on the tasks and interactions with the users.


With mid-fidelity and high-fidelity prototype placed side-by-side, some of the major design process and changes are showcased. 

01 To Sign In/Sign Up

Based on the QOC analysis I did, I acknowledge that allowing the user to sign in with their favorite social media platform is the best way to both ensure accessibility through different platforms and less effort from the user. But an option to sign up solely with the app is also provided.


02 To Overview Daily Status at One Glance

I was inspired a lot by the overview screen of the app WaterMinder. A body figure is simple in indicating the status of the body, especially if there’s a goal/limit the user is trying to work towards. Instead of using the calm blue color to fill the human figure (avatar), like what WaterMinder did. I used the color red. Because my users are not working towards a goal, they are rather reaching limit. The red color will serve as a warning sign.


03 To Keep Track of Daily Consumption

Here, I provided two options for the users: to log through the system, to log through Siri. For the first option, the “+” button will lead the user to the log screen (can also use the “log” button in the menu bar at the bottom to land on the same screen). This option is for the users who are using the app. By simply typing in the keywords, the user is able to choose from the suggested options. If the user couldn’t find the specific drink on their mind, they can add their own drinks. 


Another option to log the caffeine drink is to work with Siri (or any other voice recognization system, like Google, etc.) The input is also keyword based. The user simply speaks to Siri on the drinks they just ordered and Siri will record that to the app.


At the point when I was doing initial brainstorming, I was leaning towards a more conventional way of asking the user to enter information about the drinks, which is to enter data in different form fields. But later, I was inspired by Dan Brown’s context scenario. It made me rethink the approach from the point of a potential user’s daily routine. I imagined myself as a regular coffee drinker on my way to get a cup of coffee. With one of my hands occupied by the coffee drink, only one hand is left for the user to interact with the system, for the user who has a bigger phone screen, clicking into each form field and choosing from the options with one hand is too much to ask. I came up with the idea to use voice recognization by keywords, working with the built-in system like Siri. The user is able to speak to the phone just like they are ordering a cup of coffee. They can also do that on the go, which is a major characteristic that I discovered about my potential user.


04 To Educate User Before Consumption

A great feature of this app is that it will send a notification every day in the morning with a quick fact message about caffeine. This is aiming to educate the users even before they consume the caffeine. When the user click on the read more button, it will open a website in user’s default browser. The same message will appear on the top to ensure the users that they are at the right place. After the users read through the article, a button will appear at the bottom, giving them a quick option to open the app.

Notification Morning.png

05 To Adjust Daily Limit

Every day at night, a notification will remind the user to do a daily evaluation. This is especially useful for new users. The system will record the user’s evaluation of body comfort and change the daily limit based on that.


The idea is to test the feasibility of the major features through creating a minimally viable product using react native and firebase as the backend data support. Below is a video demo of the outcome.

bottom of page