← Back to All Work

SEIC 3D Bike Configurator — Build Your Bike in Real Time

A web-based 3D configurator that lets customers design, visualize, and purchase custom bikes in real time.

Role

Sole Product Designer

End-to-end UX/UI, 3D interaction design, configuration flow architecture

Duration

4 months

Tools

Figma, Jira

Team

Jafee Cho Product Manager

Jerry Liao Technical Manager

Abner Wang Front-End Developer

Peggy Chuang 3D Designer

Product by

Links Live Site

The Challenge

When 100+ combinations need to feel like three simple choices

SEIC sells customizable bikes, but their online presence relied on static product photography — customers had to imagine how different color and component combinations would look. The deeper challenge I discovered during research was the staggering complexity of accessory compatibility. Understanding how each accessory relates to others — which can combine and which conflict — became the biggest design problem. Some wheel types only fit certain frames; specific handlebars are incompatible with particular accessory packages. I had to design a system that blocks users from selecting conflicting combinations while clearly communicating why, without making the experience feel restrictive.

Another critical challenge I identified early was visibility of small accessories in the 3D viewer. When a user adds a bell or a bottle cage to a full bike model, the change is barely noticeable at the default zoom level. I solved this by designing automatic camera orbit behavior — when a user selects a small accessory, the viewport smoothly transitions to the optimal viewing angle where that specific part is most visible. This proactive camera movement ensures users always get visual confirmation that their selection registered, preventing confusion and repeat clicks.

The SEIC configurator showing a customized bike in the 3D viewport

The configurator interface for selecting accessories from the side panel — real-time 3D updates show each addition instantly on the bike model.

Left: Competitor analysis to evaluate the pros and cons of existing 3D configuration experiences. Right: Deep dive into the product catalog — mapping where each accessory attaches and what combinations are valid.

Process

Making customization feel like play

Configuration Architecture

I mapped the full decision tree: which components affect which, what constraints exist (certain wheels only fit certain frames), and what order of choices minimizes dead ends. The most time-intensive research was understanding the accessory compatibility matrix — documenting every valid and invalid combination across frames, wheels, handlebars, and accessories. I designed a sequential flow that starts with the highest-impact choice (frame style) and progressively reveals options — each selection narrows the next set of possibilities, so users never face an overwhelming wall of options.

3D Interaction Design

Working closely with the 3D designer, I defined how the viewport responds to user actions: orbit controls for examining the bike from any angle, smooth transitions when components swap, and material changes that update in real time. I designed the automatic camera orbit behavior for small accessories — when a user adds a subtle part like a bottle cage, the camera smoothly repositions to the angle where that accessory is most visible. This prevents the "did it work?" confusion that plagues most 3D configurators.

UI/UX for Complex Choices

The interface balances information density with clarity. A persistent sidebar shows the current configuration summary with running price, while the main viewport gives the bike maximum screen real estate. I designed three distinct accessory states: selected (active highlight), conflicted (warning with explanation of why two parts can't coexist), and a future phase for color variations. Color selection uses visual swatches rather than text labels. Component options show thumbnail previews so users can compare before committing. The dynamic price breakdown updates with every change, maintaining full cost transparency throughout the experience.

Responsive & Embeddable

SEIC needed to embed the configurator directly on their website. I designed it as a self-contained, responsive module that adapts from desktop (full 3D viewport with sidebar controls) to mobile (stacked layout with bottom-sheet controls and simplified orbit). The configurator loads progressively — the 3D model streams in while the UI is immediately interactive, preventing the blank-screen problem common in WebGL applications.

Detailed interface features and function — the complete configuration flow from frame selection to final summary with real-time pricing.

Left: Accessory states — selected, conflicted, and future color variation phases. Right: Mobile-optimized version with stacked layout for smaller screens.

Key Decisions

Simplicity from complexity

UX Strategy 01

Sequential over simultaneous configuration

Rather than showing all customization options at once (a common configurator mistake), I designed a guided sequence: frame first, then wheels, handlebars, accessories, and finally colors. Each step constrains the next, so users only see compatible options. This reduced decision paralysis and made the 100+ possible combinations feel manageable.

Interaction Design 02

3D viewport as the primary feedback mechanism

Every selection instantly updates the 3D model — no confirmation dialogs, no preview thumbnails that look different from the final result. The bike in the viewport IS the product. This direct manipulation approach builds purchase confidence because what you see is literally what you get.

Technical 03

Progressive 3D loading for instant interactivity

WebGL 3D configurators typically show a loading spinner for 5–10 seconds before anything appears. I worked with the front-end developer to implement progressive loading: the UI renders immediately with a low-poly placeholder, then the full model streams in seamlessly. Users can start browsing options before the 3D model fully loads, eliminating the dead wait.

Impact & Results

From static photos to interactive product design

63s

Average user session time — strong engagement for a product configurator

Embedded

Live on SEIC website — client promoting and driving traffic directly

Expanding

Client planning additional bike models and expanded customization options

The SEIC 3D Bike Configurator launched as an embeddable module on the client website, replacing static product photography with an interactive design experience. SEIC has integrated the configurator into their sales and promotional workflows, and the project has led to expansion discussions for additional bike models and deeper customization options in future iterations.

This project reinforced that the best configurator UX is invisible — users should feel like they are designing a bike, not operating a configurator. The sequential flow and instant 3D feedback created an experience that felt more like play than shopping. The 63-second average session shows strong engagement, but the real validation came from the client: they are investing in expanding the tool because it changed how their customers interact with the brand online.