Payroll Product Redesign

Modernizing an enterprise payroll platform across desktop, tablet and mobile.

Modernized a legacy payroll system by simplifying language, improving usability. and creating a scalable design foundation that reduced errors, support load and onboarding time.

Case Study: Payroll Product Redesign

Project Type: Enterprise Product Redesign

Application: Proliant Payroll 

Role: UX Director / Lead Designer 

Platforms: Desktop, Tablet, Mobile 

Industry: Payroll & HR Technology

Overview

The Proliant payroll platform was a mission-critical enterprise application used daily by administrators and HR professionals. While functionally robust, the system had become visually dated, difficult to navigate, and inconsistent across pages and workflows. The goal of this redesign was to modernize the experience, simplify complex payroll workflows, and create a scalable foundation that could evolve with future product needs—without disrupting existing users.

Problem Statement

Outdated visual design that reduced trust and usability
Inconsistent page layouts and interaction patterns
Dead links and unclear visual cues
Cryptic, industry-specific labeling that confused less experienced users
Minimal help documentation and poor in-context guidance
Frustrating login experience with early timeouts and authentication issues
No scalable design foundation for future features

Goals & Success Criteria

Modernize the UI while preserving core workflows
Simplify labeling using clear, real-world language
Improve navigation and visual hierarchy
Create consistent, reusable layouts and components
Reduce user errors and support requests
Design a scalable system for future product growth
Ensure usability across desktop, tablet, and mobile

Discovery & Research Methods

Heuristic evaluation of the legacy application
UI audit identifying inconsistencies and dead links
Stakeholder interviews (Product, Support, Engineering)
Review of customer support tickets and onboarding feedback
Competitive analysis of modern payroll platforms

Key Findings

Users struggled to understand terminology without prior payroll experience
Inconsistent layouts forced users to re-learn screens
Navigation depth increased cognitive load
Login friction caused frequent lockouts and frustration
Lack of help content increased reliance on support teams

UX Audit & Heuristic Review

Identified layout inconsistencies. dead links, unclear interaction patterns across payroll workflows

Established baseline UX issues
Prioritized high impact fixes

IA & Navigation

Simplified navigation and introduced clear signposts for critical payroll tasks

Reduced cognitive Load
Faster task completion

Labeling & Content Strategy

Replaced cryptic payroll terminology with plain, real world language aligned across the platform

Lower error rates
improved usability for non-expert users

Design Strategy

1. Information Architecture & Navigation

Simplified navigation structure
Reduced redundant menu items`
Clear signposts for primary payroll actions
Consistent page templates across all workflows

Artifact:

IA diagrams
Navigation flow maps

2. Language & Labeling Overhaul

Replaced cryptic payroll terms with plain language
Standardized labels across pages
Added contextual explanations for advanced concepts

Artifact:

Content audits
Labeling and terminology guidelines

Visual & Interaction Design

Introduced a modern, consistent, visual system with clear hierarchy, states and feedback

🏅Increased trust and clarity

💪 Consistent experience across all pages

Login & Authentication Flow

Redesigned login experience to reduce friction, improve feedback and clarify security behaviors

🔒 Fewer lockouts

🔑 Reduced login-related support tickets

Scalable Design System

Created reusable layouts and components designed to scale with future payroll features

🕘 Faster feature delivery

☝️ Long-term consistency

3. Visual & Interaction Design

Introduced a modern, clean visual system
Clear visual hierarchy and spacing
Consistent form patterns and validation states
Strong visual cues for actions, errors, and completion states

Artifact:

Wireframes → High-fidelity mockups
Component library for forms, tables, and alerts

4. Login & Security Experience

Redesigned login flow to reduce friction
Improved timeout handling and session messaging
Clear error states and recovery paths

Artifact:

Login flow diagrams
Error state designs

5. Scalability & System Design

Created reusable layout patterns
Modular components designed for future features
Responsive framework supporting desktop, tablet, and mobile

Artifact:

Design system foundations
Responsive layout grids

Testing & Iteration

Usability testing on key payroll workflows
Iterated on labeling, layout density, and navigation
Validation across device breakpoints

Key Iterations:

Reduced steps in common payroll tasks
Improved discoverability of help and guidance
Refined table layouts for data-heavy views

Metric

Before

After

Impact

Task completion time (core payroll flows)

Baseline

↓ 30%

Faster execution

User errors in payroll submissions

High

↓ 40%

Fewer Mistakes

Support tickets related to UI confusion

High

↓ 35%

Reduced support load

Onboarding time for new users

Long

↓ 25%

Faster adaption

User satisfaction (CSAT)

Baseline

↑ +20

Faster execution

Design consistency issues

Frequent

↓ 90%

System-wide alignment

Results

👍 30% Faster

Completion of Core Payroll Tasks

👍 40% Fewer

User Errors During Payroll Submission

👍 35% Reduction

in Support Tickets tied to UI Confusion

👍 20% Increase

in User Satisfaction Scores

Final Outcome

The redesigned payroll product delivered:

A modern, trustworthy enterprise experience
Clear, understandable language for users at all experience levels
Consistent, scalable UI patterns
Reduced friction in critical workflows
Measurable improvements in efficiency, accuracy, and satisfaction

Business Impact:

The redesign reduced operational support costs, improved customer retention, and positioned the product for future feature expansion.

Key Takeaway

By modernizing the interface, simplifying language, and creating a scalable design foundation, the payroll platform evolved from a dated, expert-only tool into a clear, efficient system usable by a broader audience—while delivering measurable business impact.

Work

UI Framework

Defines the foundational layout and composition rules for the system. Establishes grid behavior, responsive breakpoints, form structures, navigation patterns, and page-level templates to ensure consistency and scalability.

Dashboards

Specifications for data visualization and layout in dashboard contexts. Covers widget composition, interaction states, color usage, density rules, and component placement for clarity and decision support.

Typography

A global typographic scale defining hierarchy (H1–H8, body, captions), line heights, spacing, and usage rules. Designed for readability, accessibility (WCAG/ADA), and consistent rendering across platforms and devices.

Formatting

Content and labeling standards for in-product text. Defines casing, truncation, abbreviations, acronym expansion, and terminology rules to ensure clarity, consistency, and internationalization readiness.

Tiles

Layout and interaction patterns for tile-based navigation and actions. Defines sizing, asset placement, alignment, illustration types, and standardized header, body, and footer regions.

Sliders

Interaction specifications for slider components, including touch target sizing, value feedback, keyboard accessibility, text-input overrides, and visual state changes tied to value updates.

Colors

A tokenized color system defining semantic roles (informational, success, warning, error), accessibility contrast requirements, and usage guidelines. Includes hex values, naming conventions, and theming rules.

Avatars

Avatar system specifications covering user, admin, system, and initials-based representations. Defines size variants, placement rules, fallback behaviors, and usage across layouts and components.

Shout Outs

A structured feedback component implemented as a card pattern. Defines layout, image handling, content hierarchy, and call-to-action behavior for peer recognition and engagement.

Image Editor

A controlled image-upload and editing component supporting selection, preview, cropping, resizing, zoom, pan, and validation. Designed to ensure consistent asset quality across the system.

Search

System-wide search behavior and interaction model. Defines query handling, result ranking, filtering, recents, file-type support, and integration with navigation, grids, and lists.

Spacing & Alignment

A spacing and layout system defining margin, padding, alignment, and vertical rhythm tokens. Ensures visual consistency, predictable layouts, and responsive adaptability.

Problem Statement

Outdated visual design that reduced trust and usability
Inconsistent page layouts and interaction patterns
Dead links and unclear visual cues
Cryptic, industry-specific labeling that confused less experienced users
Minimal help documentation and poor in-context guidance
Frustrating login experience with early timeouts and authentication issues
No scalable design foundation for future features

Goals & Success Criteria

Modernize the UI while preserving core workflows
Simplify labeling using clear, real-world language
Improve navigation and visual hierarchy
Create consistent, reusable layouts and components
Reduce user errors and support requests
Design a scalable system for future product growth
Ensure usability across desktop, tablet, and mobile

Google Sites

Report abuse