Harnessing Pixels for Enhanced Motivation in FocusPasta
Written on
Understanding Motivation Through Visualization
Imagine you're at a bustling party, and as midnight approaches, the energy is palpable. Amid the fun, you notice a girl engrossed in her phone, typing fervently. Intrigued, you approach her and ask, "Are you preparing for a coding interview?"
Without looking up, she replies, "No, I'm maintaining my 9-month streak on LeetCode. I can’t afford a blank square!"
This exchange might seem odd, but if you're a developer, you're likely familiar with those small green squares on platforms like GitHub and LeetCode. These visual metrics transform daily efforts into a tangible record, and for many, including myself, they serve as a powerful source of accountability and motivation.
The Motivation Behind FocusPasta
While tracking coding activities is straightforward, I found it challenging to monitor my other productivity efforts. Existing productivity applications lacked a comprehensive yearly overview, leading to a fragmented data experience. To address this gap, I developed FocusPasta, a focus timer app that allows users to visualize their productivity trends over the year, with varying opacities indicating the total time spent on different activities.
Insights from FocusPasta's Yearly Tracker
The Yearly Tracker in FocusPasta has unveiled intriguing patterns in my life. For instance, I discovered that my gym attendance drops when I'm deeply focused on work, and I tend to write more during weekends. These insights have proven invaluable in understanding my habits.
Designing with Intention
Despite its minimalistic appearance, FocusPasta's yearly tracker underwent significant iterations before arriving at its current form. Initially, I attempted to integrate more data and statistics, only to realize that simplifying the design was far more challenging than adding features. In this section, I will delve into the design process, highlighting key considerations, exploring various iterations, and discussing the features that didn’t make the final cut.
Addressing Data Gaps
One of the primary challenges was distinguishing between past days with no data and future days. I needed a clear method to indicate our current position within the year. Here are some strategies I explored:
Using a Rolling Window
Platforms like GitHub and LeetCode utilize a rolling window that displays data from the past year. While effective for them, this method didn't suit FocusPasta, which aims to provide an annual overview.
Displaying Empty Data
Anki’s method of showing empty data for future days seemed promising. It visually marks the passage of time, enhancing satisfaction. However, this approach didn’t translate well to FocusPasta, leading to awkward alignments and excessive empty space.
Adding a Background
I experimented with adding a background to the charts, inspired by Anki. However, this cluttered the design, breaking the seamless flow I aimed for.
Reducing Opacity
I then tried lowering the opacity for future dates. This method offered a visually appealing distinction between past and future data while maintaining balance on the screen.
Highlighting the Current Week
To emphasize the current week, I added a line matching the category color, subtly guiding users through the year’s timeline without overwhelming the design.
Finalizing the Design Approach
After evaluating various strategies, I found the optimal solution was combining reduced opacity with a subtle highlighting line, effectively showcasing the current week while preserving harmony in the design.
Selecting Relevant Statistics
Another critical consideration was determining which statistics to display on the yearly habit tracker. Initially overwhelmed by the data, I realized that the page's primary goal was to provide an overview of habits and trends rather than detailed statistics. This led to the decision to create a separate page for more granular category statistics, allowing users to delve deeper into their habits.
Conclusion and Future Directions
This design journey has been an enlightening exercise in self-control. My initial instinct to include every conceivable statistic was counterproductive; it risked cluttering the interface and detracting from its primary purpose. Moving forward, I aim to prioritize meaningful features over mere quantity, focusing on what genuinely adds value.
As I continue to refine FocusPasta, I welcome feedback from fellow designers to enhance the user experience further. This exploration of design decision-making has equipped me with deeper insights, transforming my process into a more intentional practice. Thank you for your understanding as I articulate these reflections.