A plant shop for people afraid of killing plants
A plant shop designed around the conditions people actually have, such as light, space and pets, instead of Latin species names. It closes the three points where a plant purchase falls apart.
Make a catalogue usable by someone who cannot name a plant, without hiding what an experienced buyer needs.
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.
The whole purchase, in order, from the real file. This is a preview, not a live shop. Scroll to walk it.
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 person who buys most houseplants is furnishing a room and has never kept one alive. They want to know whether this particular plant will survive them, so the shop answers that before anything else.
I reviewed competing plant retailers, ran a heuristic pass over the existing shop and wrote scenarios from the customer’s side. The job was to change what the shop asks the customer to know before it can help.
Each of these made some other part of the screen worse. Choosing which part is the design decision.
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.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.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.
Click a screen, then scroll inside it. The filters on the middle phone really work
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, which is to buy, add and 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, with a content margin of 200, a card gap of 32 and a section gap of 80.
Grid and layout
What changes between breakpoints is the margin and how many columns a card takes. Content never exceeds 1200, so 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.
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.
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 changes and the item flies 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.