A passion project landing page for Breeze, the agentic workforce for payments.
How can breeze.com explain Breeze at a glance?
Breeze runs payments for apps and games. You integrate once, AI agents handle fraud, approvals, disputes, payouts and support, and Breeze carries the risk as merchant of record. The product is simple. The website made it hard to see.
I led the creative direction, from the brand system to a working site
Research, palette, type, isometric icons, the component library and the landing page. Designed in Figma first, then built and animated in code.
The website lacks simplicity and quick understanding
It is too complex and the visual approach feels outdated. Glass, gradients and a rotating headline sit on top of the message, and the parts that build trust come last.
People judge how credible a site is within about 50 ms of seeing it and read only about 20 to 28% of a page's words. Breeze's backers sit 82% down the page and merchant of record first appears at 88%, long after that judgement and past where most people read.
Text over glass and moving gradients has no fixed background, so its contrast can't be held to the WCAG 4.5:1 minimum everywhere. Tabs and carousels put most of the product behind clicks, an interaction cost most visitors never pay.
What if the first screen showed how Breeze plugs into your product?
The people buying Breeze run product and payments. They want to see where it sits in their stack before they read a single perk.
A diagram of where Breeze sits gives buyers the model before the details, so every later section has somewhere to land. Seeing the flow is easier than holding a description of it in your head.
What makes a payments page easy to trust?
Two rules for every decision on the page.
A diagram, real UI and numbers drawn to scale do the explaining.
Backers and the four key numbers sit in the first section, with no glass or gradients: one toned blue, sharp corners, AA contrast.
A hierarchy through the scroll
A solid hero explains what Breeze is and how it is added. Each section after it answers the next question a buyer asks, in order.
- What is it, and how is it added?Hero: category, flow, four numbers, backers →
- What happens after I integrate?How it works: four steps →
- What does it handle?What's included: six groups →
- Who uses it already?Customers: a quote with its numbers →
- How do I start?Get started →
Each section answers one question, in the order buyers ask them: what it is, how it works, what it covers, who uses it, how to start. Headings written as answers let people scan from heading to heading and still get the story.
The page is 29% shorter and every key claim is in the first section, so the decision doesn't depend on reaching the footer.
What is Breeze, and how is it added?
The headline keeps Breeze's own category. The diagram does the explaining: your app connects once, Breeze switches on every rail and holds the entities, tax, agents, disputes and support. Four numbers sit underneath, each drawn to scale, with the backers right after.
Words and pictures are processed through separate channels, so a headline plus a diagram is understood faster and remembered better than text alone.
Each number has a chart whose length or count is the value, one of the most accurately judged visual cues. Backers and volume sit right under the headline, where first impressions form.
What happens after I integrate?
Four steps, each with a working piece of UI: the real API call, markets switching on, agents running, and a bar that shows who carries the liability.
Working memory holds about four items at once, so four numbered steps fit in one look and show where you are. People push harder as a goal gets closer, so the integration feels short and finite.
Each step shows the UI it produces: the API call, markets switching on, agents running. Readers see the outcome instead of imagining it.
What does the workforce handle?
Every perk stays, grouped by job instead of hidden in tabs: legal and money, getting paid, risk, paying out, your customers, your developers.
Items inside one box read as one group, so 24 perks become six jobs to scan. With no tabs, every perk is on the page: seeing one costs a glance, not a click.
Pictures are recognised and remembered better than words. Each group's icon is a landmark you can find again without reading.
Who uses it already?
Legend of Mushroom's own numbers after leaving Apple IAP, charted: +20% submission rate and 95% payment success. Then the companies the team comes from, on a loop.
A named customer with measured results is stronger evidence than a wall of logos or an adjective. The two bars put Apple IAP and Breeze on one scale, so the +20% is visible before it's read.
The companies the team comes from lend the product their credibility.
How do I start?
One action, the backers again, and a footer that lists every product and the trust badges.
Decision time grows with the number of choices, so one primary action per view keeps the next step obvious. The backers repeat at the end, where the last thing seen is the best remembered.
A calmer system to carry the story
I kept the logo and PP Neue Montreal. Glass and gradients are gone, the blue is toned down so it doesn't tire the eyes, and every box and button has sharp corners.
Specialised AI agents run fraud, approvals, disputes, payouts and support for you.
POST /v1/payment_pages
The eye can't focus saturated blue as sharply as other colours, so dropping chroma from 0.28 to 0.20 keeps the brand blue without the glare. Flat surfaces with no glass keep contrast fixed: every text pair passes WCAG 2.2 AA, 4.5:1 for body text and 3:1 for large text and UI parts, and the browser no longer re-blurs the page on every scroll frame.
Regular and Medium only, so size and spacing carry the hierarchy and fewer styles compete for attention. Icon lines are shapes, not strokes, so an icon keeps its weight at any size; below 64 px the iso detail turns to noise and flat glyphs take over.
Movement that explains
Everything runs on one 16 s loop. The hero diagram draws itself and a packet runs through Breeze, numbers count up, the code types itself, and the isometric icons rebuild one at a time.
- Tooltips on every chart
- Clickable rails and toggles
- Dots ripple on hover
- Magnetic buttons
- Iso icons follow the mouse
- Logo marquee speeds up as you scroll
The packet's path shows the order of events: app, Breeze, rail, then what Breeze holds. Elements move between states instead of swapping, so the eye keeps track of what changed.
With reduced motion on, every animation shows its final state.
The same order on a phone
Sections stack in the same order. On a phone the hero diagram stands upright, so every label keeps its size and nothing scrolls sideways.
The diagram turns upright instead of shrinking to fit a 390 px screen, so every label keeps 13 px+ text. Sections keep the same order on every screen, so returning visitors find things where they left them.
A page that explains itself in the first section
A working passion project, live and animated, with every claim sourced from Breeze's own site and docs.
Let the product do the explaining
The parts that work best show Breeze doing its job: the flow, the API call, the liability bar. The copy only has to name what you're looking at.
- Cialdini, R. (1984). Influence: The Psychology of Persuasion.
- Cleveland, W. and McGill, R. (1984). Graphical perception. Journal of the American Statistical Association.
- Cowan, N. (2001). The magical number 4 in short-term memory. Behavioral and Brain Sciences.
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology.
- Kivetz, R., Urminsky, O. and Zheng, Y. (2006). The goal-gradient hypothesis resurrected. Journal of Marketing Research.
- Lindgaard, G. et al. (2006). Attention web designers: you have 50 milliseconds to make a good first impression. Behaviour and Information Technology.
- Murdock, B. (1962). The serial position effect of free recall. Journal of Experimental Psychology.
- Nelson, D., Reed, V. and Walling, J. (1976). Pictorial superiority effect. Journal of Experimental Psychology: Human Learning and Memory.
- Nielsen, J. (2008). How little do users read? Nielsen Norman Group.
- Paivio, A. (1971). Imagery and Verbal Processes.
- Palmer, S. (1992). Common region: a new principle of perceptual grouping. Cognitive Psychology.
- Pernice, K. (2019). Text scanning patterns: eyetracking evidence. Nielsen Norman Group.
- W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2.
