Interview 1
“I can see the total hours worked, but I can’t see the breakdown.”
Grocery Staff
“Are my work hours being calculated correctly...?”
That my coworker’s question inspired this redesign
- Tool
- Google form / Figma / React & Tailwind
- Role
- UX Researcher / UI Designer / Front-end Developer
- Timeline
- One month, Apr-May, 2026
About this project
Redesigning the payroll experience of "UKG Pro" through real workplace experience and user research.
About UKG Pro
An employee platform for managing work hours, accessing payroll information, and reviewing pay statements.
Goal
Toward a More Transparent Payroll Experience
This project began with UX research
focused on UKG Pro, which I actively use
at my part-time workplace primarily to
review pay statements.
The goal of the redesign was to improve transparency
and usability within the payroll checking
experience.
My Approach
A User-Centered Design Process
In this project, I first analyzed pain points through interviews and surveys conducted with real users, including my coworkers. Based on these insights, I designed the UI in Figma, built a prototype using AI-assisted development tools, and conducted usability testing with participants.
1
UX Research
(Interview & Form)
2
UI design
3
Prototype Development
4
Usability Testing
A challenge uncovered through everyday conversations with coworkers
During a regular day at work, a conversation about checking payroll in UKG revealed a shared frustration among my coworkers and myself. To better understand the issue, I conducted interviews with other coworkers.
Interview 2
“The punch records should exist somewhere, but I can’t verify them in UKG Pro.
The schedule only shows assigned shifts.”
Cashier
Existing User Journey Pain Points
Users cannot verify how payroll hours are calculated, forcing them to rely on manual estimation instead of system transparency.
User Intent
Confirm that payroll hours were calculated accurately
Outcome
The user leaves without knowing the exact payroll calculation
Research Findings
Conducted a survey to further validate existing pain points and identify strong user demand for better visibility into payroll records.
Main findings
- 80% of participants said they would not feel confident verifying payroll calculations if an error occurred.
- 90% of participants wanted access to actual clock-in and clock-out records.
Users lacked confidence in payroll calculations because the system did not provide enough visibility into payroll records and actual worked hours.
GOAL
Improve payroll transparency by providing visibility into clock-in and clock-out records.
As an employee, I want to review my clock-in and clock-out history so that I can verify how my payroll hours were calculated.
Designing the UI Around UKG’s New Brand Identity
In 2025, UKG introduced a refreshed visual identity.
The redesign explored how the updated visual identity could be applied more consistently across the payroll experience.
Since the official design system was not publicly available, visual styles and UI patterns were independently analyzed from UKG’s public website.
Primitive color tokens derived from the analysis
Rather than connecting raw color values directly to the UI, I designed a hierarchical structure consisting of Primitive → Semantic → Component (optional). I placed particular emphasis on Semantic Tokens, as defining intent and meaning instead of visual values helps create more consistent design rules. Since this project contained relatively few repeated UI patterns, Component Tokens were introduced only where they provided additional value.
Final design
UI Detail
Calendar
Using darker horizontal grid lines than vertical lines improves readability and makes time progression easier to scan.
Emphasizing date numbers makes dates easier to identify at a glance.
Work time cell
Representing clock-in records as a top-to-bottom timeline creates a clearer sense of chronological flow.
Timeline colors and work cell variations improve visibility for attendance anomalies, including lateness and overtime.
Rapid prototyping with React and Codex.
Rather than stopping at static Figma screens, I built a functional prototype in React to test the interaction model in a more realistic environment. Codex helped me move faster by supporting mock data setup and interaction implementation, making it possible to recreate a testable experience in a short timeframe.
I also translated the design tokens defined in Figma into CSS, creating a consistent workflow from design decisions to implementation.
:root {
/* Primitive */
--color-teal-500: #00bba8;
/* Semantic */
--color-surface-brand: var(--color-teal-900);
/* Component */
--work-cell-bg: var(--color-surface-brand);
}
@layer components {
.work-cell {
background: var(--work-cell-bg);
color: var(--work-cell-text);
}
}