Skip to main content
UI Coach Logo
Intermediate

Made-to-Order Woodcraft Shop

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

Responsive web, Mobile2 to 4 hours

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.

Font pairing
RufinaOxygen

Rufina & Oxygen

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

Icons
Illustrations

Keep practicing

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
Intermediate
E-commerce

Scheduled Gift Delivery

Design a thoughtful scheduling flow for sending flowers or gifts on future occasions without losing control of the final choice.

Mobile2 to 4 hours
Interaction DesignForms
Advanced
E-commerce

Neighborhood Group Purchase

Design a collective order flow that unlocks a better unit price when enough local buyers commit.

Responsive web2 to 4 hours
Product ThinkingForms
Advanced
E-commerce

Occasion Gift and Flower Delivery

Design a gift-ordering flow that handles recipient details, delivery timing, substitutions, and a private message.

Responsive web2 to 4 hours
FormsService 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

Limited-Run Fashion Store

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

Responsive web2 to 4 hours
Visual DesignResponsive Design