From Friction to Flow: Redesigning the Customer Configurator for Clarity and Completion

My Role: Product Designer, Design Operations, QA Lead

Team: 2 Backend Developers, 2 Full-Stack Developers, 1 Software Intern, Junior Designer, and myself

Duration: 4 Months (Sept-Dec 2024)

Built at Exxact Corporation — a B2B high-performance computing hardware company

Context

Customer-facing product configurator used by engineers and procurement teams to spec and request high-performance computing systems

Problem

Users could browse products but consistently stalled before completing a configuration or inquiry — creating drop-off and lost leads

Solution

Redesigned the end-to-end configuration flow to surface the right information at the right step, reduce ambiguity, and create a clear path to inquiry

Impact

Turned exploration into a completable path — measurable reduction in friction at key drop-off points

From Friction to Flow: Redesigning the Customer Configurator for Clarity and Completion

My Role: Product Designer, Design Operations, QA Lead

Team: 2 Backend Developers, 2 Full-Stack Developers, 1 Software Intern, Junior Designer, and myself

Duration: 4 Months (Sept-Dec 2024)

Built at Exxact Corporation — a B2B high-performance computing hardware company

Context

Customer-facing product configurator used by engineers and procurement teams to spec and request high-performance computing systems

Problem

Users could browse products but consistently stalled before completing a configuration or inquiry — creating drop-off and lost leads

Solution

Redesigned the end-to-end configuration flow to surface the right information at the right step, reduce ambiguity, and create a clear path to inquiry

Impact

Turned exploration into a completable path — measurable reduction in friction at key drop-off points

The Problem

The Problem

The old configurator caused major friction—inconsistent feedback, unclear dependencies, and outdated visuals.

The old configurator caused major friction—inconsistent feedback, unclear dependencies, and outdated visuals.

Our Goal

Our Goal

Modernize the interface, fix usability gaps, and align the tool with our new design system to create a smoother, more confident self-service experience.

Modernize the interface, fix usability gaps, and align the tool with our new design system to create a smoother, more confident self-service experience.

Research & Key Findings

Research & Key Findings

I led the discovery phase by surveying 3 senior sales engineers and 3 active configurator users to compile a prioritized list of usability issues and requested features. I supplemented this feedback with user testing sessions and heat map analysis, which revealed both friction points and underutilized opportunities.

Issues Uncovered:

Issues Uncovered:

Confusing part dependencies + vague error messages

Confusing part dependencies + vague error messages

Missing validation feedback and unclear visual guidance

Missing validation feedback and unclear visual guidance

Accessibility issues from low contrast

Accessibility issues from low contrast

Outdated styling that broke brand consistency

Outdated styling that broke brand consistency

Video showcasing the old configurator and user interactions

My Role

My Role

I led the design phase, guiding the process from research to final prototypes. I shared user testing and heatmap insights with cross-functional stakeholders to inform decisions. Along the way, I mentored a junior designer in Figma and coordinated with our software intern to review and approve components in Storybook, while I focused on UI refinements and exploring new technical features.

I led the design phase, guiding the process from research to final prototypes. I shared user testing and heatmap insights with cross-functional stakeholders to inform decisions. Along the way, I mentored a junior designer in Figma and coordinated with our software intern to review and approve components in Storybook, while I focused on UI refinements and exploring new technical features.

Page Structure, Visual Hierarchy & Branding

Page Structure, Visual Hierarchy & Branding

Through research, I shaped the final page structure to: keep what worked, clarify quantities (fixed-quantity vs variable-quantity components), and improve accessibility

Through research, I shaped the final page structure to: keep what worked, clarify quantities (fixed-quantity vs variable-quantity components), and improve accessibility

Clarified quantity selection (fixed vs variable)

Clarified quantity selection (fixed vs variable)

Increased contrast, replaced teal with brand blue

Increased contrast, replaced teal with brand blue

Clearer category headers and grouping

Clearer category headers and grouping

Components rebuilt using our design system for long-term scalability

Components rebuilt using our design system for long-term scalability

Keep what worked: Preserved the familiar part-selection flow—testing and heatmaps showed minimal friction with the existing layout.

"The updated colors feel much easier to read. I’m glad we’re moving in this direction"

- Sales Engineer at Exxact Corporation

"The updated colors feel much easier to read. I’m glad we’re moving in this direction"

- Sales Engineer at Exxact Corporation

Interaction Enhancements

Interaction Enhancements

Added visual cues showing disabled state until prerequisites are met. Example: Users are not allowed to select a software package unless an OS is selected.

Added visual cues showing disabled state until prerequisites are met. Example: Users are not allowed to select a software package unless an OS is selected.

Added visual cues showing disabled state until prerequisites are met. Example: Users are not allowed to select a software package unless an OS is selected.

Interaction: Selecting “no thanks” in the OS category parts will showcase parts under the software category in it’s disabled state until an OS is selected

Feedback Improvements

Feedback Improvements

Added loading states for perceived speed, reducing user uncertainty during longer loading

Animation replay when submitting configurations with errors + scroll to error functionality

Error Handling

Error Handling

Improved error messages to clearly explain the issue and guide users toward solutions.

Improved error messages to clearly explain the issue and guide users toward solutions.

Old Error Message

New Error Message

Before and after of the old error message and new error message

GPU NVLink Support

GPU NVLink Support

Collaborated with sales engineers and developers to design new logic and messaging for GPU NVLink compatibility

Collaborated with sales engineers and developers to design new logic and messaging for GPU NVLink compatibility

100%

Added contextual notes and icons to clarify which GPUs support NVLink, how many are required, and when selections are incompatible without interrupting users with error states.

QA

QA

As QA Lead, I ran a month-long internal testing cycle. By creating a comprehensive checklist covering all edge cases, I identified, documented and resolved 15 critical bugs—covering data syncs, calculation logic, and spec formatting with engineers.

As QA Lead, I ran a month-long internal testing cycle. By creating a comprehensive checklist covering all edge cases, I identified, documented and resolved 15 critical bugs—covering data syncs, calculation logic, and spec formatting with engineers.

IssueSolution
GPU category ordering in emails differed from the configurator interfaceStandardized ordering across all customer touchpoints
Platform and parts information not updating correctly in customer emailsFixed data passing between configurator and email generation system
Total memory calculations were hard-coded and not updating correctlyImplemented dynamic calculations based on actual component selection
Product listing order inconsistency between builder and final displaySynchronized ordering logic across the entire configuration flow
- Memory totals displayed even when "No Thanks" option was selected - Incorrect Watts and BTU/Hr specifications in PDFs and emails - Memory dropdown quantities not reflecting minimum configuration requirements- Modified logic to only display totals for actual component selections - Implemented precise calculation and formatting for power specifications - Implemented dynamic dropdown adjustments based on system requirements
Configure buttons appearing incorrectly on the website due to partial MPN matchesImplemented exact MPN matching to ensure proper button display

Results & Impact

Results & Impact

Comparing pre- vs post-launch metrics (1 month window):

Comparing pre- vs post-launch metrics

(1 month window):

+22%

+22%

Successful completions

Successful completions

−18%

−18%

Support tickets

Support tickets

−23%

−23%

Engineering time clarifying orders

Engineering time clarifying orders

*Successful completions measured by a user's ability to fix configuration errors and submit an inquiry. Data collected via screen captures.

Project Reflection Metrics

Project Reflection Metrics

A quick look at how this project felt—measured by challenge, teamwork, and personal sanity.

A quick look at how this project felt—measured by challenge, teamwork, and personal sanity.

What I learned

What I learned

Research

Invest Upfront to Reduce Debt

Past quick fixes led to integration issues. Thorough research upfront keeps the system healthy and reduces downstream complexity.

System Simplicity

Prioritize Maintainability

Simplifying component behavior and reducing assumptions created a more scalable design system.

Collaboration

Align Early and Often

Staying closely synced with engineering and QA improved technical decisions and surfaced constraints earlier.

Quality Assurance

Clarify Testing Protocols

Hardware-based edge cases highlighted the need for clearer documentation and a better split between automated and manual QA paths.

Workflow

Build Logic First, UI Second

Earlier in the project, several components broke during integration because they were built with hard-coded text or without real data context

DESIGNED BY KATHERINE CHHAY CHEN
®2026
DESIGNED BY KATHERINE CHHAY CHEN
®2026