Skip to main content
UI Coach Logo
Intermediate

Limited-Run Fashion Store

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

Responsive web, Mobile2 to 4 hours

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.

Font pairing
MontserratHind

Montserrat & Hind

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

Icons
Illustrations

Keep practicing

Intermediate
E-commerce

Made-to-Order Woodcraft Shop

Design a storefront for a craftsperson selling customizable handmade wooden picture frames.

Responsive web2 to 4 hours
FormsInteraction Design
Intermediate
E-commerce

Schedule a Recurring Gift Delivery

Design a gift subscription that helps someone choose occasions, recipients, budget rules, and approval before each delivery.

Mobile2 to 4 hours
Service DesignForms
Advanced
E-commerce

Drone Product Selector

Design an ecommerce journey that helps a new buyer choose a suitable camera drone and understand operating responsibilities.

Responsive web2 to 4 hours
Search and FilteringContent Design
Intermediate
E-commerce

Adjust a Household Replenishment Subscription

Design a recurring order experience that predicts supply needs while making quantity, frequency, skips, and price changes easy to control.

Mobile2 to 4 hours
Information ArchitectureInteraction Design
Intermediate
E-commerce

Product Alternative Advisor

Design a comparison tool that explains why a product may or may not suit a shopper and suggests credible alternatives.

Responsive web2 to 4 hours
Information ArchitectureData Visualization
Intermediate
E-commerce

Product Release and Local Stock Alert

Design a brand-following experience that notifies shoppers about relevant releases and shows trustworthy nearby availability.

Mobile2 to 4 hours
Information HierarchyMobile Design