From bullet journal to habit tracker app

The concept

I've always loved using a bullet journal to track my habits. This could be how many steps have i gotten in a day or how often do I eat junk food. This thought about making a webapp for this has been with me a long time. I sat down one weekend and started creating concepts.

colorful concepts

My Role

As Lead Designer and Developer, here's what I did:

Process

Concept Development

The project began with a simple idea: represent a bullet journal in digital space that still had a cozy feel.

I created wireframes showing different states of the habit tracker. These early concepts established the core visual language - using checkboxes, emoji and other basic UI components.

wireframes V1

wireframeV2

Iterative design

Working with the concept of keeping data local, I explored using JSON to store data locally. I also experimented with various design concepts

  1. The first design I based on the latest Brutalist trend in web design
  2. Basic executable prototype
  3. Bullet journal aesthetic.

As I refined each concept, I continuously tested with to gauge readability and intuitiveness, resulting in improved iterations.

Brutalist

wireframeV2

Challenges & Solutions

Readability vs. Aesthetics

Finding the right balance between visual appeal and practical usability was difficult. Early designs were beautiful but hard to read.

My solution was to go back to the source and limit functionality

Saving local files

Biggest challenge was data retention, early versions would lose retention and need to have cache flushed often

The final version needed the weather removed as it proved too much for my simple proof of concept

final version

Results

The final habit tracker leveraged an elegant handwritten style font as well as custom styled css (highlighter buttons) and my favorite a dotted grid background to represent a journal.

Key achievements included:

‹‹ previous experiment next experiment ››