Interview 1
“I can see the total hours worked, but I can’t see the breakdown.”
Grocery Staff
“How can I verify my work hours...?”
The existing payroll screen showed total hours, but provided no way to verify them.
- 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" to help employees understand and verify their payroll information.
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 verifiability 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 gathered feedback through participant evaluations.
1
UX Research
(Interview & Form)
2
UI design
3
Prototype Development
4
User Feedback
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.
DESIGN CHALLENGE
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);
}
}
Verification
Did the redesign actually improve transparency?
To evaluate whether the redesign improved transparency during payroll verification, a comparative usability test was conducted comparing the existing UKG interface with the redesigned experience.
Participants completed the same tasks based on a shared work scenario, while measuring their understanding of payroll information, trust, and confidence in verifying payroll accuracy.
- Test type
- Comparative usability testing (Moderated)
- Participants
- UKG Pro users working at supermarkets
- Sample size
- 5 participants
Findings
Users became more confident verifying payroll information
Participants using the redesigned version were able to verify payroll information with greater confidence compared to the existing interface.
Visibility of supporting information increased trust
Trust scores improved from 3.8 to 6.8 after introducing supporting information such as worked hour breakdowns and clock-in/out records. These findings suggest that improving transparency increased trust in payroll information.
Learning the Challenges of User-Centered Design
Through this project, I learned that user-centered design is not easy. Users are not all the same. At my workplace, people of different ages and backgrounds use the system, so my assumptions were not always correct. For example, the work hour cell UI was not as clear for everyone as I expected. At the same time, finding these problems showed me the value of talking to real users. This project taught me that UX design is not only about creating screens, but also about listening to users and testing ideas repeatedly.
