Instytut Kawy
Product card, rebuilt as a system
2026 - E-commerce / Product Design
Instytut Kawy is a Łódź specialty coffee roastery selling online on WooCommerce. We redesigned their product card - the page that sells every bean - and rebuilt it as a system: one pattern that renders the entire catalogue, not a one-off screen. Starting from a written brief and the live store, we extracted the real design system and shipped an interactive prototype.
Tension
The original card buried the parameters buyers actually decide on - acidity, processing, flavour profile - below the fold and styled them inconsistently. With 200+ SKUs, every product page was assembled by hand. The task was not to beautify one screen but to make the decisive information legible and turn the card into a repeatable pattern.
Decisions
We surfaced the buying parameters to the top: a two-level flavour profile (pictograms + detailed notes), processing method, and a compact acidity indicator next to the price. Description and the Roaster's opinion were stacked and given a distinct highlight. The country block became a flexible 'origin or processing' module for beans without a regional story. A sticky buy-bar keeps the purchase in reach on every scroll, with four weight tiers and a two-step grind selector.
Approach
We did not invent a look - we extracted the real one. Colours, typography and buttons were read from the live store's computed styles and tokenised in one place, so the whole catalogue changes from a single source. The prototype is a single self-contained file (HTML/CSS/JS with GSAP motion), mapped to WooCommerce fields so one template can render every SKU. A quality layer - JSON-LD structured data and WCAG AA accessibility - is built into the pattern, not bolted onto each page.
"We don't redesign a card - we design the pattern that renders the whole catalogue.
Outcome
An interactive prototype validated screen by screen with the client, a documented design system, and a WooCommerce productization spec - one pattern ready to render 200+ SKUs. Six rounds of client feedback shipped. SEO rich-result schema and WCAG AA accessibility baked into the template.
Reflection
A product card looks like a design task and is really a systems task. The value isn't the pixels on one screen - it's that the next 200 pages inherit legibility, SEO and accessibility for free. That is the difference between selling a redesign and selling an operating pattern.
Live prototype
Open in new tab ↗Interactive prototype - scroll, switch weight and grind inside the frame.
work.visuals
