Timetracker is a straight forward time tracking and project management tool. It stops distracting from work and supports PMs in communicating closer with their peers.

My main role was to create the visual language and furthermore designing the main concept.

This project was part of my internship at HID Human Interface Design GmbH. I worked closely with Roman Gerz. With this project we learned a lot about the User Centered Design Process.

The starting point

Tracking the time for projects you work on is crucial for projectmanagers and accountants. However it can also be annoying for designers and such. Depending on the tool you have to work with, this can take some minutes and really get you out of the flow. Roman and I were asked to design a proper solution, that shows how time tracking could easily integrate into your workflow and also supports the communication between projectmanager and team.

Understanding the situation

For a start we wanted to know more about how time tracking was part of the different workflows of our colleagues. As you can imagine, opinions about keeping track of your time on projects happened to be quite diverse—the range goes/went from some being nitpicky about every second and tracking even every small coffee break to some who had a more laissez-faire kind of style in keeping track of their projects.

wireframes while working on the app

Stack all the times!!1

Timetracker (great name. I know. Everybody loves it!) consists of two parts one is a desktop widget to track your time quickly and without any distraction. The other is a web app which shows your stats. Furthermore project managers (PMs) have the possibility to plan their projects within the web app. They can assign tasks to their colleagues which appear automatically in their task-stack.

wireframes while working on the app

Make it colourful

Among others the Post-It really stand out as a multipurpose helper for small messages, to-do-lists and of course brainstormings or [insert fancy design method here] in our common work environment. Therefore we wanted to use it as our main metaphor for the visual appearance and create a link between UI and agency. The visual concept defines the overall visual language of timetracker. It creates a feeling for the look of the UI at a first glance. Nevertheless it shows a lot of details about use of typography, icons, images and much more.

wireframes while working on the app