All workContactIT

Shoe Configurator

Category
UI Design
Roles
UX Architect, UX Researcher, UI Designer
Client
Calature Marini
Live
Try the configuratorProduct website

Bespoke shoes online, without the expert standing next to you. How do you keep the confidence?

Shoe Configurator
Three browser windows of the Calzature Marini shoe configurator: the model selection screen large on the left, the sole selection and the final review overlapping on the right.

Overview

Buying bespoke shoes online is nothing like buying ready made ones. People need to feel that every choice shapes the final product, without feeling lost. This project takes the guided, in store experience and turns it into a digital configurator that feels intuitive, transparent and premium, and respects the craftsmanship behind it.

The problem

In a bespoke shop, an expert holds your hand. Online, that person disappears and you are left alone with silhouettes, materials, finishes and personalisation. Three things kept coming up: too many options exhaust people, users cannot see how their choices change the final shoe, and complex configurators care more about technical flexibility than about feeling premium. The challenge was not adding more customisation. It was making complexity feel effortless.

Demo video

Video from the product website.

Four steps, start to finish

  1. Step 1

    Pick the silhouette

    One shoe at a time, large, with the price in sight.

  2. Step 2

    Choose the sole

    Materials and finishes, each change shown on the shoe.

  3. Step 3

    Make it yours

    Engraving, thread and font, with a live preview.

  4. Step 4

    Review and order

    Every choice and the total before you commit.

Process

Inception

Context

Luxury footwear is personal. People pay for craftsmanship, materials and individuality. In store, an expert guides every choice. Online, the challenge is keeping that confidence without losing simplicity or the premium feel.

Goals

  • A journey that feels guided rather than overwhelming
  • Less cognitive load by splitting decisions into steps
  • Immediate visual feedback after every selection
  • The perception of craftsmanship throughout
  • More confidence before purchase through transparent choices
Two rows of boxes: in the bespoke shop you are linked to an expert and then to the shoe; online the expert box is dashed and faded and the shoe is greyed out.
Expert present, expert missing

Discover

Research

  • Competitive analysis of luxury footwear configurators
  • Customization flows in fashion, automotive and furniture
  • Heuristic evaluation of existing shoe configurators
  • Literature on cognitive load, progressive disclosure and online decision making

Findings

  • Too many options at once slow decisions and raise uncertainty
  • Users rely on continuous visual feedback
  • Small sequential decisions feel approachable
  • Premium comes from clarity and confidence, not from every option at once

Personas

The first time buyer wants guidance and visual feedback without feeling boxed in. The returning customer wants quick access to options, full control and honest pricing.

Two personas, first time buyer who wants guidance and returning customer who wants control, above a rising confidence curve across Model, Upper, Sole, Personalize and Review.
Who buys, and confidence

Design

Approach

I designed customisation to feel effortless. Progressive steps and constant visual feedback let people focus on one decision at a time without losing sight of the final shoe.

Four low fidelity wireframes in a descending staircase, linked by arrows: Model, Upper, Sole and Summary.
Four wireframes, one flow

Test

Methods

  • Heuristic evaluation throughout the process
  • Interaction patterns reviewed against established UX principles
  • Iterative refinement through prototype reviews and comparison of alternatives

Insights

  • Progressive steps reduced perceived complexity
  • Live product updates increased confidence
  • A final review screen let users validate choices before purchase
Three interface fragments: a five step progress bar on Select sole, a shoe before and after a sole change, and a review card with Edit links, labelled progressive steps, live preview and final review.
What the review confirmed

Develop

Specs

  • Figma for wireframes, UI and interactive prototypes
  • A design system of reusable customization components
  • Responsive layouts for desktop and mobile
  • Developer ready specifications and interaction documentation
Interface components of the configurator: selected and unselected model cards, zone chips, leather swatches, a yellow call to action button and a review row with Edit.
The building blocks

Measure

Success looks like

  • Users complete the journey without abandoning it
  • Each step feels clear and easy to understand
  • Users review their configuration with confidence
  • The experience communicates the craftsmanship
Planned measurement points on the five step journey to order: where people leave, going back a step, use of Edit, and whether it feels crafted. No results shown.
Where we will look

Gallery

Gallery
Two full width screens of the shoe configurator: model selection with a searchable list of silhouettes, and the final review with specifications and investment summary.
Choosing the model from a searchable library of silhouettes. Reviewing every choice and the total before the order is placed.

Outcome

The concept turns a guided, in store experience into a digital journey that feels simple, transparent and premium. Step by step choices and constant visual feedback help people personalise handcrafted shoes with more confidence.

Learnings

Information architecture shapes everything. Split customisation into meaningful decisions and complexity becomes manageable without taking freedom away. It also confirmed something I keep coming back to: design around how users think, not around how the product is built.

Next projectZvanning

Got a product that fights back?

© Giorgio PulvirentiTop