Aurora

Platform:
Web System
Role:
Product Designer
Industry:
Human Resources

Overview

A workforce management system was designed to digitize payroll, attendance, and payment processes for bars, restaurants, and discoteque. The primary goal was to reduce errors and confusion related to payments for staff and service providers. This solution provided automation for attendance tracking and payment processing while ensuring manual override options for exceptions. The system is fully implemented and currently in use across all locations.

UX Research

The research phase included conducting interviews and usability tests with key stakeholders: the Head of Human Resources and the business owner. The main findings revealed that manual processes across multiple locations with highly dynamic staff resulted in payment delays, errors, and a lack of consistency in attendance records. These insights guided the design of a transparent, automated flow with clear attendance and payment visibility.

documentation

User personas and empathy maps were created for the primary users, including the Head of Human Resources and store managers responsible for attendance. Documentation covered user journeys, pain points, and solutions focused on automation, transparency, and flexibility. Clear design specifications were also created to bridge design and development seamlessly.

Attendance Traking

The attendance tracking user flow defines how employees’ clock-in and clock-out times are registered, reflecting different statuses such as Pending, In Shift, Shift Completed, Absence, Abandonment, Late Arrival, and Tardiness. Each status is linked to automatic updates in the system, with justifications available for deviations. Employees or managers can provide reasons for late arrivals, absences, or shift abandonment, ensuring transparency. This flow improves payroll accuracy by streamlining attendance management and offering a clear structure for handling exceptional cases within the system.

Design

The system was divided into modules and submodules, such as employee management, attendance tracking, and payroll processing. Both automatic and manual entries were supported, with features including biometric attendance tracking and manual payment adjustments. Following WCAG 3.0 guidelines, I designed with accessibility in mind, using Figma for wireframes and high-fidelity prototypes.

Design System

The design system was created Instead of creating a new design system from scratch, Metronic’s library was customized to fit the project’s needs. Components, typography, colors, and modals were tailored and tokenized according to style guide best practices. The approach emphasized consistency, reusability, and scalable components.

Low-Fidelity Prototypes

Low-fidelity prototypes were created to quickly visualize and test basic concepts and user flows. These prototypes allowed for rapid iterations and feedback, ensuring the core structure and functionality of the design were aligned with user needs before moving to higher fidelity designs.

Before After

High-Fidelity Prototypes

High-fidelity prototypes were developed to provide a more polished and interactive representation of the final product. These prototypes included detailed visuals, realistic interactions, and a closer approximation of the final user interface, enabling more accurate testing and feedback on the design’s usability and functionality.

Before After

AURORA