Project overview

A direct-to-consumer store for an artist's album world

Most artist merch stores go wrong in one of two ways. Some are gorgeous campaign sites where actually buying something feels like an afterthought. Others are clean templates with a logo dropped on top and no sign of the artist anywhere.

I wanted one that did both — a store where the album's look and feel survives all the way to the payment screen.

Unaffiliated concept project. Not an official artist or label store. All artwork, product design and photographic treatment is my own; no official campaign assets were used.

Checkout

Checkout removes every exit

Checkout has no navigation. Just the logo and a line saying the page is secure. Every link up there is a way for someone to wander off, so the step indicator does the job of telling people where they are instead.

Steps you have finished collapse into a short summary with an edit link, so the form does not feel like it goes on forever. On mobile the order summary folds into one bar with the total, and the totals appear again just above the pay button — hiding the total is one of the main reasons people give up on mobile checkouts.

The pay button shows the amount. If it just said "Pay" and you had to scroll up to check the total, that is where people hesitate.

Design system

The system underneath

Raw color values live in one layer. On top of that sits a second layer that names what each color is for — page background, primary action, low stock. Components only ever point at those names, so changing a color is one edit instead of a hunt through the file.

Three typefaces, three jobs: a condensed one for big headlines, a plain one for body text and buttons, and a monospace one for small labels and prices. Prices use fixed-width numbers so they line up down a product grid. Headline styles have their own mobile sizes rather than being shrunk by hand.

Six component sets: button, badge, input field, variant option, quantity stepper and product card. The product card carries its own desktop and mobile size variants.

Accessibility

Contrast, targets, and never color alone

• The brand red passes AA in both directionsThe red passes contrast checks both as text on the page and as white text on a red button, so I never had to pick between the palette and readability. The amber does not pass as text, so it only ever gets used as a background with dark text on top.
• No state relies on color aloneSold-out formats get a line through them, sold-out color swatches get a diagonal slash, and sold-out product cards get a dark overlay and a label. Someone who cannot tell the colors apart still knows what is unavailable.
• Targets and focusEverything you can tap is at least 44 by 44 pixels, including the small color swatches and the plus and minus buttons. The keyboard focus outline is defined once and applies everywhere, rather than being redrawn for every component.

What I'd do next

Where I would take it

• Test the countdown bandThis is the boldest call on the homepage and the one I would want real numbers on. I would test it against a plain "limited run" badge and watch how many people add something to their bag — not how many click the band itself. Its job is to make the whole page feel urgent, not to be clicked.
• Design the post-drop stateA countdown means there is a moment when it hits zero. Sold out, join the restock list, and here comes the next drop are all real screens. A store that only works on launch day is not finished.
• Map the design to platform structureI would map the product page onto how a commerce platform actually builds pages, marking which parts a merchandiser can rearrange on their own and which need a developer. That is the difference between a design that hands off cleanly and one that causes arguments later.