WoolCraft
A wool and textile storefront built around one hard problem: showing how a material looks and feels through a screen.
The Problem
Wool is bought by texture and color, and both are the first things a screen throws away. Most textile storefronts answer this with a swatch grid beside a single hero photo, so the shopper has to imagine the product they are actually choosing — and shoppers who have to imagine tend to leave.
The Approach
The product page was rebuilt around the variant rather than the photograph. Selecting a color swaps the imagery in place with no page transition and no layout shift, so the comparison happens in the same spot on screen and the eye can hold both versions. Light and dark themes were treated as two real designs rather than one design with the colors inverted, because a cream wool reads very differently against near-black.
Design Decisions
Variant switching without a reload
Color selection updates state on the client and swaps the image in place. Nothing above or below the image moves, so switching between four colors costs no re-orientation and stays comparable.
Motion tied to the interaction
Animation exists where a change needs explaining — a variant swap, a card entering — and nowhere else. There is no ambient movement competing with the product photography for attention.
Layout designed at 360px first
The mobile column was drawn before the desktop grid, so the small-screen version is the primary design rather than a compressed leftover of the large one.
The Outcome
A storefront where choosing a color takes one tap and no waiting, on a phone or a desktop. It is live and public — open it, switch a few variants, and see whether the material reads.