Time Blob

Time Blob is an open source prototype for tracking time.

Concept

I wanted to build a free, flexible, and secure way for people to log their hours. Time tracking is useful for a broad range of people who do contract employment or any sort of hourly billing. It was clear from the outset to make the app accessible to as many folks as possible, I’d want to build a web app that could be used on any device.

The concept revolved around the idea of designing an extremely simple way to start and stop time and an intuitive way to document the work. I put together some concept art for what this could look like.

Research

With a basic concept in hand, I moved to researching the field for other time-tracking solutions. There were several popular applications, but none had the singular simplicity and total user control that I wanted. There were powerful tools that existed, but they are often accompanied by cumbersome user interfaces.

I also took an informal survey of contractors and consultants to discover what tools they were already using and what kind of features they liked and didn’t like in their current time-tracking tools. A common thread seemed to be that every individual had a unique situation with specific requirements making customization highly important.

Plan

To begin planning the project, I first developed an outline of the key components of the project and defined each feature. This laid the groundwork for the entire project. It’s good to be concise and not too granular here — plans that are too detailed end up being wasted. Projects are fluid and are subject to change as more testing confirms or rebuffs each hypothesis.

The next step in my planning process was to put together the app flow and roughly wireframe the layout. This is a crucial step as it lays out what is to be built, but also forces you to problem solve user interactions. This is the perfect point for bringing in user stories and seeing how much fuss it takes to complete each important action. If there is too much finagling, can the task be completed in a simpler way?

Implement

It was time to put together a very rough prototype. With HTML, CSS, and JQuery, I rapidly built the three components that users would be interacting with the most. I did not build any database or back end. This first prototype was to show the basic interactions of adding entries, starting and stopping time, and viewing and editing entries.

Test

With a basic prototype in hand, it was time to get it in front of people and start testing. I observed people interacting with minimal instruction. The important part about user observation is to resist the urge to tell people what to do. The insights gained by simply watching a user struggle through a task is the whole crux of it. Their pain becomes your pain, and that empathetic struggle directs you towards a better solution.

The key feedback I received is that my main assumption of user workflow was backwards for many people. I assumed people would want to start their time and then enter what they were working on, but many people wanted to state what they were working on before starting the time. In hindsight, this is obvious; but without testing, I would have kept on building the product in a counterintuitive way. It was also clear that some people would prefer to set up their entire project before diving into their time tracking. This insight would have been lost on me as well, as I was fixated on the idea that starting/stopping time was the first and most important action.

Other valuable feedback was directed at handheld devices. Although desktop users could quickly type in entries, the number of steps it took mobile users to input data was excessive. I needed to make data entry equally fast and intuitive on all devices. Creating a quick-swap feature would go a long way towards minimizing the amount of typing for mobile users. Also keeping important interactions on the bottom half of the screen would be really helpful for those with bigger phones or smaller hands.

Repeat

I went back and reworked my app flow to incorporate a project setup feature, a new respect for user flow, and a quick-swap feature.

With the backend starting to come together the project migrated to AngularJS. I did some reworking of my old code to accomodate for Angular. I then built the front end of the new features and made all the adjustments from my new user flow.

Conclusion

The Time Blob prototype is shaping up to be a great tool for tracking time, but the process of product design is cyclical. Moving forward, my next steps will be once again diving into another round of user testing. I will be looking at how well these new features and flows have improved the UX, and I will also be doing a deeper study into the onboarding process to see if there are any other areas for improvement.

Posted June 2, 2017