Sakal Paul

Works

CV

spaul.sage@gmail.com

Email copied!

Sakal Paul

Works

CV

spaul.sage@gmail.com

Email copied!

Hewlett Packard Enterprise

HPE CPQ Platform: Design System Evolution & Design Engineering

About the project

Hewlett Packard Enterprise (HPE) is a global enterprise technology leader that provides servers, storage, networking, and cloud solutions to businesses worldwide. At the heart of HPE's sales operations lies their Configure, Price, and Quote (CPQ) platform—a mission-critical system used by thousands of sales representatives, partners, and operations teams to configure complex technology solutions, generate accurate pricing, and create professional quotes for customers.

ROLE

Staff Designer

TIMELINE

2019-2021

LOCATION

Bangalore - USA

Business Target KPIs - 2019

At the project outset, HPE leadership established several key performance indicators to measure success

20-25%

Quote Creation
Time

Increase sales team productivity and responsiveness

8-10%

Quote
Accuracy

Reduce revision cycles and operational overhead

30%

Training Time for
New Users

Accelerate onboarding and reduce training costs

15-20%

Support
Ticket Volume

Lower support costs and improve user confidence

Outcome Data After Implementation - 2021

The redesigned CPQ platform and its underlying design system not only met but exceeded most of the target KPIs

28%
Quote Creation Time

Reduced from 47 minutes to 34 minutes on average

15%
Quote Accuracy

Increased from 82% to 94.3% first-time accuracy

45%
Training Time for New Users

Reduced from 4 days to 2.2 days for new sales representatives

23%
Support Ticket Volume

Decreased by 23% for UI-related issues

How we achived?

Identifying

Identifying

Project Challenges

The CPQ platform suffered from critical usability issues, including an inconsistent interface that prioritized technical complexity over user experience.

The system's fragmented design and growing technical debt were hindering its effectiveness and maintainability.

12,000

global users

$15 billion

in annual quote value

  • Streamline the quoting workflow

  • Unify the design language

  • Improve technical architecture

  • Enhance data visualization

  • Reduce training requirements

  • Sales Representatives
  • Partners
  • Sales Managers
  • Operations Users

The CPQ platform served four distinct user groups, each with specific needs and usage patterns

User Base & Core Needs

HPE employees who worked directly with customers and needed to quickly generate accurate quotes that reflected current pricing, promotions, and configurations. They prioritized speed, accuracy, and ease of use.

  • Sales Representatives

Third-party vendors and authorized dealers who sold HPE products, often in regions without direct HPE presence. They required similar capabilities to Sales Reps but with additional partner-specific features and pricing models.

  • Partners

Users with focused access primarily for discount approval workflows. They needed clear visibility into quote details and pricing justifications to make informed decisions quickly.

  • Sales Managers

Super users with broad system access who could finalize quotes, convert quotes to contracts, and provide assistance to other users. These users required comprehensive visibility into all system aspects and powerful administrative tools.

  • Operations Users

The CPQ platform served four distinct user groups, each with specific needs and usage patterns

Understanding these diverse user groups and their sometimes competing needs was essential for creating a system that worked for everyone while maintaining efficient workflows.

User Base & Core Needs

  • Sales Representatives
  • Partners
  • Sales Managers
  • Operations Users

The CPQ platform served four distinct user groups, each with specific needs and usage patterns

User Base & Core Needs

Role & Responsibilities

I served as the Lead Design System Designer and Design Engineering Liaison for the CPQ platform redesign. My responsibilities included

  • Design System Leadership
  • Design-Engineering Collaboration
  • Workflow Optimization
  • Design Governance
  • Stakeholder Management

Communicated with Cross-Functional Teams

3

Product line
managers

6

Front-end
Developers

2

Back-end
Developers

1

Business
Analytics

I served as the Lead Design System Designer and Design Engineering Liaison for the CPQ platform redesign. My responsibilities included

  • Design System Leadership

Auditing the existing UI components, establishing a cohesive design language, and creating a scalable component library that would become the foundation for the entire platform

  • Design-Engineering Collaboration

Serving as the primary bridge between the design and development teams, translating design intent into technical specifications, and ensuring design fidelity in implementation

  • Workflow Optimization

Analyzing user journeys and suggesting UX improvements to streamline the quote creation process

  • Design Governance

Establishing standards, guidelines, and best practices for maintaining design consistency

  • Stakeholder Management

Communicating design decisions to executive stakeholders and gathering feedback from multiple business units

Role & Responsibilities

Communicated with
Cross-Functional Teams

3

Product line
managers

6

Front-end
Developers

2

Back-end
Developers

1

Business
Analytics

Role & Responsibilities

I served as the Lead Design System Designer and Design Engineering Liaison for the CPQ platform redesign. My responsibilities included

  • Design System Leadership
  • Design-Engineering Collaboration
  • Workflow Optimization
  • Design Governance
  • Stakeholder Management

Communicated with
Cross-Functional Teams

3

Product line
managers

6

Front-end
Developers

2

Back-end
Developers

1

Business
Analytics

Design Process & Framework

The URIIV Process Framework

For the HPE CPQ platform redesign, a structured six-phase process was implemented to address the complexity of enterprise software while maintaining focus on user needs. This process—Understand, Recreate, Identify, Engineering, Implement, Validate (URIIV)—provided a clear framework for transforming the existing system.

Read in details about all steps
Read in details about all steps
Read in details about all steps

Key User Journey Improvements Based on Usability Principles

We transformed critical user workflows by applying targeted usability principles, simplifying complex processes and creating more intuitive interfaces that significantly improved user experience and productivity.

Quote Creation Process

Simplified the complex 15+ screen workflow with clear progress indicators, smart defaults, and autosave to eliminate user confusion and data loss.

Product Configuration

Transformed the configuration experience by replacing technical jargon with user-friendly terms and providing intuitive, visual dependency mapping.

Approval Workflows

Redesigned approval interfaces to present comprehensive decision information, streamline one-click approvals, and enhance contextual understanding for sales managers.

We transformed critical user workflows by applying targeted usability principles, simplifying complex processes and creating more intuitive interfaces that significantly improved user experience and productivity.

Quote Creation Process

Before: The quote creation process required users to navigate through 15+ screens with frequent backtracking and no clear progress indication. Users reported frequent data loss and confusion about next steps.

After: The process was redesigned to follow a logical sequence with clear status indicators, implementing:

  • A persistent progress indicator showing current position in the workflow (System Visibility)

  • Smart defaults based on customer history and common configurations (Recognition vs. Recall)

  • Autosave functionality with clear recovery options (User Control & Freedom)

  • In-context validation to catch errors before submission (Error Prevention)

Product Configuration

Before: Product configuration was a major pain point, with confusing technical terminology and hidden dependencies between options that often led to invalid configurations.

After: The configuration experience was transformed by:

  • Replacing technical jargon with user-friendly terms (Match System to Real World)

  • Visualizing dependencies between configuration options (Recognition vs. Recall)

  • Providing real-time feedback on configuration validity (System Visibility)

  • Implementing guided configuration paths for common scenarios (Help & Documentation)

Approval Workflows

Before: Sales managers struggled with approval workflows, reporting that they often lacked sufficient context to make informed decisions, resulting in approval delays.

After: Approval interfaces were redesigned to:

  • Present all necessary decision information in a single view (Minimize Memory Load)

  • Highlight key factors affecting the approval decision (Aesthetic & Minimalist Design)

  • Provide one-click approval options for standard cases (Flexibility & Efficiency)

  • Include clear justification fields and history for accountability (Error Prevention)

Key User Journey Improvements
Based on Usability Principles

Quote Creation Process

Simplified the complex 15+ screen workflow with clear progress indicators, smart defaults, and autosave to eliminate user confusion and data loss.

Product Configuration

Transformed the configuration experience by replacing technical jargon with user-friendly terms and providing intuitive, visual dependency mapping.

Approval Workflows

Redesigned approval interfaces to present comprehensive decision information, streamline one-click approvals, and enhance contextual understanding for sales managers.

Key User Journey Improvements
Based on Usability Principles

We transformed critical user workflows by applying targeted usability principles, simplifying complex processes and creating more intuitive interfaces that significantly improved user experience and productivity.

Design System Work

Design System Work

The Design System Evolution Process

The Design System Evolution Process began with a comprehensive audit, followed by pattern rationalization, principle establishment, component design, and implementation planning, creating a cohesive visual language across the platform.

Comprehensive UI Audit

The process began with a thorough inventory of existing interface elements, documenting every button style, form control, data table, modal, and navigation pattern across the platform.

Pattern Analysis & Rationalization

Working closely with the product team, usage patterns were analyzed to understand which components were most critical and which could be consolidated or removed. This led to the identification of approximately 40 core components that would form the foundation of the design system.

Design Principles Establishment

Our design approach centered on user-centric principles that transformed the CPQ platform. By prioritizing clear communication, error prevention, and intuitive interfaces, we developed a framework that addressed critical usability challenges and enhanced user experience across different workflow scenarios.

Component Design & Documentation

Using Figma, a comprehensive component library was created, starting with foundational elements (typography, color, spacing, grid systems) and building up to complex interactive components. Each component was:

  • Designed with variants to handle different states and use cases

  • Documented thoroughly with usage guidelines and implementation notes

  • Reviewed by stakeholders including accessibility experts and engineers

  • Tested with users when appropriate

Implementation & Governance

To ensure the design system's adoption and longevity:

  • A detailed transition plan was created for migration

  • Governance processes were established to manage the design system's evolution, creating a structured approach to component updates.

  • Weekly design system review meetings were established

  • Communication channels were created for reporting issues and requesting enhancements

Collaboration with Cross-Functional Teams

The design system was not developed in isolation. Collaborative workshops were facilitated with product managers to ensure it supported business goals, with engineers to validate technical feasibility, and with other designers to ensure it met their creative needs.

A notable innovation was the "Component Clinics"—weekly sessions where designers and developers could discuss specific components, resolve implementation challenges, and align on interaction details. These sessions proved invaluable for building shared understanding and ownership of the design system.

Design System Maturity Model

A strategic framework designed to systematically evolve our design system from foundational components to a sophisticated, self-improving ecosystem. The model provides a clear roadmap for progressive development, ensuring continuous improvement and stakeholder alignment.

1

2

3

4

5

Level

Foundation

Operational

Integrated

Optimized

Evolving

Description

Core tokens,
basic components

Essential workflows,
documentation

Cross-component patterns,
developer tools

Advanced components,
analytics integration

Self-improving,
community-driven

Characteristics

Establish design
language

Support key user
journeys

Improve efficiency

Enhance user
performance

Long-term
sustainability

Goals

Impact of Design system

The new design engineering workflow delivered significant benefits. Improved design consistency rating from 3.2/5 to 4.7/5 in internal developer surveys

30%

70%

Increased Component Reuse
(80% improvement)

60%

90%

Design Consistency Score improved on automated UI audits

30%

Improved Page Load Times on average across key workflows

WCAG 2.1 compliance improved focusing on AA-level standards across all core user journeys

60%

Key gains were made in keyboard navigation

96%

color contrast and screen reader compatibility

Design Engineering

Design Engineering

Design Token System

A design token approach was implemented that codified design decisions into platform-agnostic variables that could be translated to any technology stack. This included:

  • Semantic Tokens: Named according to their purpose (e.g., color-primary, spacing-medium)

  • Alias Tokens: Technology-specific implementations of semantic tokens

  • Automated Export: Tools to sync tokens between Figma and code repositories

This system allowed for global design changes to be made efficiently and maintain consistency across technologies.

A design token approach was implemented that codified design decisions into platform-agnostic variables that could be translated to any technology stack. This included:

  • Semantic Tokens: Named according to their purpose (e.g., color-primary, spacing-medium)

  • Alias Tokens: Technology-specific implementations of semantic tokens

  • Automated Export: Tools to sync tokens between Figma and code repositories

This system allowed for global design changes to be made efficiently and maintain consistency across technologies.

A design token approach was implemented that codified design decisions into platform-agnostic variables that could be translated to any technology stack. This included:

  • Semantic Tokens: Named according to their purpose (e.g., color-primary, spacing-medium)

  • Alias Tokens: Technology-specific implementations of semantic tokens

  • Automated Export: Tools to sync tokens between Figma and code repositories

This system allowed for global design changes to be made efficiently and maintain consistency across technologies.

Component Documentation & Specifications

For each component, comprehensive specifications were created that included:

  • Responsive behavior rules

  • Interaction states

  • Animation specifications

  • Accessibility requirements

  • Edge case handling

These specifications were maintained in a centralized system accessible to both designers and developers, ensuring everyone worked from the same information.

Prototype-to-Production Workflow

To validate complex interactions before development, interactive prototypes were built using Figma's advanced prototyping features. For particularly complex components, code-based prototypes were created that developers could reference directly.

Technical Implementation Collaboration

For each component, comprehensive specifications were created that included

Responsive behavior rules

Interaction states

Animation specifications

Accessibility requirements

Edge case handling

These specifications were maintained in a centralized system accessible to both designers and developers, ensuring everyone worked from the same information.

Impact on Development Process

Impact on Development Process

The new design engineering workflow delivered significant benefits. Improved design consistency rating from 3.2/5 to 4.7/5 in internal developer surveys

Reduction in design implementation questions from developers

Faster implementation time for new features

Decrease in UI-related bug reports after launch

In the end

In the end

Key Takeaways

This project reinforced several important principles and provided valuable lessons

  • Design systems for complex enterprise applications require deep domain understanding

  • Cross-functional collaboration is the foundation of successful design systems.

  • Quantifying design impact in business terms increases design influence

  • Governance is as important as design

  • Enterprise UX requires balancing user needs with technical constraints

  • Usability heuristics provide a powerful framework for evaluation

This project reinforced several important principles and provided valuable lessons

  • Design systems for complex enterprise applications require deep domain understanding

Immersion in the sales and quoting processes was essential for creating meaningful improvements.

  • Cross-functional collaboration is the foundation of successful design systems.

By involving engineers early and often, solutions were created that were both beautiful and implementable.

  • Quantifying design impact in business terms increases design influence

By measuring work against metrics like quote creation time and accuracy, design's strategic value was demonstrated.

  • Governance is as important as design

Creating sustainable processes for maintaining and evolving the design system ensured its long-term success.

  • Enterprise UX requires balancing user needs with technical constraints

Finding creative solutions within the limitations of legacy systems is a critical skill for enterprise design work.

  • Usability heuristics provide a powerful framework for evaluation

Using established principles as a guide helped identify and address the most critical usability issues.

Key Takeaways

Key Takeaways

This project reinforced several important principles and provided valuable lessons

  • Design systems for complex enterprise applications require deep domain understanding

  • Cross-functional collaboration is the foundation of successful design systems.

  • Quantifying design impact in business terms increases design influence

  • Governance is as important as design

  • Enterprise UX requires balancing user needs with technical constraints

  • Usability heuristics provide a powerful framework for evaluation

"The new design system has been transformative. We deliver features faster, with fewer bugs and more consistency. Close design-engineering collaboration has removed the ‘handoff’ friction that used to slow us down." — Director of Application Development

"This project shows how thoughtful design drives real business value. The CPQ redesign’s ROI won over even skeptical execs. The design team’s translation of goals into measurable UX gains has set a new bar for enterprise projects at HPE." — Chief Information Officer

Future Approach

The project fundamentally transformed our approach to design system work and enterprise UX. We now prioritize deep user understanding, foster closer engineering collaboration, and view design systems as strategic business tools. Our methodology now emphasizes measurement, governance, and the ability to translate complex requirements into intuitive experiences that drive real business value.

This project has significantly shaped the approach to design system work and enterprise UX

  • Starting every project with a deeper focus on understanding the distinct needs of different user groups

  • Building stronger relationships with engineering teams earlier in the process

  • Prioritizing measurement frameworks from the beginning of projects

  • Placing greater emphasis on governance and sustainability planning

  • Becoming more adept at translating complex business requirements into intuitive user experiences

  • Approaching design systems as business tools rather than just design artifacts


The HPE CPQ project exemplifies how thoughtful design systems work can transform complex enterprise applications, delivering substantial business value while improving the user experience. By bridging the gap between design and engineering and focusing on the specific needs of diverse users, a solution was created that worked for all stakeholders and established a foundation for continued evolution of this business-critical platform.

Future Approach

Future Approach

The project fundamentally transformed our approach to design system work and enterprise UX. We now prioritize deep user understanding, foster closer engineering collaboration, and view design systems as strategic business tools. Our methodology now emphasizes measurement, governance, and the ability to translate complex requirements into intuitive experiences that drive real business value.