Huuue Website

Completed: 2014
Huuue is a tool that arose out of a need to be able to compare my emotions long term. Instead of a list of numbers (which was hard to compare day to day, much less week to week) I needed something more visual, something that anyone could understand on a basic level just by looking at it. Inspired by the zeroapril personal tracking site, I originally set out to develop a tool for my personal use, but then slowly realized that this could be benificial to others as well.

Huuue is a visual way to keep track of emotions and coping skills. Based off of DBT (Dialectical Behavioral Therapy), Huuue has users assign a color to their day, and add ratings (1-10) for different emotions, if they used any coping skills those are recorded as well. The user has the ability to compare day by day and week by week their progress, as well as learn new coping techniques. Designed and developed by myself. Written in PHP/MySQL.



Features:
Login/account creation
Profile picture upload
Ability to change password/avatar
Logs daily entries
Compare day to day & week to week
Skill review
Mobile optimized

To show all this daily information I sketched out numerous ways to display it. Vertical bars, horizontal bars, where would the date go? How would this design work for daily use and for weekly comparison? Each bar represents an emotion and it's length is determined by the value entered from the user. The value is turned into a percentage and adjusted the width of the bar accordingly. These widths scale down proportionally when the user is comparing week to week.

Once I got the general idea of how I wanted the days to be displayed, I stared exploring data entry. I was focused on sliding bars because it's quicker than entering numbers, and it was useful for mobile as well. I got to the point where the sliding bar could pass it's number value (1-10) to the database to store. I also used RGB sliders for the user to choose a color for the day. The RGB slider converted to a hex number, which was saved to the database, and if the hex number was dark enough or light enough the date/day color for the copy would be adjusted between white or black. Cool right?!

I really dove into the best possible way to get the user to enter a lot of information daily without it becoming a chore. A lot of code was automating things in the backend to relieve the user from entering in extra data. RGB to hex values, the amount a slider was slid converts to a percentage, the color of the description text, plus the date and day of the week.

Similar Projects