Motorcycle Customization Platform
Custom SVG parsing system for real-time motorcycle customization preview with a design-verification flow.
07.2020 — 12.2020Developer.
React.jsSVGJavaScript
What I did
- Built a custom SVG parsing system that renders a real-time preview as customers customize their motorcycle.
- Implemented a design-verification flow so customers confirm their design before completing an order.
The problem
Backyard Design sells custom motorcycle graphics, and customers were ordering designs they could only imagine: pick colors and options, hope the printed result matches the picture in your head. Mismatched expectations meant support work and cancelled orders.
My approach
- Real-time SVG preview — I built a custom SVG parsing system in React.js that renders the customer's motorcycle live as they customize it: part templates are parsed into layered, addressable regions, and every color and option choice updates the preview instantly.
- Design verification — I added an explicit verification step before checkout, where the customer confirms the exact rendered design they're buying. The confirmed render travels with the order, so production and customer are looking at the same picture.
Challenges
- SVGs drawn for print, not for code — the source files were designer artifacts, not structured data. The parser had to identify and normalize customizable regions across many different template files reliably enough to drive a purchase decision.
Outcome
The live preview plus verification flow cut order cancellations by 25% — customers buy what they can already see.