General

Toggl Design & UI Evolution Through The Years

Liisa's mock-up. Old Toggl reports interface
I was going through some old files in my computer and found this beautiful thing.

I know, it hurts my eyes as well! The sad thing is, I created this – the red arrows, lines and text, all gracefully put together in Paint. And when I did, I thought I’d done a really good job…

I’m so grateful that Krister and Alari didn’t let me put it up in the Toggl Knowledge Base at the time 🙂 I would like to think I’ve come a long way since then…

Growing up

I joined Toggl 3 years ago, almost to the day, in March 2011. I had recently completed my BA studies in humanities and done a stretch of voluntary work in South-East Asia. I was as far from computers, programming and software as any 21st century person can be. I thought I was pretty good at handling MS Word, I could do crazy big tables in MS Excel (but no macros!) and I could pull off a half-decent PowerPoint presentation when asked. Joining Toggl opened up a whole new world for me, though, a world that at the time I had no idea even existed. I knew there were “people who knew stuff about computers”, but things like usability, incremental launch, beta testing – they did not exist in my vocabulary.

So three years. I’ve learnt a lot since then, grown up with the growth and development of Toggl. Michail Gorbachev said this about politics, but I’m sure everyone agrees that it applies to all life, especially to the fast-evolving IT sector: “If you don’t move forward, sooner or later you start moving backward”. From the above image, it’s clear that Toggl has moved forward in the three years that I’ve been here, but exactly how much and in what direction? I’ll illustrate some of what I’ve seen here over the years.

Public web

Back in the starting days in 2007, Toggl web looked like this:

Toggl landing page, back in 2007, design.

The Toggl that I got to know when I first joined in 2011 was a whole lot different:

Toggl public web in 2010

But as everyone knows, this is Toggl today:

Toggl timer public web in 2013

None of this was accidental and none of it came easy, but it was fascinating for me to be in the process of this and learn about the importance of landing pages and what and how should be displayed there. I look at the whole web completely differently (meaning much more critically :P) now than I did three years ago. Less is definitely more and I think Toggl’s landing pages through time illustrate this perfectly.

Reports

You should see what was going on when you were logged in, though, and wanted to analyse your time tracking data!

The report you’ve seen already, from 2011, without the display of my fantastic tutorial-creating skills of the time:

Flash-back. 2011 Toggl reports page UI

In 2012, I found it bizarre that our developers were re-doing the whole reports area. It seemed to work perfectly fine, I thought. What was the point in spending all this time and energy, moving all the summaries from left to right (exactly what Facebook’s doing at the moment actually!)? Of course, what came out in the end did look pretty neat, really:

Flash-back. Old Toggl Reports design, UI.

When I look at Toggl reports today, though, I am so grateful that I didn’t share my thoughts on the changes back then, because now we’re really getting somewhere! Toggl in 2014 has been totally renewed:

Flas-back. New Toggl Reports UI. 2014

Desktop (and Mobile) apps

The designs for the desktop and mobile apps have been very similar through time, so I’ve just looked up some of the old desktop images.

In 2011, there were actually two, a ‘nano’ and a ‘classic’ desktop app, both native to the OS they were used on. Here’s an image of the nano app on Windows:

Flash-back. Old version of Toggl Desktop

In 2012, we moved to HTML5-based apps where you could basically create one frame and apply it to all devices – Mac, Windows, Android, iPhone.. At the time, we felt this was the way to move forward. This is what the first version to use this new ideology looked like:

Flash-back. Toggl Desktop version from 2012

Throughout 2013, everyone could use the next iteration of this HTML5-based app, with a slightly modified design:

Toggl Desktop design in 2012

Today, we have come the full circle and decided to go back to native apps. As the web has gone through immense visual changes, the design of the new apps will also be completely revamped to more closely resemble that of the new web. Mac users can already check out the new version, Windows app is currently being developed. The Android app is also available for beta testers, and iOS will be next in line.

Where next?

While Toggl looks perfect to me at the moment, I fully expect us to show the world a whole new concept for time tracking again in 2015. After all, you either move forward, or you get left behind. I’m looking forward to it!

What do you think of Toggl through its history?

By On March 18, 2014

  1. I’ve been using Toggl for almost 5 years now and I’m one in general who does not like change.

    First a couple of good things:

    – It LOOKS great!! Good fonts and colors and so forth; being a time tracker, I was perfectly fine with the former text-y look but this really is nice looking

    – It is REALLY fast; switching between workspaces, or reports, or different areas in general. Speed it excellent.

    But that all said, I do have some definite issues with it:

    – I just find it really hard to look for information; because of the “smooth” look, I can’t just quickly scan it and find what I want. I did just find the “compact” setting moments ago, that makes it easier than the “comfortable” setting, but the project names, while nicely colored, just blend in with the surroundings. Putting things in columns definitely helped with this.

    – I don’t have my pie chart of projects anymore, just this progress bar at the bottom of the screen. it would be useful to have this as an option; keep the pie on the right with a legend or use the progress bar at the bottom.

    – While there is nothing wrong with the new project selector, it actually takes MORE clicks (and possibly typing) to get what I want. I miss the one click and drop down to the project. Now I have to click, slide to the right, use the scroll bar find the project, and click it … or I have to click, then type something, then click the project. That is at minimum 3 more clicks than in the past.

    – For the past three days, I actually keep forgetting to TURN ON the timer; I have it running in the background but in the past there was this big GREEN bar with my active project at the top … now it blends in with the background.

    It is definitely NOT horrible, but now that the old one is going away, I had better figure out how to use it now).

  2. I actually like the OS X Desktop app compared with the new toggl. The only thing I wish it showed is start and stop times in the list.

    I have tried so hard to like the new UI and though it has come a long way and does support most of the keyboard input I was asking for, visually it is still very difficult to scan for information, you have to move your eyes back and forth, information is truncated differently depending on the amount of info in the preceding field, many times you cannot even see the tag you’ve assigned, just the tag symbol.

    To me this is atrocious design, columns may be outdated in the design world, but they do the best job of presenting information. Think about an excel worksheet where each cell adjusted width automatically instead of adjusting the entire column and you have the new Toggl. Funny how Microsoft hasn’t caught on to the new design thought – and I am grateful they haven’t.

    I guess I have until June now to relish my favorite toggl, now old.toggl. My thoughts anyway. J

  3. I agree the Toggl website looks fantastic and is great to use. I’ve been using Toggl for quite a while now and have always been appreciative of it’s ease of use. I am, however, a heavy user of the Mac desktop app, which I use every day to record the work I am doing.

    This post is great, but I’m baffled as to why the new Mac desktop app has gone from looking great, and being a great user experience, to looking like something from the 90s, and less easy to use! (very small buttons, harder to read and delineate different tasks, small text).

    I’m a developer myself and I can appreciate the relief your devs must feel for reworking the app into a native app, but surely this should have been released as a “beta”, until the UI has been redesigned into something that was even half as good as it was before?

    Regards,

    (still a devoted user, just sharing my disappointment at this latest update)