Toggl redesign – first draft

We’re in the process of redesigning all of the Toggl user interface. The current interface has been in constant development over the last 2 years, and has many small problems with layout inconsistencies, glitches with different browsers, etc. Also it is outdated in terms of functional design.

The key points for our new interface are:

  • Less clutter – the user should be able to focus on the main Toggl features of time tracking and reporting
  • Lightweight appearance – the application should be intuitive and easy to use
  • Fast – the application should load fast and be responsive

We have a first visual draft of the upcoming interface:


Please note that this is a work in progress, and we’re continuing to refine it. But it should give you an overview of what to expect.

The design of both timers will remain the same at the moment. The only thing different is the location of the timers – they will be on the right side of the window.

Your feedback is highly appreciated!

By On September 11, 2009

  1. Hey Alari,

    I would definitely appreciate the possibility to have a larger timer, since it’s the one function that I (and probably many others) use the most.

    About the top black bar; Daniel is right, I misinterpreted the meaning of links. Knowing this, it looks all right!

    Some other comments, based on the current version:
    – Sometimes stuff that one needs to do to end up on the right page is somewhat illogical. For example to edit previously recored data (project name, amount of hours, descriptions, etc.) you need to go to Reports and then, for some reason, click on the project description. Why the description, which isn’t related to editing in any way. How about an edit button? 🙂 Or at least “Click the description to edit” -text. It took me originally a long time to find this, although for expert users it’s totally simple, since they already know it.
    – The log in and register screens are now a bit too similiar, it’s easy to accidentally enter the infos in a wrong place.

    Anyway, great that you’re answering to feedback and keep up the good work!

  2. I think some commenters might be missing the fact that the top black bar is for workspaces and not projects because in the example you’ve named the workspace “Apprise projects”.

    I think the layout is a big step forward in the direction of workflow-centred design and is a lot more attractive (although perhaps you owe 37signals a commission).

    The ideal scenario for the right hand column is that you can drag the width dynamically and is stores it in absolute pixels rather than scaling proportionally with size. If you could be bother absolute ems would probably be better again.

    I love Nano. I hardly take if off the single task view. Logging time against existing projects is usually around 3 or 4 keystrokes thanks to autofill. I only look at the task list if I can’t remember the name of the project.

    Still would like to see human-readable times in Nano.

    Good work Alari and team.

  3. Hi Antti, the left side of top bar is reserved for workspace controls.

    Would you prefer the timer to resize as the screen resizes?

  4. (Especially on wider screens, like mine, the main column expands but the timer keeps being small, which is very annoying.)

  5. Looks all right, it’s hard to say too much based on a single screenshot. But usability-wise: why, for example, are there additional project controls on the top bar, outside the actual “Projects”-tab? Why does the timer, which is probably the most important single feature on the site, still have only about 15% of the screen width?