Design a Real-Time 3D Bag Configurator for Milan Brand
Overview
What this challenge is about.
Design a Real-Time 3D Bag Configurator for Milan Brand. Intermediate challenge in design. Designing real products under real constraints, earn a blockchain-v...
The Brief
What you'll do, and what you'll demonstrate.
Design how to build a Three.js bag configurator that renders convincing leather and metal, loads in under 2 seconds on mid-range mobile, and wires color, hardware, and monogram choices into the existing cart.
This is not a design exercise. It is the work a product designer does between a brief and a shipped interface. That distinction matters to every hiring manager who has seen candidates redesign Spotify's homepage and none who have worked under real product constraints.
When you finish, you will have something most graduates do not: a real-world deliverable, verified by Ewance, that you can show to a hiring manager and say "I did this. Here is the proof."
Earning criteria — what you'll demonstrate
- Specify a physically-based rendering setup that reproduces leather and metal surfaces from a defined material matrix.
- Budget and defend a sub-2-second mobile load target across asset, decode, and first-render stages.
- Design state management that maps interactive 3D customization choices to a backend cart contract reliably.
- Structure a configurator so adding a new material or finish is a trivial, low-risk change.
- Communicate technical rendering and performance decisions clearly enough for another engineer to implement.
Program Fit
Where this fits in your program.
Sharpens the same skills your degree expects you to demonstrate.
Aligned coursework coming soon.
Skills
Skills you'll demonstrate.
Each one shows up on your verified credential.
- Webgl
Apply webgl to solve real industry problems and demonstrate production-level capability.
- 3d Rendering
Apply 3d rendering to solve real industry problems and demonstrate production-level capability.
- Shading And Lighting
Apply shading and lighting to solve real industry problems and demonstrate production-level capability.
- Gpu Pipeline
Apply gpu pipeline to solve real industry problems and demonstrate production-level capability.
- Frontend Development
Apply frontend development to solve real industry problems and demonstrate production-level capability.
- Performance Optimization
Apply performance optimization to solve real industry problems and demonstrate production-level capability.
Careers
Career paths this challenge builds toward
Completing this challenge demonstrates skills that transfer directly to these roles:
Frontend Engineer (3D / WebGL)
Designing a real-time configurator end to end mirrors the day-to-day of a WebGL frontend engineer: building interactive 3D experiences, tuning shading and lighting for product fidelity, and shipping them inside a live commerce funnel under hard performance budgets.
This challenge sharpens
- webgl
- 3d-rendering
- shading-and-lighting
Frontend Performance Engineer
Committing to a sub-2-second mobile load budget and defending every allocation across the asset and render pipeline is the core craft of a performance engineer, who owns load-time budgets and GPU efficiency for heavy interactive pages.
This challenge sharpens
- performance-optimization
- gpu-pipeline
- frontend-development
Creative Technologist
Translating a brand's personalization vision into a feasible, well-rendered interactive design bridges to a creative technologist role, blending realistic 3D rendering with frontend delivery to turn marketing concepts into shippable experiences.
This challenge sharpens
- 3d-rendering
- shading-and-lighting
- frontend-development