Flagship project
MyProtein Interactive Outfit Builder
Designing and prototyping an interactive ecommerce configurator that helps users combine clothing items, explore outfits and build confidence before purchase.
Prototype videoOutfit Builder interaction video placeholder
- Role
- UX, product thinking, interaction design, UI, prototyping, stakeholder collaboration
- Focus
- Ecommerce, configurator UX, visual commerce, AI-assisted image workflows
- Output
- Interactive prototype, proof-of-concept build
Overview
The Outfit Builder explored a more interactive way for users to combine clothing items and see how products could work together as a full outfit. The goal was to improve product discovery, increase confidence before purchase and support cross-selling across clothing collections.
The challenge
- 01No existing site functionality supported outfit configuration
- 02Product photography was not captured in a consistent pose or model
- 03AI-assisted image generation was needed to create consistent base model imagery and clothing overlays
- 04Scope had to be reduced for proof of concept due to image complexity
- 05Front and back views required large numbers of generated assets and thumbnails
- 06The system needed to be understandable and useful on mobile
Key UX/product decisions
Keep scope to tops, leggings and shorts initially
Allow users to swap products and colours
Make it clear which items would be added to basket
Support front/back views and closer product inspection
Create naming conventions with engineering so the correct image could be displayed for each selection
Design for future expansion into menswear and wider clothing ranges
AI-assisted image workflow
Existing product imagery did not support the desired interaction model, so AI-assisted generation was used to create consistent model views and apply clothing variants. This turned a visual asset limitation into a workable proof-of-concept pipeline.
Prototype to build
After early Figma exploration and testing, a fully working interactive prototype was created so users and stakeholders could experience the outfit builder realistically. This prototype was handed to engineering and helped accelerate the first proof-of-concept build.
Collaboration
The work involved close collaboration with clothing teams, senior leadership and engineering. Clothing teams helped identify high-impact products and collections, while engineering collaboration focused on asset naming, image logic and implementation feasibility.
Media placeholders
Prototype videoOutfit builder interaction video
Case study mediaProduct swapping clip
Case study mediaFront/back toggle clip
Interface screenshotMobile interaction screenshots
Workflow diagramImage generation workflow diagram
Process artefactPrototype-to-build handoff placeholder
Interface screenshotThumbnail selector screenshot
Case study mediaBasket clarity interaction placeholder
Outcome
- Live proof of concept is being built
- Testing will measure conversion, order value and engagement
- Designs were showcased across the business
- The approach is being considered for other areas such as beauty
- The prototype helped create an accurate first build and faster engineering turnaround
What this demonstrates
- Interaction design
- Configurator UX
- Ecommerce strategy
- Behavioural design
- Prototype-led validation
- AI-assisted image workflows
- Implementation awareness
- Visual systems thinking