Studio Leaf
Plant e-commerceWeb2026
Plant retailers organise their catalogues the way a botanist would — by species, in Latin. The customer is standing in their flat thinking about a north-facing window, a radiator and a cat. I rebuilt the shop around the conditions people actually have, and closed the three points where a plant purchase falls apart.
Nobody walks away from a plant because it costs forty euros. They walk away because they are not sure it will still be alive in March.
Eighteen at desktop width and six at 390, including the states most portfolios skip — empty bag, no results, 404.
Each one a condition a customer can answer about their own home without looking anything up.
Colour, spacing, radius and border. Every value in the product resolves through one of them.
Every text and surface pairing computed against WCAG 2.1, transparency composited over what sits behind it.
A competitive review of plant retailers, a heuristic pass over the existing shop, and scenarios written from the customer's side.
Every shop I looked at was built for somebody who already knew the answer. The navigation listed species. The product page led with a Latin name and a photograph. Care information, when it existed at all, sat behind a tab called Details, three clicks away from the decision.
That is a perfectly good structure for a nursery serving collectors. It is the wrong structure for the person who actually buys most houseplants: someone furnishing a room, who has never kept one alive, and who is trying to work out whether this particular plant will survive them.
So the job was not to make the cards prettier. It was to change what the shop asks the customer to know before it can help them.
What the review turned up
Five filters, each one a constraint a customer can answer about their own home without looking anything up.
You can try it: this filter really worksOpen a filter below and tick an option. Bright light together with Pet friendly leaves no result, and that is the moment worth looking at.
Nine products with their real attributes. Try Bright light together with Pet friendly — nothing matches, and how a shop behaves at that moment matters more than how it looks when everything does.
The one condition that actually kills plants. It is the first filter and the first fact on the product page.
Answers "will it fit on the shelf", and drives the price tiers, so it does double duty.
Lets a first-time buyer rule out everything that will punish them, in one tap.
A safety question, not a preference. It is binary and it is never buried in a description.
Last, deliberately. Sorting by price first hides the plants that would have worked.
The whole purchase, in order, from the real file. Scroll to walk it.
Each of these made some other part of the screen worse. Choosing which part is the design decision.
01
Light, watering interval and difficulty are three equal facts directly under the price — not inside a Details tab. The doubt that stops the purchase gets answered at the moment it is felt, without a click that most people never make.
What it cost — the hero grew taller and the gallery lost a thumbnail row. The first draft looked better with the facts tucked away, and was worse.02
Checkout opens with free over €80, otherwise €4.95, stated above the address form. Revealing shipping after someone has typed their details is a dark pattern whether or not it is meant as one, and it is the classic abandonment point.
What it cost — the summary panel carries more text than a clean layout wants, and the step-one header is busier than the other three.03
People buy plants in twos and threes — one for the shelf, one for the pot they already own. Continue shopping gets the same weight as Checkout, and the cart keeps recommending pots and care products rather than rushing to payment.
What it cost — two competing calls to action on one screen, which only works because checkout is the only filled button and continue is outlined. That rule is now in the system.Three breakpoints share one twelve-column grid. What changes between them is not the scale — it is which pattern a component uses.
Product grid runs four up, filters sit in a persistent bar, the hero is full-bleed.
Grid drops to two up. Filters stay in a bar until there is no longer room for the result count beside them.
Filters move into a sheet and the primary action is pinned. Content order never changes — only its container does.
Eighteen screens only stay consistent if the values behind them are named. Every colour, space and radius resolves through a variable.
Colour
Secondary text and borders are not separate greys: they are the brand green at a set opacity, which is why the interface stays warm instead of drifting grey.
The one accent. It marks what the customer can do: buy, add, save.
Text, ink surfaces and the dark button.
Success states and small marks.
Surfaces
Eleven near-white backgrounds had accumulated and none were distinguishable. Four surfaces now cover every case; two more sit behind product photography.
Ink ramp
Contrast ratios are measured on white, with transparency composited over the surface behind. The step used for small secondary text is the lightest one that clears AA, which is not the one that looks right by eye.
Type
Two families with one job each. Nunito carries display and editorial weight; Quicksand runs labels, prices, navigation and buttons. Nothing is set outside this ramp.
Plants for your light
Monstera Deliciosa
€84.00
Explore Plants
Indoor plants Pots & Planters Plant care
Bright indirect light, water when the top inch of soil is dry.
Pots & Planters
Pet safe
Space
The screens held 26 different gap values before the audit. Accidents were snapped, the ones doing real work were kept. Layout tokens sit on top: content margin 200, card gap 32, section gap 80.
Grid and layout
What changes between breakpoints is the margin and how many columns a card takes. Content never exceeds 1200: on a wide monitor the margin grows instead of the text line. Sections are separated by 80, a header sits 32 above its content, and a sub-group 48 below the one before it.
Product grid runs 4 up. The hero is full-bleed.
Product grid drops to 2 up. Filters collapse into a sheet.
Single column. The sticky Add to bag bar appears here.
Elevation
A black shadow on a warm page reads as dirt; an ink shadow reads as depth.
Components
Every button in every state, built from the real values in the file. Primary is terracotta and there is only one on a screen; dark is the quiet alternative; chips show a selection two ways, fill and weight, never colour alone.
Motion
Nothing animates for its own sake, and nothing that moves may delay a tap. Under reduced motion every duration collapses to zero and transforms are dropped, but state still changes colour.
malinovska.design
nonePressed states. A button must look pressed on the same frame as the finger lands.
ease-outHover, focus ring, chip selection. Short enough that it never gates a second click.
cubic-bezier(.2,.8,.2,1)Card lift, dropdown open, filter drawer. The default for anything that changes shape.
cubic-bezier(.16,1,.3,1)Add to bag: the bag count change and the item flying in. The one place a customer should notice.
What it forbids
Each of these was in the file before the audit, not a hypothetical. They are written down so they do not come back.
The find that mattered
Botanical names, metadata and field labels were set in the green at 55% — a value that looks perfectly readable and measures 3.64:1. Below AA for body text. Breadcrumbs and placeholders at 40% measure 2.41:1.
I moved 242 small text nodes up to the 70% step, which clears AA at 5.38:1, and rewrote what each step of the ramp is allowed to do. This is the argument for measuring instead of trusting an eye: nothing about those screens looked wrong.
Previous project
Arivin — biotech website redesignThe whole science kept word for word, given a sequence a visitor can follow
Next project
AONG — personal finance app In progressAn app that shows what is actually safe to spend