UX Harmonization

Problem

After multiple acquisitions, our suite felt disjointed to customers and prospects, who described it as a “Frankenstein experience,” and Sales had to choreograph demos across browser tabs to simulate a cohesive platform. The inconsistency was amplified because most customers used more than one application, and the products also sat on different front-end stacks.

Objective

Create a unified, harmonized user experience across all products to: - Establish a platform-level visual and interaction identity - Reduce friction during sales and customer onboarding - Drive internal alignment across UX, PM, and Engineering 

Strategy

1. Align the Organization

   • Shared initiative broadly during New Employee onboarding (Functional Orientations) and company-wide meetings 

   • Developed decks and messaging using car brand metaphors to communicate the importance of consistent, yet contextual, UX (e.g. Toyota Camry vs. Toyota Sienna vs BMW vs BYD) 

   • Built momentum through empathy-driven storytelling and stakeholder buy-in 

2. UX Audit + Best-of Selection 

   • Used Pendo analytics to prioritize high-impact screens 

   • Audited each product to identify best-in-class patterns, even if minor (e.g., filters, notifications) 

   • Highlighted these wins in shared artifacts so all teams saw themselves in the new vision 

3. Prototyping & Feedback Loops 

   • Created hero-task prototypes across modules 

   • Gathered feedback from SMEs (business consultants, training) and real users 

   • Repeated iterative feedback loops until designs reached alignment and clarity

Implementation

We established a design system with shared standards for colors, typography, headers, product language, and global navigation. Guided by user feedback, we folded in targeted usability upgrades, creating two-for-one wins where visual unification also removed friction in key tasks.

For integration, we provided three adoption paths. Native products consumed a styled, fully documented React component library built in partnership with Front-End Engineering. Legacy products used SASS and CSS overrides to harmonize Bootstrap, jQuery, and vanilla stacks. As the portfolio matured, we introduced Web Components so the same patterns could run across frameworks, improving scalability and reducing rework.

What changed for product teams & front end developers

Single Source of Truth

Visual tokens + components with documented variations and coded snippets.

Framework-agnostic delivery

Web Components enabled shared UX across React and legacy stacks without wholesale rewrites. (Trade-offs documented—Shadow DOM, styling, testing.)

Clear shipment slices

Teams implemented harmonization in small, prioritized chunks (headers → tables → filters), aligned to each squad’s release cadence.

Feedback loops

SMEs + real users reviewed hero-task prototypes; we iterated until patterns were clear and adopted. 84 real end-user research engagements to inform harmonization & patterns.

Results

• Front-End Tech Debt Cut: Removed 55k lines for a leaner, faster stack.

• Sales & market credibility: Consistent cross-product flows improved demo confidence and platform perception.

• Operating leverage: A reusable harmonization playbook + component strategy scaled across legacy and new products.

• Sustained adoption: Governance, docs, and extension guidance reduced “special-case” drift.

• Reinforced UX’s strategic role across the company