Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Made-to-Order Woodcraft Shop

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

Responsive web, Mobile

The brief

Understand the problem

Background

Handmade products vary in grain, finish, and lead time. Buyers need help choosing dimensions and customization while makers need realistic production capacity and approval before starting nonreturnable work.

User context

Lin wants a walnut frame for an unusual print size. She needs to preview proportions, understand natural variation, and approve the final specification.

Product problem

A made-to-order shop must communicate craft value while preventing measurement errors and unrealistic delivery expectations.

Objective

Design product discovery, frame configuration, specification approval, and production tracking for one handcrafted order.

What to design

Define the experience

Required experience

  • Browse frame styles and material stories
  • Enter artwork dimensions and choose finish
  • Review a scaled specification and return terms
  • Approve production and track craft milestones

Screens and states

  • Craft collection
  • Frame product detail
  • Frame configurator
  • Order timeline

Core user flow

Follow the critical path

  1. 01

    Lin selects a walnut profile and reads its sourcing details

  2. 02

    She enters the print dimensions with unit guidance

  3. 03

    The preview flags that a mat is needed and shows the final outer size

  4. 04

    She approves the specification and follows production updates

Product rules

Requirements and constraints

Requirements

  • Show natural material variation with representative examples
  • Validate dimensions, units, and compatible options
  • State lead time and change cutoff before payment
  • Provide a maker-readable order specification

Constraints

  • A screen preview cannot promise an exact wood pattern or color
  • Custom orders may have limited returns only when clearly disclosed
  • Production capacity must control promised dates

Reality check

States worth considering

Dimensions are entered in the wrong unit
The requested wood is unavailable
The buyer changes details after approval
Shipping damages the frame

Finish line

What to deliver

  • Four responsive screens from craft discovery through production tracking

Optional direction

Visual resources

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

Color palette
#79674F
#EDE6D2
#090C0F
#B7B7B7
#A7A7A7
Font pairing
RufinaOxygen

Rufina & Oxygen

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

Icons
Illustrations