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
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.
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
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
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
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
Established baseline UX issues
Prioritized high impact fixes
Reduced cognitive Load
Faster task completion
Lower error rates
improved usability for non-expert users
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
Replaced cryptic payroll terms with plain language
Standardized labels across pages
Added contextual explanations for advanced concepts
Artifact:
Content audits
Labeling and terminology guidelines
🏅Increased trust and clarity
💪 Consistent experience across all pages
🔒 Fewer lockouts
🔑 Reduced login-related support tickets
🕘 Faster feature delivery
☝️ Long-term consistency
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
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
Created reusable layout patterns
Modular components designed for future features
Responsive framework supporting desktop, tablet, and mobile
Artifact:
Design system foundations
Responsive layout grids
Usability testing on key payroll workflows
Iterated on labeling, layout density, and navigation
Validation across device breakpoints
Reduced steps in common payroll tasks
Improved discoverability of help and guidance
Refined table layouts for data-heavy views
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
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
The redesign reduced operational support costs, improved customer retention, and positioned the product for future feature expansion.
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.
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.
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.
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.
Content and labeling standards for in-product text. Defines casing, truncation, abbreviations, acronym expansion, and terminology rules to ensure clarity, consistency, and internationalization readiness.
Layout and interaction patterns for tile-based navigation and actions. Defines sizing, asset placement, alignment, illustration types, and standardized header, body, and footer regions.
Interaction specifications for slider components, including touch target sizing, value feedback, keyboard accessibility, text-input overrides, and visual state changes tied to value updates.
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.
Avatar system specifications covering user, admin, system, and initials-based representations. Defines size variants, placement rules, fallback behaviors, and usage across layouts and components.
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.
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.
System-wide search behavior and interaction model. Defines query handling, result ranking, filtering, recents, file-type support, and integration with navigation, grids, and lists.
A spacing and layout system defining margin, padding, alignment, and vertical rhythm tokens. Ensures visual consistency, predictable layouts, and responsive adaptability.
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
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