Rawfit: Women's sneakers configurator
Client: Rawfit Year: 2023–2024 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. Their product has two models and a deep range of color and material combinations. On a 2D catalogue, the depth doesn't read. Customers see four photos and assume there are four options, missing the actual twenty-plus configurations available.
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
- Color swap. Five color options per model, applied in real time with smooth transitions
- Material swap. Three material options per model (smooth leather, suede, canvas) with accurate PBR treatment
- 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.
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 hello@cclemang.com.
