Verdant — E-commerce Checkout Flow

Verdant

Verdant is a premium plant brand concept designed as part of the Uxcel UX Design career path. The brief was to design a checkout flow for an e-commerce platform addressing cart abandonment.

Approach

I built the project in the same layered approach I use across all my work: foundations first (colour tokens, type scale, spacing), then components (nav, product cards, form inputs, buttons, order summary), then screens assembled from those components. Desktop (1440px) was chosen as the primary device given the research-backed preference for desktop checkout completion rates.

Key decisions

The palette uses a warm sand/linen ground paired with a deep forest green and olive accent. All interactive elements meet WCAG AA contrast minimums.

Typography uses Canela for display headings to reinforce the premium, editorial feel, with Inter for UI text to maintain legibility.

The cart uses a two-column layout (items left, order summary right) for at-a-glance total visibility, reducing abandonment. Checkout is split into Shipping and Payment steps to reduce cognitive load. A persistent order summary sidebar appears on all steps.

Microcopy is present throughout: delivery estimate on the cart screen, inline validation on form fields, trust signals at payment, and a clear confirmation state.

Outcome

Four screens (Cart, Checkout/Shipping, Checkout/Payment, Confirmation), a full user flow diagram, component sets, and a foundation library.

Prototype

https://www.figma.com/design/gz4aOY60hy4rjlKlZdOrBo/Verdant-E-commerce-Checkout-Page