Verdant — E-commerce Checkout Flow

Verdant is a concept e-commerce brand for curated botanicals and artisanal indoor gardening tools — positioned around the tagline "Cultivate Your Sanctuary." The brand sits in an editorial, nature-forward aesthetic that needed to carry through from brand identity into a functional, considered checkout experience.

This project covers the full checkout flow from cart to order confirmation: wireframes, a complete design system, high-fidelity screens at 1440px, and a user flow diagram mapping both the happy path and key error states.

Checkout is where e-commerce purchases are won or lost. Anxiety around payment, confusion over multi-step forms, and unclear error recovery are the most common causes of cart abandonment. The challenge here was twofold: design a checkout experience that feels as considered as the brand aesthetic while ensuring the flow itself is friction-free — clear, linear, and forgiving when things go wrong.

Specific design problems addressed:

How do you carry an editorial, nature-forward visual identity into a functional form-heavy flow without it feeling cold or decorative?

How do you make a multi-step checkout feel manageable rather than overwhelming?

How do you handle payment failure gracefully without alarming the user or losing the sale?

Wireframes first The project opened with low-fidelity wireframes for all three core screens — Cart, Checkout, and Confirmation — each paired with an annotation legend. Wireframing at this stage focused on information hierarchy, the layout of the persistent order summary sidebar, and the step structure of the checkout form. Resolving layout decisions in greyscale kept the focus on structure before visual treatment.

User flow mapping Before moving to high fidelity, a user flow diagram mapped the complete checkout journey: Product Page → Cart → Shipping → Payment → Review Order → Confirmation. Three error branches were documented alongside the happy path — an empty cart state, address validation failure (with inline field errors), and card decline (with error highlight and a retry/re-entry path). The flow uses a consistent legend (screen states, error states, warning states, start/end nodes) making it immediately readable for a development handoff.

Verdant's design system was built from the ground up to serve both the brand and the UI requirements of a checkout flow.

Colour The primary palette is anchored by Deep Forest (a near-black green) and Sage Green, with Moss and Stone Beige rounding out the four primary tones. A supporting palette adds Fern, Clay, Charcoal, and Mint — providing enough range for UI states, backgrounds, and accents without losing coherence. The overall effect is warm, organic, and premium without feeling fussy.

Typography Two typefaces carry the system. Cormorant Garamond handles display headings — its high-contrast, serif character brings the editorial quality the brand calls for. Inter handles all body copy, labels, and UI text, grounding the experience in clarity and legibility. The type scale runs from caption to display with explicit tokens defined for each level.

Spacing A 4px base grid scales through 4, 8, 12, 16, 24, 32, 48, 64, and 96px steps — providing the density control needed to keep a data-heavy checkout form breathable without wasted space.

Radii and elevation A five-step radius scale (2px through full/pill) maps to component types: sharp for data tables, soft for cards and inputs, pill for tags and badges. An elevation system covers four states — Flat, Raised, Floating, and Overlay — used to layer the persistent order summary sidebar, form sections, and modal states.

All screens are designed at 1440px desktop width, reflecting the primary purchase context for this category of product.

Cart The cart screen presents the item list on the left with product images, names, variants, quantity controls, and line prices. An order summary sidebar on the right shows item subtotals, shipping (calculated at next step), and a total, with a clear "Proceed to Checkout" CTA and a secondary "Saved for later" link. The layout keeps both the product review and the cost summary simultaneously visible — reducing the need to scroll back to check what's in the order.

Checkout — Shipping Details The first checkout step collects name, address, and delivery preference. The persistent order summary sidebar remains visible throughout, so the user never loses sight of what they're buying. Section headings in Cormorant Garamond maintain the brand register even within a functional form.

Checkout — Payment Details Card number, expiry, CVC, and billing address fields follow a clear, expected layout. Inline validation provides immediate feedback without waiting for submission. The step indicator shows position in the flow — reducing anxiety about how much remains.

Review and Confirm Before finalising, the user reviews their complete order: items, shipping address, delivery method, and payment summary. Editing links return to the relevant step without losing data. The primary CTA is the only high-emphasis element on the page, making the next action unambiguous.

Confirmation A centred "Order Confirmed" screen with a confirmation number, order summary receipt, and a CTA to continue shopping. The tone shifts from transactional to warm — closing the purchase loop on a note consistent with the brand.

The Figma file includes:

Wireframes: Low-fidelity layouts for Cart, Checkout, and Confirmation with annotation legends

User Flow: Desktop checkout flow diagram — happy path and three error branches (empty cart, address error, card declined)

Foundations: Primary and supporting colour palettes, dual type system (Cormorant Garamond + Inter), 4px spacing scale, radius scale, elevation system

Components: Full reusable component library covering form inputs, buttons, product line items, order summary, step indicators, and error states

Screens: Five high-fidelity desktop screens at 1440px (Cart, Shipping, Payment, Review and Confirm, Confirmation)

Verdant demonstrates how a strong brand aesthetic and a rigorous checkout UX can reinforce rather than compromise each other. The editorial typographic pairing, the warm earthy palette, and the careful use of elevation and spacing all serve the functional goal: a checkout that feels premium, moves linearly, and handles failure states with clarity and grace — keeping the user on the path to completing their purchase.