Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Limited-Run Fashion Store

Design a responsive storefront for a small fashion label launching a limited capsule collection.

Responsive web, Mobile

The brief

Understand the problem

Background

Independent fashion labels need strong visual storytelling without sacrificing product clarity, inclusive sizing, page performance, or returns information. Limited inventory also creates pressure that can lead to misleading urgency.

User context

Imani is shopping for one versatile jacket. She wants to compare fit across body types, understand the fabric and care needs, and know whether her size can be returned.

Product problem

Customers need enough practical information to buy confidently while the brand needs a distinct editorial identity and an honest launch experience.

Objective

Shape collection discovery, product evaluation, size selection, and cart review for a ten-piece capsule launch.

What to design

Define the experience

Required experience

  • Explore the collection by garment type and availability
  • Inspect fabric, construction, fit, and model measurements
  • Choose a size using an accessible guide
  • Review delivery and returns before adding to cart

Screens and states

  • Collection landing
  • Product detail
  • Size and fit guide
  • Cart review

Core user flow

Follow the critical path

  1. 01

    Imani enters through the capsule story and filters for outerwear

  2. 02

    She opens the jacket and compares measurements with two model references

  3. 03

    The size guide recommends how to measure a garment she owns

  4. 04

    She adds a size and confirms the return window in her cart

Product rules

Requirements and constraints

Requirements

  • Balance editorial media with scannable product facts
  • Provide garment measurements, model context, and a text-based size guide
  • Show material sourcing claims with specific evidence
  • Communicate low stock as factual inventory, not a countdown tactic

Constraints

  • Core shopping tasks must work without autoplay media
  • Color names need descriptive text beyond swatches
  • Returns restrictions must appear before purchase

Reality check

States worth considering

A size sells out while selected
The product is final sale
An image fails to load
The shopper changes delivery region

Finish line

What to deliver

  • Four polished responsive screens for one capsule purchase journey

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#1C1B19
#C7B89F
#649853
#735D5F
#87759D
Font pairing
MontserratHind

Montserrat & Hind

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations