TL;DRChallengeAnsatzLösungLookErgebnis

StaffBaze

Drei-Tage-Challenge: Ein HR-Dashboard gestalten

UX/UI Designer (solo)

3 Tage

Das HR-Dashboard von Staffbaze hilft HR-Profis dabei, ihre komplexen Arbeitsabläufe mithilfe einer klaren, visuellen Oberfläche besser zu strukturieren und effizienter zu arbeiten. Es wurde in einer dreitägigen Design-Challenge entwickelt, um Prozesse zu vereinfachen und den Usern ein Gefühl von Sicherheit und Kontrolle zurückzugeben. So können sich HR-Teams endlich wieder auf das Wesentliche konzentrieren: die Menschen.

Erkunde den Prototypen

🎯 Die Challenge

HR-Teams arbeiten mit vielen parallelen Aufgaben, verstreuten Tools und wenig Übersicht. Das führt zu Stress, ineffizienten Abläufen und dem Gefühl, die Kontrolle über wichtige Themen wie Urlaube, Termine oder Bewerbungen zu verlieren.

🛠️ Der Ansatz

In einer dreitägigen Design-Challenge wurde mit schnellem, fokussiertem Research gearbeitet: ein kurzes Interview, Analyse typischer Pain Points und Benchmarking bestehender Dashboards. Der Fokus lag darauf, reale Probleme schnell zu verstehen und pragmatisch zu priorisieren.

💡 Die Lösung

Das Ergebnis ist ein zentrales HR-Dashboard, das alle Kernaufgaben an einem Ort bündelt – von Urlaubs- und Terminmanagement über Arbeitszeiten bis hin zu Recruiting. Klare Informationshierarchien, reduzierte Workflows und KI-Features unterstützen effizientes Arbeiten.

🎨 Der Look

Ein ruhiges, monochromes Blau vermittelt Vertrauen und Übersicht. Die klare Typografie (Lato), dezente Icons und gezielter Einsatz von Signalfarben sorgen für gute Lesbarkeit, schnelle Orientierung und ein modernes, professionelles Erscheinungsbild.

📊 Das Ergebnis

HR-Profis erhalten eine klare, visuelle Übersicht über ihre täglichen Aufgaben und können schneller fundierte Entscheidungen treffen. KI-gestützte Funktionen wie Bewerber-Matching und ein Chatbot reduzieren Reibung und sparen Zeit.

🤔 Reflexion

Das Projekt zeigte, wie wichtig Fokus, schnelle Iteration und frühes Feedback sind. Die Challenge bestätigte, dass gutes UX-Design nicht von Komplexität lebt, sondern von Klarheit – und dass KI ein wertvoller Beschleuniger sein kann, wenn der Mensch im Zentrum bleibt.

Die Challenge

HR-Teams sind oft das stille Rückgrat von Unternehmen, doch ihre Arbeit kann überwältigend und unsichtbar erscheinen. Sie jonglieren mit unzähligen Aufgaben – von Urlaubsanträgen über Termine bis hin zur Verwaltung von Mitarbeiterinformationen – oft ohne einen klaren Überblick in ihrem eigenen Arbeitsalltag.

⚡ Das Problem

HR-Profis brauchen ein zentrales, intuitives System, das ihnen eine klare Übersicht über ihre Aufgaben und Verantwortlichkeiten bietet. Fragmentierte Abläufe und mangelnde Sichtbarkeit erschweren effizientes Arbeiten und eine effektive Unterstützung der Teams.

🎯 Die Challenge

Wie könnte ein Dashboard aussehen, das HR-Teams ermöglicht, alle wichtigen Aufgaben an einem Ort zu verwalten, Klarheit und Kontrolle zu gewinnen und sich auf das Wesentliche zu konzentrieren: die Unterstützung von Menschen?

Der Ansatz

Recherche

Angesichts des engen Drei-Tage-Zeitrahmens wurde eine schnelle, fokussierte Recherche durchgeführt, um die dringendsten Herausforderungen von HR-Profis zu verstehen. Dazu gehörte ein kurzes Interview mit einem Teammitglied, die Analyse typischer Probleme im Aufgabenmanagement und die Durchsicht bestehender Dashboards zur Inspiration. Dabei zeigte sich: HR-Mitarbeiter kämpfen oft damit, Aufgaben, Fristen und Mitarbeiterinformationen ohne klaren Überblick im Blick zu behalten.

Von der Aufgabe zum Ablauf

Die Recherche konzentrierte sich auf die täglichen Herausforderungen in der HR. Aufgaben wie Urlaubsanträge, Terminmanagement und Mitarbeiterübersichten sind oft zeitaufwendig und fragmentiert. Ein zentrales Bedürfnis war eine einfache, schnelle Möglichkeit, Urlaubsanträge zu verwalten. Der folgende User Flow zeigt, wie ein HR-Mitarbeiter einen solchen Antrag direkt über das Dashboard bearbeiten kann.

Die Lösung

Feature-Definition

Auf Basis der Recherche entwickelte sich das Konzept zu einem zentralen HR-Dashboard, das alle wesentlichen Informationen und Funktionen an einem Ort bündelt. Ziel war es, einen klaren und effizienten Arbeitsbereich zu schaffen, in dem HR-Profis ihre täglichen Aufgaben mühelos verwalten können.

Tabelle mit drei Spalten mit den Überschriften „Forschung“, „Ziel“ und „Designmöglichkeit“ sowie drei Zeilen Text, in denen die Herausforderungen der Aufgabe, die Ziele und die Designlösungen beschrieben werden.
Table showing three columns labeled Research, Goal, and Design Opportunity with three rows of text describing task challenges, goals, and design solutions.

Iteration & Skizzen

Der Designprozess folgte einem schnellen, iterativen Ansatz: von groben Skizzen zu einem interaktiven High-Fidelity-Prototypen innerhalb der drei Tage. Erste Wireframes fokussierten sich auf Informationshierarchie und Kernfunktionen wie Aufgabenmanagement, Urlaubsanträge und Terminverwaltung.

Insights in Interfaces verwandeln

Feedback aus frühen Tests führte zu Anpassungen: verbesserte visuelle Hierarchie, klarere Beschriftungen und bessere Organisation der Workflows. Im High-Fidelity-Prototyp wurden visuelles Design, Farbcodierung, interaktive Diagramme und KI-gestützte Funktionen integriert – ohne die Benutzerfreundlichkeit zu verlieren.

Beispielsweise wurde die Kalenderansicht entfernt, um den Fokus auf die Terminübersicht zu legen, und die Zeiterfassungsfunktion verschoben, um mehr Platz für organisatorische Aufgaben zu schaffen. Farbentscheidungen für Signalfarben (Grün, Orange, Rot) wurden so optimiert, dass sie die Botschaft klar vermitteln, ohne die Nutzer zu überfordern.

Urlaubszeiten
Ziel war es, den Prozess so schnell und einfach wie möglich zu gestalten. Gleichzeitig kann der Nutzer mit einem Klick zu einer detaillierteren Übersicht wechseln.

Arbeitszeiten
HR-Mitarbeiter müssen Arbeitszeiten erfassen, um Compliance, faire Arbeitslasten und genaue Gehaltsabrechnungen sicherzustellen. Eine visuelle Übersicht vereinfacht diesen Prozess, mit der Möglichkeit, zwischen Abteilungen zu wechseln.

Termine
Tests zeigten, dass HR-Profis eine klare Liste bevorstehender Termine einem Kalender vorziehen. Das Design wurde angepasst: Zeit, Datum, Ort und Teilnehmer werden in einer kompakten Liste angezeigt, farbcodiert nach Thema für schnellen Überblick.
KI-Chatbot
Ein integrierter KI-Chatbot unterstützt bei der Navigation, beantwortet Fragen und hilft bei der Dateninterpretation. So werden Aufgaben schneller erledigt, Fehler reduziert und das Nutzererlebnis verbessert.
Search bar with placeholder text 'How can I help you?' and a circular blue icon with a white robot symbol on the right.
Donut chart showing 68 employees divided into full-time (45), part-time (18), and LTE (5) categories.
Statistiken und Diagramme
Ein früher Test zeigte die Notwendigkeit, Mitarbeitervertragsarten zu überblicken. Nutzer können zwischen Kreis- und Balkendiagrammen wechseln, klickbare Segmente zeigen die Abteilungsaufteilung. Farben differenzieren die Kategorien klar, ohne das Dashboard optisch zu überladen.
Bewerbungsübersicht & KI-Matching
Recruiting ist ein weiterer Kernbereich. Bewerbungen werden zentral angezeigt und mit einer KI bewertet, die die Passung der Kandidaten in Prozent angibt. Signalfarben (Grün für starke Matches, Orange für teilweise) erleichtern die schnelle Identifikation der Top-Kandidaten und datenbasierte Entscheidungen.

Der Look

Farben

Das Dashboard-Design ist klar, modern und benutzerfreundlich. Eine monochrome Blaupaletten vermittelt Ruhe, Vertrauen und Professionalität, während der Fokus auf die wichtigsten Informationen erhalten bleibt.

Seven circles arranged in two rows, each circle a different shade of blue, black, or white.

Typographie

Die Schriftart Nunito eignet sich besonders gut für ein HR-Dashboard, da sie durch ihre abgerundeten, klaren Buchstaben eine hohe Lesbarkeit auch bei kleinen Schriftgrößen und dichter Informationsdarstellung gewährleistet. Gleichzeitig vermittelt sie einen modernen, freundlichen Eindruck, der das Dashboard professionell, aber zugänglich erscheinen lässt.

Large letters 'ABC' in the font nunito  on the left; on the right, three lines of text reading 'Nunito bold', 'Nunito semi-bold', and 'Nunito regular'.
Five black icons with labels in vertical order: a grid for 'Dashboard', a clock for 'Attendance', a briefcase for 'Employees', a document for 'Applications', and a cloud with an arrow for 'Vacation'.

Ikonographie

Die minimalistischen, flachen Linien-Symbole ergänzen die Typografie durch subtile, aber aussagekräftige visuelle Hinweise, die die Aufmerksamkeit des Benutzers lenken, ohne den Fokus vom Kerninhalt abzulenken. Ihre klare, zurückhaltende Ästhetik unterstützt die Gesamtstruktur des Dashboards und sorgt dafür, dass Navigation und Interaktion intuitiv und visuell ausgewogen bleiben. Durch den Verzicht auf unnötige Verzierungen tragen die Symbole zu einer einheitlichen und übersichtlichen Bildsprache bei, die die Klarheit verbessert, die Benutzerfreundlichkeit stärkt und eine harmonische Beziehung zwischen Text und Bild über die gesamte Benutzeroberfläche hinweg aufrechterhält.

Das Ergebnis

Die Drei-Tage-Challenge führte zu einem High-Fidelity-HR-Dashboard, das HR-Profis Klarheit, Ruhe und Kontrolle zurückgibt. Durch die Zentralisierung von Aufgaben, Terminen, Urlaubsanträgen, Arbeitszeiten, Statistiken und Recruiting-Prozessen können Nutzer alles auf einen Blick sehen und schnell handeln. KI-gestützte Features, wie das Bewerber-Matching und der Chatbot, reduzieren Reibung und fördern schnelle, sichere Entscheidungen. Farbwahl, Typografie und Ikonographie schaffen ein professionelles, zugängliches Interface, das komplexe HR-Workflows intuitiv und handhabbar macht.

Reflexion

Die Arbeit unter dem engen Drei-Tage-Zeitrahmen zeigte, wie schnell man von der Recherche zu einem ausgereiften Prototypen gelangen kann, während der Nutzer im Mittelpunkt bleibt. Ich lernte, Features zu priorisieren, früh Feedback einzubeziehen und Designentscheidungen zu treffen, die Klarheit, Usability und visuelle Harmonie balancieren. Der Einsatz von Figma Make AI beschleunigte den Prozess, ohne Empathie oder Qualität zu verlieren. Vor allem bestätigte das Projekt, wie wertvoll es ist, die echten Herausforderungen der Nutzer zu verstehen: Ein Tool zu entwickeln, das nicht nur modern aussieht, sondern HR-Profis wirklich unterstützt, sich auf das Wesentliche zu konzentrieren: die Menschen.

Hand holding smartphone displaying an app with greeting, weather info, and options like "Open tracker," "Visit garden," and "See forecast."Olive

Spielerischer Energy-Tracker

Hand holding smartphone displaying calendar and profile view of an app, laptop and dotted notebook in background.Barmer Redesign

Krankenversicherung Web-App