Corporate Design · UX/UI-Design
Timespan
You work. Timespan tracks. Ein Auszubildender aus der IT-Abteilung hat eine Anwendung entwickelt, die Ausbildungsnachweise automatisch erstellt. Dafür trackt sie die Bearbeitungszeit jeder einzelnen Aufgabe präzise. Damit Timespan in der gesamten SRH bekannt wird und sich etabliert, brauchte die App ein eigenständiges Corporate Design und ein grundlegend überarbeitetes UI/UX-Design.
Mein Ziel war eine visuelle Identität, die der Software ein Gesicht gibt und ihre Bekanntheit in der SRH stärkt. Dazu kam eine Anwendung, die sich intuitiv bedienen lässt, den Nutzer klar führt und leicht verständlich bleibt.
Corporate Design
Am Anfang stand eine umfassende Recherche. Ich habe ähnliche Anwendungen und mögliche Konkurrenzprodukte analysiert, daraus ein Moodboard erstellt und die Farbwelt gezielt darauf abgestimmt.
Das Logo basiert auf der Schrift Boldonse Regular. Eine Uhr als Bildmarke wäre zu generisch gewesen, deshalb steckt die Zeit subtiler im Logo: Der Querstrich des „t“ steht leicht schräg und erinnert an den Zeiger einer Uhr.
Die Farbpalette ist bewusst reduziert und besteht aus zwei Blautönen und Weiß. Das tiefe Marineblau steht für Verlässlichkeit, Fokus und Professionalität, also für das, was eine Zeiterfassungs-App ausstrahlen muss. Das helle Babyblau nimmt dem Design die Schwere und bringt Energie, Zugänglichkeit und einen modernen Charakter hinein.
Bei der Typografie haben beide Schriften klare Aufgaben. Die Boldonse gibt der Marke im Logo und in Headlines eine unverwechselbare, expressive Stimme. Die Anybody übernimmt den funktionalen Teil, denn sie ist gut lesbar, geometrisch und flexibel. Weil beide Schriften eine geometrische Grundhaltung teilen, wirken sie zusammen stimmig.
UX/UI-Entwurf des Programms
Die App gliedert sich in drei klare Bereiche: Timer, Graphen und Exportieren. Diese Navigation bleibt auf jeder Seite sichtbar, sodass sich Nutzer jederzeit orientieren können.
Im Timer trägt man Aufgabenname, Start- und Endzeit sowie eine Beschreibung ein. Eine Farbauswahl lässt sich jeder Aufgabe zuordnen, sodass sich Kategorien auf einen Blick unterscheiden lassen. Start- und Stopp-Button sind bewusst groß und eindeutig platziert, damit die Zeiterfassung im Arbeitsalltag ohne Nachdenken funktioniert.
Der Bereich Graphen macht die erfassten Zeiten sichtbar. Über einen Umschalter wechselt man zwischen Wochen-, Monats- und Tagesansicht. Die Wochenansicht zeigt die Aufgaben als Liste pro Tag, die Monatsansicht als klassischen Kalender, die Tagesansicht als Zeitstrahl mit Balken, vergleichbar mit einem Gantt-Diagramm. Ein Klick auf eine Aufgabe öffnet rechts ein Detailfenster mit Name, Datum, Uhrzeit und Beschreibung, ohne dass man die Ansicht verlassen muss.
Durchgehend nutzt das Interface die beiden Blautöne aus dem Corporate Design: Das tiefe Marineblau strukturiert Kopfzeile, Navigation und aktive Aufgaben, während helle Flächen für Ruhe und Übersicht sorgen. So bleibt das UI trotz vieler Informationen aufgeräumt und auf einen Blick verständlich.
