Garment Attendance Tracking System

Designing an Attendance Tracking, Workforce Management, and Payroll System for a Garment

Introduction

A mid-sized garment manufacturing company faced challenges managing workforce attendance due to outdated manual processes. With over 300 employees across various departments, tracking attendance, managing work schedules, and processing payroll required significant effort, leading to inefficiencies and frequent errors. The garment previously relied on finger recognition machines for attendance tracking, but reports had to be manually monitored. There was no system to retrieve attendance data into a database for automated processing and management. To address these challenges, I led the design of a new integrated Attendance Tracking, Workforce Management, and Payroll System.
Confidentiality Notice: Garment details cannot be disclosed due to NDA.

Project Goals

Role

Project Manager & UX/UI Designer

Tools Used

Figma

Adobe Photoshop

Adobe Illustrator

HTML5

CSS3

JavaScript

PHP

MySQL

Miro

Lucidchart

Design Thinking Process

1. Empathize — Understanding User Needs

Goal: Gather insights into user pain points, workflows, and challenges in attendance tracking and payroll processing.

Activities:

• Conduct Stakeholder Interviews (HR, Accountant, Manager, CEO).
• Observe Current Manual Processes (Attendance logging, Payroll calculations, Approvals).
• Identify Pain Points (Errors in attendance tracking, Delays in payroll approval, Compliance issues).
• Analyze User Behavior & Expectations.

Findings:

• HR faces difficulty in tracking manual attendance corrections.
• Accountants struggle with calculating overtime and deductions.
• Managers need a faster approval workflow for payroll finalization.
• CEOs require high-level workforce and payroll analytics.

2. Define — Creating a Problem Statement

Goal: Synthesize research findings into a clear problem statement to guide design solutions.

Problem Statement:

"HR managers, accountants, and factory managers need a seamless and error-free way to track attendance, calculate payroll, and approve payments efficiently because existing systems are fragmented, error-prone, and slow."

User Needs Defined:

• HR: Needs real-time attendance tracking and an easy way to approve/reject manual entries.
• Accountant: Requires automated payroll calculations, overtime tracking, and a clear approval process.
• Manager: Needs a quick summary dashboard to review and approve payroll.
• CEO: Requires high-level workforce insights, payroll expenditure analysis, and compliance tracking.

3. Ideate — Brainstorming Solutions

Goal: Generate innovative design ideas to improve user experience and efficiency.

Brainstorming Session:

• Role-Based Dashboards for HR, Accountant, Manager, and CEO.
• Automated Attendance Tracking (Biometric, RFID, Manual Entry with Validation).
• Simplified Payroll Processing (Auto-Calculation, Overtime Handling, Tax Compliance).
• Approval Workflow System (Manager Approval Before Payroll Processing).
• Real-Time Notifications & Alerts (Pending Approvals, Payroll Processing Updates).
• High-Visibility Analytics for CEO (Daily Workforce Status, Payroll Expenses, Shift Information).

Prioritization of Features:

• High-Impact, Low-Effort: Role-based dashboards, Payroll auto-calculations.
• High-Impact, High-Effort: Biometric attendance integration, AI-based fraud detection.
• Low-Impact, High-Effort: Advanced workforce analytics, AI-driven salary optimizations.

4. Prototype — Building UX/UI Wireframes & Mockups

Goal: Translate ideas into interactive wireframes and high-fidelity UI designs.

Low-Fidelity Wireframes:

• Sketch basic dashboard layouts for different user roles.
• Design attendance tracking workflow (Clock-In/Out, Manual Approvals, Shift Management).
• Draft payroll processing flow (Data Validation → Manager Approval → Salary Disbursement).
• Map out HR Reporting & Compliance Dashboard.

High-Fidelity Prototypes:

• Apply brand colors, typography, and icons for intuitive navigation.
• Design intuitive user flows for attendance tracking, payroll processing, and reporting.
• Implement responsive design for tablet, and desktop screens.
• Enhance user accessibility (WCAG Compliance, Readability Improvements).

Design System:

Interactive Prototyping:

• Enable real-time interactions (Payroll Approval, Attendance Logs, Reports).
• Validate role-based dashboards & approval workflow integration.
• Conduct usability testing with HR, accountants, and managers.

5. Test — User Testing & Refinements

Goal: Validate design decisions through real user testing and feedback collection.

Usability Testing:

• HR Testing: Attendance management, approval workflow navigation.
• Accountant Testing: Payroll calculations, tax & deduction validation.
• Manager Testing: Payroll approval process, payroll summary review.
• CEO Testing: Dashboard insights, workforce analytics.

Key Learnings & Refinements:

• Issue: Users were confused about pending payroll requests.
• Solution: Added "Pending Approvals" section with visual indicators.
• Issue: HR wanted a faster way to approve multiple manual entries.
• Solution: Introduced Bulk Approval Feature for manual corrections.
• Issue: Managers needed a consolidated summary of payroll expenses.
• Solution: Implemented Payroll Summary Graphs & Reports.
• Issue: The CEO's dashboard lacked clear workforce insights.
• Solution: Integrated Daily Workforce Snapshot & Attendance Trends.

Impact