StaffBaze

Three-day-challenge to create an HR Dashboard

UX/UI Designer (solo)

3 days

Staffbaze's HR dashboard helps HR professionals better structure their complex workflows and work more efficiently with the help of a clear, visual interface. It was developed in a three-day design challenge to simplify processes and give users back a sense of security and control. This allows HR teams to finally focus on what matters most: people.

TL;DRChallengeApproachSolutionLookResults

🎯 The Challenge

HR teams juggle many parallel tasks across fragmented tools, often lacking a clear overview. This leads to stress, inefficiency, and a loss of control over essential activities like vacation management, appointments, and recruitment.

🛠️ The Approach

Within a tight three-day design challenge, a fast and focused research phase was conducted, including a short interview, pain point analysis, and dashboard benchmarking. The goal was to quickly understand real user needs and prioritize what matters most.

💡 The Solution

The result is a centralized HR dashboard that brings all core tasks into one place — from vacation and appointment management to working hours and recruiting. Clear hierarchies, simplified workflows, and AI-supported features enable efficient daily work.

🎨 The Look

A calm, monochromatic blue color palette conveys trust and clarity. Clean typography (Lato), minimal iconography, and purposeful signal colors ensure readability, quick orientation, and a modern, professional feel.

📊 The Results

HR professionals gain a clear, visual overview of their work and can make faster, more confident decisions. AI-powered tools like applicant matching and a navigation chatbot reduce friction and save time.

🤔 Reflection

The project highlighted the value of focus, rapid iteration, and early feedback. It reinforced that strong UX design is about clarity over complexity — and that AI can meaningfully accelerate the process when human needs remain at the center.

Explore Prototype

The Challenge

HR teams are often the quiet backbone of organizations, yet their work can feel overwhelming and invisible. They manage numerous tasks, from vacation requests and appointments to tracking employee information, often without a clear overview.

⚡ The Problem

HR professionals need a centralized, intuitive system that gives them a clear overview of their tasks and responsibilities, because fragmented workflows and lack of visibility make it difficult to work efficiently and support their teams effectively.

🎯 The Challenge

How might I create a dashboard that empowers HR teams to manage all their key tasks in one place, gain clarity and control, and focus on what matters most: supporting people?

The Approach

Research

Given the tight three-day timeframe, a rapid, focused research phase was conducted to understand HR professionals’ most pressing challenges. This included a quick interview with an HR team member, reviewing common pain points in task management, and analyzing existing dashboards for inspiration. Insights revealed that HR employees often struggle to keep track of tasks, deadlines, and employee information without a clear overview.

From Task to Flow

The research phase focused on understanding the daily challenges of HR professionals. It showed that tasks like vacation requests, appointment management, and staff overviews are often time-consuming and fragmented. One key need was a simple, fast way to manage vacation requests. The following user flow illustrates how an HR employee can handle such a request directly from the dashboard.

The Solution

Feature Definition

Based on the research insights, the concept evolved into a centralized HR dashboardt hat brings together all essential information and functionalities in one place. The goal was to create a clear and efficient workspace where HR professionals can manage their daily responsibilities with ease.
To support this, key features were prioritized to cover the most important aspects of HR workflows:

Table showing three columns labeled Research, Goal, and Design Opportunity with three rows of text describing task challenges, goals, and design solutions.

Iteration & Sketches

The design process followed a rapid iterative approach, moving from low-fidelity sketches to a interactive high-fidelity prototype within the three-day challenge. Early low-fidelity wireframes focused information hierarchy and core functionality, such as task management, vacation requests, and appointment tracking. To explore options more quickly in the early stages, I used Figma Make AI to generate alternative layout variants. The ideas served as a sparring partner, but I deliberately rebuilt the final wireframes and curated their content.

Turning Insights into Interfaces

Feedback from a second round of user testing revealed adjustments, leading to iteration with improved visual hierarchy, clearer labeling, and better organization of workflows. Finally, the high-fidelity version refined the visual design, added color coding, interactive charts, and AI-assisted features, while maintaining simplicity and usability.

For example, the calendar view was omitted after testing in order to focus more on the functionality of the appointment overview. The feature for tracking your own working time was also moved from the main dashboard to the top bar to create more space for organizational tasks.

Additionally, the use of colors such as green, orange and red was refined through feedback rounds so that, ultimately, the intended message of the signal colors was conveyed without overwhelming the user with too many color combinations.

Vacation Manager
The aim was to provide users with the fastest and easiest way to complete the process. Of course, users can switch to a more detailed overview of their vacation planning with a single click for more details.
Working Hours
HR employees need to track working hours to ensure compliance, fair workloads, and accurate payroll. A visual overview was designed to simplify this process, allowing users to switch between departments easily via a filter menu.
Appointments
User testing revealed that HR professionals preferred a clear list of upcoming appointments over a calendar view. The design was adjusted accordingly to show key details — time, date, location, and participants — in a concise list. Color coding by topic further enhances quick recognition and overview.
AI Chatbot
An integrated AI chatbot assists users with navigation, answers questions, and helps interpret data, enabling faster task completion, fewer errors, and a smoother user experience.
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.
Stats and Charts
Early testing highlighted the need for an overview of employee contract types. To improve clarity, users can switch between a pie and bar chart, with clickable sections revealing department breakdowns. Colors were chosen to clearly differentiate categories while keeping the dashboard visually balanced.
Application Overview and AI Matching
Recruitment is another key part of HR work. Incoming applications can be viewed centrally and pre-analyzed using an AI tool that scores candidate compatibility in percentages. Signal colors — green for strong matches and orange for partial fits — make it easy to identify top candidates quickly and support faster, data-driven decisions.

The Look

Colors

The dashboard’s visual design was crafted to be clean, modern, and user-friendly. Amonochromatic blue palettewith multiple shades provides a sense of calm, trust, and professionalism, while also helping users focus on key information without visual clutter.

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

Typography

The Nunito font is particularly well suited for an HR dashboard, as its rounded, clear letters ensure high readability even at small font sizes and with dense information presentation. At the same time, it conveys a modern, friendly impression that makes the dashboard appear professional yet accessible.

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'.

Iconography

The minimal, flat line icons complement the typography by adding subtle yet meaningful visual cues that guide the user’s attention without drawing focus away from the core content. Their clean, understated aesthetic supports the overall structure of the dashboard, ensuring that navigation and interaction remain intuitive and visually balanced. By avoiding unnecessary ornamentation, the icons contribute to a cohesive and uncluttered visual language that enhances clarity, strengthens usability, and maintains a harmonious relationship between text and imagery throughout the entire interface.

The Results

The three-day challenge resulted in a high-fidelity HR dashboard that gives HR professionals back what modern workflows often take away: clarity, calm, and control. By centralizing daily tasks, appointments, vacation requests, working hours, employment statistics, and recruitment processes, the dashboard allows users to see everything at a glance and act quickly. AI-powered features, like the applicant compatibility tool and the navigation chatbot, help reduce friction and support faster, confident decision-making. Thoughtful choices in color, typography, and iconography create a professional yet approachable interface, making complex HR workflows feel intuitive and manageable.

Reflection

Working within a tight three-day timeframe taught me how to move quickly from research to a polished prototype while keeping the user at the center. I learned to prioritize features that truly matter, iterate based on early feedback, and make design decisions that balance clarity, usability, and visual harmony. Using Figma Make AI for rapid concepting showed me how AI can accelerate the design process without sacrificing empathy or quality. Most importantly, this project reinforced the value of understanding users’ real challenges — by designing for HR professionals’ needs, I was able to create a tool that not only looks clean and modern but genuinely helps them focus on what matters most: people.

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

Gamified Energy Tracker

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

Health Insurance Web App