Background & Business Needs
Hourly employees needed an intuitive way to track their work hours, breaks, and overtime to ensure accuracy and compliance with labor laws. The goal was to design a feature that simplifies time tracking, reduces manual errors, and provides clear insights for both employees and employers
Field Research & Design Challenges
Research Insights:
Through user interviews and field observations, we identified key pain points:
- Manual Errors: Employees often miscalculated total hours due to manual entry.
- Break Tracking Confusion: Uncertainty about logging break times led to inaccurate records.
- Overtime Awareness: Lack of clarity on overtime thresholds resulted in compliance issues.
Design Challenges
- Simplicity: Creating an interface that’s easy for all employees to navigate.
- Automation: Reducing manual input by automating calculations.
- Compliance: Ensuring the system adheres to labor regulations.
UX Solutions
in Action
Visualizing Work Hours with Clarity
🧠 UX Objective:
Show users they have no logged activity today without confusion, while still keeping the context of their week and pay period.
✅ UX Wins:
• “0 Shifts” summary offers instant clarity that nothing’s been logged.
• Selected date in the calendar (black circle) clearly anchors the user’s focus.
• Top-right total (“24:00 Total Hrs”) gives a clear weekly progress update — separated from the daily view, so there’s no confusion.
Full Day with Breaks
🧠 UX Objective:
Help users easily review their full workday — including shifts and breaks — while visually separating segments.
✅ UX Wins:
• Timeline-style breakdown creates mental model of morning → break → afternoon.
• Color-coded lunch indicator quickly identifies unpaid time (0:30).
• Segment labels & durations provide clarity without tapping or opening modals.
• Comments area allows for context or reporting without disrupting layout.
🖼️ Live Shift Visualization (Green)
🧠 UX Goal:
Give users real-time awareness of their active shift — without requiring them to navigate away from the time card view.
✅ UX Highlights:
• Green timer indicates a shift is currently in progress — it’s a familiar color language for “go” or “live.”
• Live time updates reassure the user their hours are tracking accurately in real time.
• Clear time stamp (“On the clock”) shows the last logged event and builds user trust in the system.
• Consistent hierarchy with past events: even the live session fits into the overall shift breakdown cleanly.
Capturing Time Off Transparently
🧠 UX Goal:
Ensure time off—whether sick days or scheduled leave—is clearly recorded, visually distinct, and doesn’t impact total hours, while maintaining audit readiness.
✅ UX Highlights:
Time off is visually distinct (neutral tone, icon) to reduce confusion with regular shifts.
• Does not contribute to total hours, preserving payroll and reporting accuracy.
• Comments allow quick context for approvers or HR without needing a separate tool.
• Maintains structure in calendar and daily activity view for a complete historical log.
