SONI HAHN
Soni Hahn is a multidisciplinary UX designer based in New York
drink.jpg

Self-tracking Application

MY DRINKS DIARY

UX/UI Design and Web Development | 2015

 

My Drinks Diary is  self-tracking application. I've been struggling with purpose of the app, however, I just decided to get started with visualizing dataset at first and develop this sort of "dashboard" as a tool that I can see the trends, relationship between elements and my preference, etc. 

I began to design dashboard with the dataset which I had tracked from August to October. Ultimately it will be connected to the app that I can easily track or save drinks diary on mobile rather than saving the data as a JSON file.

- View live demo here

 

1. BRAINSTORMING / ROUGH SKETCHES

Elements

  • Date
  • Type of drinks - Beer / Cocktail / Whiskey / Tequila / ....
  • Location
  • People I drink with
  • Time spen
    • Total / Average per day 
  • Dollars spent
    • Total / Average per day 
  • Inebriation - None / Good / Tipsy / Bad / Binge

 

2. WIREFRAME V.1

 

3. PROTOTYPE V.1

Front-end development

 

4. PROTOTYPE V.2 (IMPLEMENTING FUNCTIONS)

Work flow

  • Create a JSON file
  • Render my JSON onto a webpage
  • Create a cohesive Web page utilizing a combination of regular HTML/CSS/JS, 3rd party Javascript libraries (Chart.js and Heatmap.js) 

 

5. NEXT GENERATION PROTOTYPE V.3

 

I ended up with making a dashboard which can easily check the information about my drinking history.  I've collected the dataset since early august and kept adding it to my json data. 

At first, I made the overview section that I can check out how much money and time I spent over the last 2 month and the average spent per day. This part is to alert myself about spending lots of money and time for drinking. 

Also, I was curious about the most common drink I had, I added 'My favorite drink' so that I can see the trend of what I had. I had a technical difficulty to get the right data from the json file. I sorted all the brand name of drinks and count them by matching duplicates.

 

I used the Heatmap JS from D3.js to visualize the value of drunkenness day by day. The more I got drunk, the more color gets dark. You can see the pattern of my drinks on the daily map that I usually got drunk around weekends. And the pie chart from Chart JS is for visualizing the ratio of drunkenness over the period. 

Once you hover over each day unit, all the information about that day is shown at the bottom of the map.

 

I added a map which shows the specific locations I went to drink. It shows more solid color based on the frequency of visiting a place. This is the early version of map visualization.

While developing this dashboard, I'm going to build mobile tracking site as well which allows me to track all the information above more easy and send the data to the dashboard right away so that I don't have to add data in the json file manually.