Streamlining the B2B Cycle
Unifying the premium B2C rider experience with the high-density functional requirements of global retailers.
Role
UX/UI Designer
Timeline
6 Months
Sector
B2B E-commerce
Focus
PLP & PDP Logic
The Problem
The Specialized B2B platform lacked the "S-Works" premium feel. It was an information-heavy tool that created a cognitive disconnect for retailers. I was tasked with streamlining the B2B interface to match the high-end B2C experience while preserving the density needed for professional inventory management.
The Strategy
A "Hybrid UX" strategy: bringing B2C visual layouts into B2B. We modernized the PLP with a Grid View option and integrated technical schematics and service parts directly into a unified PDP layout, ensuring brand consistency and tool efficiency.
The Hybrid Product List Page
The main challenge was introducing a **Grid View** for visual discovery without alienating veterans who rely on the **List View**. I designed a seamless toggle that maintains data density while adding the premium "Rider-facing" visual polish.
Grid View: Optimized for visual recognition and apparel discovery.
List View: Maintained for high-density SKU management and speed.
Retailer-First Features: Integrated B2B-specific filters like "In-Stock Only" and "Show UPC" directly into the sidebar to facilitate rapid stock checks for dealers.
B2C Layout, B2B Functionality
The new PDP uses shared components from the B2C site for product imagery and titles, ensuring brand unity. However, it incorporates a specialized B2B panel for quantities and technical specs.
"Quick Add" Side Panel
A versatile side panel that works as a slide-out in PLP or fixed on PDP, handling bulk quantities and localized pricing dynamically.
Service Technical Tabs
Integrated tabs for Service Parts and Bike Information, bringing technical data into the primary purchase journey.
Interactive Service Parts Finder
For repair and maintenance, I focused on the integration of the 3D Service Product Finder. Mechanics can orbit, zoom, and select hotspots to identify and order specific repair components with surgical precision.
Service PDP: 3D interactive model with direct-to-cart hotspots.
Collaboration Under Leadership
Midway through the project, the company hired a new CDO with a strong aesthetic vision. I collaborated with Senior Designer Bartek to align my initial UX frameworks with the new leadership's direction, ensuring a robust handoff for the final production iterations.
Shared Design Language
Using B2C components in the B2B portal wasn't just about looks—it was about system efficiency. We created a shared library that allowed teams to update global styles once and see them reflect across all rider and retailer touchpoints.
#EE2724
Brand Red
DIN Pro
Typography
Grid/List
Hybrid Logic
Premium
Aesthetics
Project Impact
Unified
Brand Identity
Created a seamless visual transition for retailers who are also riders.
50%
Shared Components
Reduction in dev overhead through shared B2C/B2B libraries.
Enhanced
Tool Efficiency
Introduction of grid layouts without sacrificing list-view speed.