Embedded Files
Payroll Product Redesign
Modernizing an enterprise payroll across desktop, tablet and mobile.
Case Study: Payroll Product Redesign
Project Type: Enterprise Product Redesign
Application: Proliant Payroll
Role: 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.
The Problem
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
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
Research
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
Insights
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
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
Replaced cryptic payroll terminology with plain, real world language aligned across the platform
Lower error rates
improved usability for non-expert users
Design
Visual & Interaction
Introduced a modern, consistent, visual system with clear hierarchy, states and feedback
Increased trust and clarity
Consistent experience across all pages
Login & Authentication
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
1. Information Architecture & Navigation
Simplified navigation structure
Reduced redundant menu items`
Clear signposts and onsistent page templates
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
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
Usability testing on key payroll workflows
Iterated on labeling, layout density, and navigation
Validation across device breakpoints
Iteration
Reduced steps in common payroll tasks
Improved discoverability of help and guidance
Refined table layouts for data-heavy views
Business Impact
The redesign reduced operational support costs, improved customer retention, and positioned the product for future feature expansion.
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
Outcome
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
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
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.
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.
Google Sites
Report abuse