Clothes rarely fail on style. They fail on fit.
Size charts create returns and sizing anxiety. 62% of the shoppers I surveyed struggle to put outfits together, and none of the seven stores I benchmarked classifies body shape.
GESTALT
Find the silhouette first. Then the clothes.
A fashion store that turns four body measurements into a silhouette, then shows only the cuts, fabrics and complete looks that suit it.
Case study · Concept project≈ 6 min read
Project at a glance
From a measuring tape to a working store.
0160s
From four measurements to your silhouette
0210
One-to-one interviews behind the design
035
Silhouettes, each with its own curated looks
Concept project · 2026 ✦No real customers · no live sales data
The short version
01 · Problem 02 · What I did 03 · Result
A four-measurement shape finder and a catalogue that follows it.
Shoulders, bust, waist and hips become one of five silhouettes in about a minute. Cuts and complete looks then adapt to that shape.
A live, bilingual store, designed and built by me.
Designed in Figma, built in HTML and CSS, checked against WCAG 2.1 AA. A concept: no real orders and no accounts.
My role
Designer and engineer, research to live site.
A self-initiated concept project. I did the research, the UX, the UI and the front-end build myself, from the first survey question to the deployed store.
Every title on this project
- Product Designer
- UX Researcher
- Information Architect
- UX Designer
- UI Designer
- Interaction Designer
- Design System Designer
- Prototyper
- Accessibility Specialist
- UX Writer
- Usability Tester
- Front-end Developer
- Design Engineer
- 1
Research
Survey, interviews, affinity map and a benchmark of seven stores.
- 2
Definition
Persona Elara, card sorting, goals and solutions.
- 3
Structure
Task flow, user flow and a bilingual site map.
- 4
Design
Sketches, wireframes, mood board and a UI kit.
- 5
Test & build
Two test rounds, an accessibility audit and a live store.
01The problem
Online, clothes fail on fit, not on style.
Standard size tables create friction, returns and sizing anxiety. GESTALT starts from the body instead: four measurements in, one silhouette out.
Three goals, three design responses
- 01Structure garments by proportion and body shape
Most stores sort by size and trend. The shape of the body decides what fits, so it should decide what you see first.
An adaptive catalogue that highlights pieces built for your proportion
- 02Find your silhouette in under 60 seconds
Nobody wants a body-measuring session before browsing. The first answer has to come fast.
A calculator that turns shoulder, bust, waist and hip into a silhouette
- 03Offer complete looks, not single pieces
62% of surveyed shoppers struggle to coordinate outfits. A good piece alone does not solve that.
Ready-made sets that combine top, bottom and layer in proportion
Four measurements. One silhouette.
Enter your measurements, get your silhouette, see the styles and sets made for it, then choose with confidence. That is the whole product in four steps.
02Research
Shoppers don’t want a size chart. They want guidance.
Online shoppers keep running into fit frustration: 62% struggle to put outfits together and 68% name sizing differences as their main barrier to buying.
Survey
60%are 31–40 years old
60 responses
49%every season
61 responses
52%shop online with fit doubts
60 responses
62%struggle to put outfits together from their own wardrobe
What challenges do you face when choosing clothes?
50 responses
Interviews
Ten in-depth one-to-one interviews mapped expectations, fit pain points and shopping habits. Five demands came up again and again:
- 01
Editorial photography on real models
- 02
An anthropometric fit breakdown and advice
- 03
Clear information on fabric and drape
- 04
Complete set suggestions
- 05
A 100-day fit guarantee with easy exchange
Affinity diagram
Interview and survey answers were clustered into nine groups, from body shape and style to colour, privacy, size and payment.
Competitive analysis
Seven fashion platforms are good at generic colour and size filters. None of them classifies the body’s silhouette automatically or promises a match by proportion.
| Platform | Body shape info | Curated looks | Silhouette filter | Colour & palette | Size & fit guarantee | Bilingual UX |
|---|---|---|---|---|---|---|
| Zalando | ✕ | ✓ | ✕ | ✓ | ✓ | ✕ |
| SHEIN | ✕ | ✕ | ✕ | ✓ | ✕ | ✕ |
| Harrods | ✕ | ✕ | ✕ | ✓ | ✕ | ✕ |
| Karen Millen | ✓ | ✕ | ✕ | ✓ | ✓ | ✕ |
| Rinascente | ✕ | ✕ | ✕ | ✓ | ✕ | ✕ |
| INNO | ✕ | ✕ | ✕ | ✓ | ✕ | ✕ |
| ZARA | ✕ | ✓ | ✕ | ✓ | ✓ | ✕ |
| GESTALT | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Nobody sells by proportion.
That gap became the product: a store that begins with the body and only then shows the clothes.
Key takeaways
- 1
Calculate the silhouette for the user, so there is no guesswork.
- 2
Curate complete, proportion-tested looks.
- 3
Give honest guidance on which cuts flatter which body.
03Define
Designing for Elara.
One persona, drawn from the interviews, stood in for every design decision that followed.
30 · Germany · Creative Director
Elara
“I love architectural fashion. I just need a shop that guarantees the silhouette fits my proportions every time.”
Elara leads design projects on tight schedules. She loves timeless tailoring but has no patience for the trial and error of sizing online. She wants a refined, confident shopping experience.
N.01
Needs
- Guidance based on her proportions
- Curated looks for her shape
- A 100-day fit guarantee
- A bilingual, accessible experience
N.02
Pain points
- Sizing standards that differ by brand
- Too many returns
- Time lost assembling outfits
N.03
Interests
- Haute atelier fashion
- Tailored proportion
- Capsule wardrobes
GESTALTTotêmeMassimo DuttiThe Row
Card sorting
A hybrid card sort with 15 participants set the information hierarchy: by silhouette, by looks, by category and by season.
Final top-level navigation
Find your shapeCollectionAccessoriesSale
04Information architecture
From measurement to checkout, in a straight line.
The flows were drawn before any screen, so every page earns its place on the way from first measurement to rapid checkout.
Task flow and user flow
The optimised flow runs from instant measurement input to a personal silhouette, then to the looks for it and on to checkout.
Site map
The site map links four areas: the silhouette finder, the collection, complete looks and customer care. German and English share the same structure.
05Visual design
From paper to pixels.
Low-fidelity ideas first: where the calculator sits and how technical inputs can live next to an editorial look.
Sketches
Digital wireframes
Wireframes in Figma settled responsive layouts, touch-target sizes, AA contrast and the move from desktop to mobile.
Mood board
The mood board draws on Bauhaus geometry, Parisian tailoring, architectural minimalism and the way natural fabric drapes.
UI kit and final tokens
The first UI kit fixed buttons, forms, the bag modal and icons. The shipped store refined it into a calmer ink-on-white system with one blue accent and a red reserved for sale.
Ink#0F172A
Accent blue#1D4ED8
Sale red#C52222
Hairline#E2E8F0
Page#FFFFFF
Gambetta / Bodoni ModaDisplay, headlines
Plus Jakarta SansInterface and body text
JetBrains MonoMeasurements and numbers
06The core feature
Four measurements, one silhouette.
The heart of GESTALT is the shape finder. You enter shoulders, bust, waist and hips, and the figure on screen morphs to match while the result updates live.
- 01
Feedback while you type
Testers wanted to see something change immediately. The silhouette now morphs in real time as each value moves.
- 02
Show how to measure
Each figure carries a small diagram of where the tape goes, so nobody has to guess what “waist” means.
- 03
Plain language for the result
A silhouette name, a one-line description and the cuts that suit it, instead of a table of numbers.
- 04
Usable without a mouse
Sliders and tiles work by keyboard, carry visible focus and are announced properly to screen readers.
Try it yourself
Move the four sliders. The figure reshapes live and the result names your silhouette, the same logic the store uses.
Your silhouette
Hourglass
07Usability & iteration
Tested, then tailored.
Three tests in round one and two validation sessions after the changes, plus automated WCAG 2.1 AA accessibility checks.
Home page
- 1
Testers found the standard hero button ambiguous. I added a clear tagline and a direct 60-second action to find your shape.
- 2
Body shapes became visual silhouettes instead of abstract text categories.
- 3
Rigid item lists gave way to tactile, selectable looks.
- 4
Complete outfits worn by real models now come with an itemised breakdown.
Body-shape calculator
- 1
Participants wanted instant visual feedback as measurements changed, so the silhouette now morphs live.
- 2
The measuring guide uses clear diagrams and a legend.
- 3
A German / English switch and full keyboard navigation cover the sliders.
Clothes for your shape
- 1
Breadcrumbs and step indicators now show where you are on the silhouette journey.
- 2
Filters by cut, fabric, occasion and season follow the identified shape.
- 3
Item cards carry badges, fabric details and a clear fit statement.
- 4
The mobile layout is tuned for one-handed use and a quick bag drawer.
08Outcome
What the project delivered.
A concept, so no sales figures. Here is what exists and how it was checked.
60s
From four measurements to your silhouette
5
Silhouettes, each with curated looks
2
Languages, switchable live
AA
WCAG 2.1 accessibility checks
Proportion first, product second.
The store opens with the body, not the catalogue. Everything else, from filters to complete looks, follows from that one decision. It is a concept: nothing here can be bought and no account data is stored.
Concept project · designed in Figma, built in HTML and CSS · German and English.
09Reflections
What stays with me.
Empathy, proportion and accessibility have to work together.
Pairing a sizing method with a 60-second flow removed the hesitation, and holding to WCAG 2.1 AA kept it usable for everyone.
Drape simulation and occasion-based looks.
Next I would test 3D garment drape, connect to made-to-measure pattern cutting, and recommend looks by climate and occasion.
