Rawfit: Women's sneakers configurator

Client: Rawfit Services: Product configurator, 3D asset pipeline, E-commerce integration Duration: 8 weeks Tech: Three.js, Next.js, custom material pipeline

The problem

Rawfit is a women's premium sneakers brand. Two flagship silhouettes, a deep range of colorway and material combinations — easily twenty-plus configurations per model. On a flat 2D catalogue, that depth collapses. A customer sees four swatches and assumes there are four shoes.

The request: a configurator for their two flagship models where customers can pick color, pick material, see the result live, and capture their configuration as an order inquiry.

It needed to feel like a brand moment, not a utilitarian SKU-picker, and it needed to work on mobile, because Rawfit's traffic is predominantly mobile.

What we built

A browser-based configurator with a premium aesthetic, real-time variant swapping, and order capture.

• Two product models. Each fully configurable
• Colorway swap. Four production colorways per silhouette (rust, blue-grey, sand, sage), applied live with a sub-second transition
• Material swap. Three material treatments per silhouette — smooth leather, suede, and canvas — each with its own PBR build, not a roughness tweak
• Rotation and zoom. Orbit controls with framing that keeps the shoe centered at any angle
• Mobile-first UI. Touch-optimized selector, bottom-aligned controls, landscape-safe framing
• Screenshot capture. Users can save or share their configuration
• Order capture. Name, email, selected configuration, sent to Rawfit's CRM

How we built it

Weeks 1–2. Kickoff, product decision, moodboard. Rawfit supplied CAD; we aligned on the exact two models and narrowed the variant set to what was actually in production.

Weeks 3–4. 3D model build from CAD. Material development. Smooth leather, suede, and canvas each required distinct PBR treatment to feel right.

Weeks 5–6. Configurator UI. Variant selector, orbit controls, screenshot capture, mobile layout. First client review at end of week 6.

Weeks 7–8. Order capture integration, CRM hand-off, launch.

What it changed

The configurator became Rawfit's default product-page experience for the two configured models. Conversions on configured SKUs rose meaningfully above unconfigured SKUs in the same category.

What we learned

Material accuracy is the product. The first build had three materials that technically differed (different roughness values, different normal maps) but read as "roughly the same shoe in three slightly different tones." We spent an extra week getting the three materials visually distinct. That week was the single most-valuable week of the project. You can see it in the four colorways on the configurator — rust, blue-grey, sand, sage — each one reads as a different shoe, not the same shoe tinted.

Mobile landscape is a real use case. Desktop traffic is a minority; mobile portrait is the majority; mobile landscape is small but critical. It's how customers show the shoe to a friend on a coffee-shop table. We engineered the framing to survive portrait/landscape rotation without distortion. Small detail, frequently-used.

Order capture beats checkout integration for premium custom. Rawfit considered full cart integration but opted for an inquiry-form hand-off instead. Custom shoe orders need a human touch on the Rawfit side (confirming sizing, confirming color accuracy on the specific leather batch). A cart flow would have created more returns; the inquiry flow creates more satisfied customers.

Stack

• Runtime: Three.js with React Three Fiber
• UI: Next.js App Router, Tailwind, Framer Motion for variant transitions
• Materials: Custom PBR materials built in Blender, exported via GLTF with PBR extensions
• Asset weight: ~4 MB per model, 60 fps on iPhone 12+
• Order capture: custom Node endpoint → Rawfit CRM via API
• Hosting: Vercel + Cloudflare for asset delivery

Want a configurator for your product?

The pattern applies to any product with real variant depth. Footwear, fashion, jewelry, small appliances, furniture, accessories. The Configurator Studio Sprint productized offer ($18K, 4–6 weeks) ships single-product variant configurators on a fixed timeline.

Or send us a two-sentence email at info@cclemang.com.

Back to all work →