Optimizing Interaction on our time tracking tool

There is a saying that you’re your own worst client. While I can see how that can be true for some people, let’s just take moment and think about the benefits here: all of those small (or big) frustrations you have can now be addressed (by yourself, no less!), so you can use your digital product like it’s meant to be used. There is a name for this, too; dogfooding.

Dogfooding can easily expose flaws in your process, but it can also improve it by making obvious which efforts give you the most return. So the benefits of this are twofold; you can solve internal challenges with a digital product, but it’s also an opportunity to work on your process and see the results almost immediately. Talk about putting your money where your mouth is, right?

Defining the Problem

So, we have this internal tool called Vremen.co. It was an internal effort from our development team, created to track time in order to keep project profitability in check and see how accurate our project estimates actually are.

Although it worked pretty good, the tool hasn’t been touched by a designer during its development, so it needed some UX/UI love.

Old version of Vremen.co

We tested the tool, and while some of the bugs could be fixed, there were some non-critical usability issues that slowed users down. For example, I am a big fan of keyboard-only operation, and it bothered me that it was faster to use my mouse to input time tracking than any other way. This is not a big issue, but if you attempt to be very precise on your time inputs while working on many small projects, you’ll get frustrated real quick.

So, the main problem we were solving was the large amount of effort to input a task. This was disruptive to the flow of the work we were usually doing.

Old input form

Analyzing the Current State and Fixing the Flow

Logging time is one of the main actions in Vremen.co, so it made sense to focus most of our attention on optimizing that part of the tool. We analysed the current form to find out what the pain points are, and this is what we got:

10 steps required to input a single task

There were some additional pain points that were slowing down the input: using the “tab” key on keyboard defocused the whole form, which required refocusing with the mouse. Also, there was no keyboard way to focus on a previous field, once again requiring that the user use his mouse.

We realized that by using some small helpers (like autofocusing the next required field) we can speed up the whole interaction and reduce the mental load on the user.

User steps optimized with autofocus

Some of our colleagues preferred mouse operation, but autofocusing the next field will give them some time-saving benefit anyway.

What’s Next?

We properly implemented basic form accessibility so we can use a keyboard to “tab” between various form fields. But since some of them are optional, we thought it would be a nice idea to be able to skip them automatically via keyboard shortcut, to save more time.

To accomplish this, we introduced a dedicated key combination to skip time input and note field so the users can directly create a task, which speeds up the interaction even more.

User steps optimized with autofocus and optional field skipping

It’s Not “Just” a Form

As you might imagine, this becomes a bit complicated for implementation, since forms like this can produce a lot of weird edge cases that need to be handled from a front-end development standpoint.

However, this also means that every good interaction carries a fixed amount of complexity. It is up to us whether that complexity is carried over to the user for him to handle, or we “hide” it by addressing it in the code. This also gives us a chance to make the whole tool usage a delightful experience. 

We also had in mind the users that were quite used to the old version of Vremen.co, meaning we didn’t unnecessarily force them to learn new interactions (such as a keyboard-only operation).

I realize this is not the whole story, and we’ll continue to listen to the feedback we’re getting from users, which will help us optimize Vremen.co further and even come up with new features over time.

That being said, while making these kinds of changes in products, it’s vital to identify places where the changes would make the biggest impact. Not all features in digital products are being used to the same extent, meaning we run the risk of investing a lot of time fixing a rarely used feature.
This is what we’ve done right in case of Vremen.co: we identified the most used functionality and fixed what bothered us about it, improving the tool greatly.

If you like this way of thinking, you can follow me on Dribbble and/or Instagram.

Thanks for reading!