Customisable Letterman Jacket – 2D & 3D Product Design
Apparel & E-commerce
2D & 3D Product Design
Customisable Letterman Jacket — 2D & 3D Product Design
VCL International developed a 2D/3D letterman jacket customiser for an apparel brand, enabling users to choose colours, materials, and patch placement across 14 customisable zones with real-time 3D visualisation. The tool kept pricing in sync with every selection, generated production-ready specs for manufacturing, and gave the brand's team a way to manage models, materials, and pricing without touching code — delivering a design-to-manufacture workflow that works on both desktop and mobile.
The client
A direct-to-consumer apparel brand (name confidential) building a made-to-order letterman jacket line. Customers pick a body colour, sleeve material, and ribbing, then place patches and embroidery across defined zones on the jacket, before the design goes into production.
The objective
Build an interactive 3D configurator that lets customers customise a letterman jacket materials, colours, and patch placement with real-time visual feedback, so what they see on screen matches what arrives at their door. The tool needed to reduce the guesswork that usually causes cart abandonment on made-to-order apparel, and hand off clean, production-ready specs to the brand's manufacturing side.
The challenge
- Visualisation gap. Customers hesitate to commit to a custom jacket they can't properly see flat mockups weren't enough to make a herringbone sleeve or a wool body read as materials rather than colour swatches.
- Zone confusion. With 14 placement zones (chest, shoulders, above/below elbow, sleeve ends, pockets, collar, back), a plain list of options left customers unsure exactly where "above left elbow" would land on the finished jacket.
- Pricing accuracy. Every material and patch combination had to price correctly in real time, with zero drift between what's shown in the configurator and what's charged at checkout.
- Production hand-off. The configurator's output needed to translate directly into specs the manufacturing side could use not just a screenshot, but accurate placement and material data.
- Performance on mobile. A 3D viewer this detailed is easy to make heavy; it needed to stay smooth on mid-range phones, where most of the brand's traffic was coming from.
- Non-technical catalog management. The brand's own team needed to add new materials, colourways, and zones each season without filing an engineering ticket every time.
Strategy & implementation
1. Design & asset preparation
- Built a modular 3D jacket model body, sleeves, cuffs, collar, and trim as separate segments so materials and colours could swap independently without re-modelling the whole garment.
- Mapped all 14 patch zones (right/left chest, right/left shoulder, above/below each elbow, sleeve ends, pockets, collar, back) to both the 3D mesh and a set of flat reference thumbnails.
- Defined the options schema: body colours, sleeve materials, ribbing/trim colours, and per-zone patch placement, sizing, and text.
2. Front-end configurator
- Zone picker: a grid of small jacket diagrams, one per zone, with the exact placement area highlighted on each thumbnail so customers recognise "above right elbow" instead of guessing at it from a label.
- 3D viewer: drag-to-rotate 360° view that re-renders live as materials, colours, and patches change, built to hold a steady frame rate on mid-range devices, not just desktop.
- Live pricing: the "Current Design" price updates instantly with every material or patch change, pulling from the same pricing logic used at checkout so the number never has to be corrected later.
- Save & resume: a bookmark control that lets a customer save a design mid-session, since most people were comparing two or three variations before committing to one.
- Add to Cart / View Cart: the finished design flows straight into checkout with the full configuration attached, no re-entry of choices.
3. Back-end & production integration
- Every configuration materials, colours, zone selections, uploaded artwork saves as structured data tied to the order.
- That structured data maps directly to production specs (material codes, zone coordinates, patch sizing) so the manufacturing side isn't reverse-engineering a screenshot.
- An admin panel lets the brand's own team add new base jackets, materials, colourways, and pricing rules without an engineer in the loop.
4. Performance & deployment
- Compressed textures and optimised the WebGL pipeline so the model loads fast and stays smooth while rotating, even on older phones.
- Cross-browser and cross-device testing across desktop, tablet, and mobile, since the configurator has to work identically wherever a customer opens it.
- Embedded directly into the brand's storefront so the path from "start customising" to "in cart" never leaves the site.
What we built
Full 3D customiser
Material swaps, colour changes, 14-zone patch placement, and live price updates in one integrated tool.
360° viewer
Drag-to-rotate viewer with material-accurate rendering texture and light response, not flat colour blocks.
Save/bookmark control
Lets customers return to a design later instead of losing progress mid-decision.
Cart integration
Carries the full configuration through to checkout with no re-entry of choices.
Admin dashboard
Manages base models, materials, zones, and pricing without engineering involvement.
Responsive layout
Holds up across desktop, tablet, and mobile with consistent performance.
Results & impact
We're not going to attach invented numbers to this one the honest version is that outcomes like these depend on the client's own traffic and conversion data, which we'd cite directly once shared. What we can say from having built and shipped it:
- Replacing the flat zone list with the visual picker was the single change customers reacted to most directly in early feedback "above left elbow" stopped being a guess.
- Because pricing and checkout pull from the same source, there's been no instance of a configurator total not matching the cart total.
- The admin catalog has let the brand's team ship new materials and colourways each season without opening an engineering ticket.
- The build holds a steady frame rate on mid-range Android devices, which was the actual bar we were optimising against, not just desktop demos.
Key takeaways
Visual customisation earns trust.
Seeing the actual weave of a fabric or the real position of a patch does more for confidence than a well-written description ever will.
Modular beats monolithic.
Treating the jacket as independent segments (body, sleeves, trim) means new material and colour combinations don't multiply asset work.
Performance is a feature, not a footnote.
A 3D configurator that lags on the phone most customers are using loses the sale it was built to win.
The hand-off is the hard part.
A configurator that only visualises, without feeding clean data into production, solves half the problem.
Give the brand control.
If every new colourway needs an engineer, the tool becomes a bottleneck instead of a selling point the admin layer is what keeps it usable long after launch.
VCL International Full-stack platform and product engineering for apparel, healthcare, and e-commerce brands building tools their customers actually use.