Design is how it looks, feels and works
Scroll to watch a design for a life cycle assessment card go from 0 to 1, brief to build, every step of the way.
This page is an interactive case study. One life cycle assessment (LCA) results card goes from brief to build on a Figma-like canvas, in nine phases, with the design thinking shown along the way. The card's data is invented.
Brief
The product team asks for a new card for LCA results. People compare products by their footprint, so the card shows it at a glance, and where it comes from. It must work in English, German, Greek and French.
Wireframe
Claude, working alongside Stefanos, draws the first frame: an empty box, 340 by 244 pixels.
Structure
Claude fills the frame with gray blocks, one at a time: a label, the product name, the maker, the footprint, a bar and a button. Then they become plain text. Stefanos leaves three comments: everything is the same size, so the footprint should lead; one number says how much, so show where it comes from too; keep one main action, with Compare beside it.
Polish
Version 1.0 gets its look: an oak dining chair by Nordwood Studio, in Seating, at 12.4 kg CO₂e per unit, 18% below its category's average, EPD verified. A bar splits the footprint into five life cycle stages: materials 5.6, manufacturing 3.1, transport 1.9, use 0.3 and end of life 1.5. View report is the main action, with Compare beside it.
Iterations
Twelve directions follow: six coded, working variants (number first, stage legend, stage rows, dark surface, compact row and grade) and six quick sketches (donut, versus average, photo header, giant number, table and timeline).
The pick
Stage legend wins: every stage is readable without a hover. Each of the other coded variants loses for a reason. Number first: the stages lose their names. Stage rows: too tall for a results grid. Dark surface: too loud next to other cards. Compact row: better for search results. Grade: no agreed grading scale yet. Stage legend becomes version 2.0.
Details
Version 2.0 is checked, one detail at a time. Every text pair passes WCAG AA contrast, in light and dark. Five type sizes and three weights, with the footprint leading at 36 pixels. Long names stay on one line and end in an ellipsis, with the full name in a tooltip. The card works in English, German, Greek and French: German runs up to 30% longer than English, so the delta drops under the number, the buttons grow with their label, and decimals follow the locale. Then v2.0 is ready to build.
Giving a damn
Claude's part is done. The rest is care. Six steps, played one click at a time, turn v2.0 into v3.0: a wider card with room to breathe, a footprint with two decimals (12.42) and a light green "−18% avg" chip, two buttons of equal width, a finer edge, the stage details moved into a drawer behind "See details", and connectors that link the card to another. The drawer gives up what won v1.2, so it's a new iteration to test. A Before and After switch shows what changed.
Team work
The card makes way for a chat. Stefanos messages the team, Luis, Sandrino, Jensen and Morten: "new design is here, let's test again, alright? wdyt". Luis answers "let's go", and Morten adds "keep scrolling...".