TIMECARD TOOL FOR ADP

ADP’s timecard tool is a core component of its Workforce Now platform — used daily by employees across diverse industries to track hours and submit time for payroll. Although it's an enterprise B2B product, users expect the same clarity and responsiveness they get from consumer-grade (B2C) tools.

NOTE: Due to NDA restrictions, I’ve redacted sensitive details. for a Full walkthrough under NDA, Contact me.

OUR SITUATION

ADP’s Timecard interface was a core feature of the Workforce Now platform — used daily by employees to track hours, request time off, and submit time for payroll processing. Despite widespread usage, parts of the experience were outdated, unintuitive, and frequently criticized by users.

ADP account managers received repeated feedback from clients that the timecard:

Internally, product owners and support teams surfaced several issues:

• Time submission errors were frequent and costly

• Users found the interface unresponsive and unreliable

• Managers were spending too much time correcting employee timecards

Meanwhile, ADP had released a new backend engine with capabilities that didn’t exist when the original Timecard was built. The team was tasked with improving the experience — without disrupting mission-critical payroll workflows.

MY TASK

As lead UX designer, I defined and proposed minimally disruptive UX improvements that would:

1. Increase employee confidence and task efficiency

2. Reduce time entry errors and decrease support tickets

3. Improve A11y accessibility

4. Balance backend limitations with user needs

5. Focus on HEART framework Happiness & Task Success improvements.

6. Align UI patterns with the Workforce Now design system

This meant addressing both usability challenges and technical constraints while designing for a broad user base — from hourly shift workers to salaried professionals across multiple industries.

MY ACTIONS

I prefer to start by reviewing direct user feedback or conducting interviews across industries (hospitality, retail, manufacturing, etc.) to identify the top four to five pain points that will drive design priorities – whenever I can.

But in this case, I had no access to end users or research data — so I took a different approach:

STEP 1: REVERSE-ENGINEER THE PROBLEM

I walked through the entire employee flow of adding and deleting time entries. I recorded the session, then analyzed frame-by-frame how the system responded to input. From this, I created a detailed 11-step screen flow that mapped system behavior at each step. This analysis laid the foundation for cross-team discussions and prioritized UX breakdowns.

Key issues included:

• Misused or hard-to-see busy indicators

• Full-page lockouts that felt like screen freezes

• Incomplete data refresh

• Redundant reloads

• Reliance on a manual “Refresh” button

The “Refresh” button was a known issue — originally implemented as a workaround for an outdated backend engine. With the new backend engine ready, we could finally eliminate it — but we had to design how.

Step 2: Cross-Team Consultation

Developers noted that partial data loads would still occur due to backend limitations. They had tried implementing loading states, but there was no standard across the product. I suspected this was common in large, siloed organizations — including ADP — so I collaborated with other ADP UX teams to understand how they handled similar challenges. While patterns varied, we aligned on a shared insight: deviating from existing norms was justifiable if it meant establishing a stronger, more effective precedent.

Step 3: Industry Benchmarking

ADP’s design system, Waypoint, lacked a clear standard for handling screen loading states using its partially defined “Shimmer” pattern.

To guide our approach, I researched external systems:

• NN/g

• Google Material Design,

• REI Cedar

• ServiceTitan’s Anvil

• SAP Fiori.

SAP’s model stood out: it allowed users to stay productive while data loaded progressively, which closely aligned with our users’ mental models and real-world expectations.

Step 4: Technical Collaboration

I partnered with backend and frontend devs to map error and loading states throughout the system. This clarified what was technically feasible and revealed areas where better UX could support asynchronous backend behavior.

Step 5: Iteration with the Triad

Starting with the current happy path, I explored multiple UI flow variations using shimmer loading patterns, spinners, and progressive disclosure. I collaborated closely with product, engineering, and content to iterate toward a solution that balanced user clarity with technical feasibility.

Step 6: Final UX Deliverables

We removed the “Refresh” button entirely. Instead, data now loads progressively within modules using the Shimmer pattern, paired with simplified banner messages that clearly communicate system activity.

To meet WCAG 2.1 Guideline 2.3 – Seizures and Physical Reactions, we ensured Shimmer animations did not exceed five seconds. When longer loads were necessary, the Shimmer transitioned to a static state to prevent motion-triggered discomfort.

To explain the concept, I created a simplified flowchart to introduce the interaction logic, followed by detailed screen flows showing UI behavior across success, error, and loading states. These deliverables became the team’s shared blueprint for implementation.

THE RESULT

We introduced a unified interaction pattern that replaced the clunky “Refresh” workflow with a seamless, progressive data-loading experience. By aligning backend behavior with user expectations, the redesign improved clarity and trust across the entire timecard workflow.

While ADP didn’t yet have the tools in place to track granular UX metrics, qualitative feedback from client managers and support teams pointed to clear improvements in two core areas of the HEART framework:

• Task Success – Users no longer had to second-guess whether their changes were saved

• User Happiness – Support teams anecdotally reported fewer complaints about unresponsive interactions

Most importantly, the system now better reflects user intent: actions are acknowledged immediately, partial loads are visually managed, and the overall experience feels more intuitive and polished.

MY TAKEAWAY

Balancing backend constraints with user trust is one of the biggest challenges in enterprise UX — and it’s something I’ve learned to navigate across multiple ADP initiatives.

This project reinforced a few key lessons:

• Involve UX early: UX should be involved from the start — even when the interaction seems “obvious”.

• Don’t forget edge cases: Designing for real system behavior and failure states is just as critical as optimizing ideal flows.

• Break rules when justified: It’s okay to break with design consistency when doing so creates a clearer, more scalable path forward for users and the business.

Ultimately, small UX details — like how a system handles loading or feedback — can make a big difference in how confident and in control users feel. I’ve learned to treat those “invisible” moments with the same care as the main workflows.