Case study · Dijitally x Afterpay · ANZ, US, UK

Afterpay’s new B2B site

Designing Afterpay’s new B2B website, its go-to-market surface in every international market, with AI workflows I built to go from strategy to UI.

The customer: Businesses considering Afterpay, from small businesses to large enterprise and platform partners
Team: Afterpay’s global B2B team, and me as lead UX and product designer
Skills: UX strategy
Wireframes
UI design
Design systems
AI workflows

The problem

Afterpay needed a new B2B website for every international market, with many page types for different businesses, all built consistently from one design system.

How I solved it

01Started every page from strategy: module intent cards tied to the business segment each page serves, before any layout.
02Built an AI workflow in Figma that turns that strategy and approved components into wireframes, so pages start from real modules, not blank frames.
03Reworked the wireframes myself, then ran a review workflow that compares my version with the AI’s and folds each lesson back in, so the same correction isn’t needed twice.
04Converted approved wireframes into high-fidelity UI from the Afterpay B2B Design Library’s production components, including locale and mobile versions.

Outcome

Pages across the site, from homepages for ANZ, the US and the UK to product, industry, partner and support pages, all on one skeleton and one design system.

Inside the work

Strategy: module intent cards for the page’s business segment
Wireframes built from approved components by my Figma AI workflow
I rework the wireframes
Review: my version is compared with the AI’s, and the lesson goes back into the workflow
UI built from the Design Library’s production components

The workflow, from strategy to UI.

What businesses say about Afterpay: three quote cards, each with the person’s photo, name and business — Quotes from businesses, with the name and logo anchored to the bottom so cards of different lengths still line up.

The benefits of Afterpay: three image cards, each with a bold lead-in followed by grey supporting copy — The benefits module. Each point opens with the claim in full contrast, then drops to grey for the detail.

Meet the Afterpay customer: four stat cards in mint, teal, blue and white — The stat module, sized so the number carries the card and the note sits under it.

What I learned

The value wasn’t in generating wireframes, it was in feeding my corrections back in, so each build started from my preferences instead of repeating a mistake.