TEA Payments — Website & Visual Identity

A marketing site for a B2B payments platform, built around one question most competitors avoid: where did the money actually go?

Project description

Payments companies almost all sell the same thing — volume, speed, uptime. Open five of their sites and you'll get five variations of the same throughput number above the fold.

TEA's actual advantage was quieter. Not that it moves money faster, but that you can see what happened to every transaction, the day it settles. So the site leads with that instead: "Know Where Every Payment Went." Every section after it earns that claim rather than restating it — reconciliation that finishes the same day, one stated rate per transaction, 190+ markets under one contract.

I wrote the site end to end alongside designing it. Positioning, headlines, pricing tiers, FAQ, error states, the wording inside form buttons. Copy and layout were never handed off between two stages — the "no dashboard archaeology required" line in the hero exists because the layout had room for one more clause, and the pricing tiers are three because the product genuinely has three shapes of customer, not because three columns fill a grid nicely.

Identity. A single blue does the work — #1D4ED8, deep navy beneath it, white above. Finance sites reach for either sober navy or startup gradient soup; this sits between, saturated enough to feel current, disciplined enough to sign a contract in front of.

Motion. The heroes run a live liquid-gradient shader rather than a static image — slow enough to read as expensive, not as a screensaver. The centrepiece is a particle globe with the currencies plotted as real markets, USD in New York through AUD in Sydney, with flight paths tracing between them. It's the argument made visually: money crossing borders and staying accounted for.

Systems. Built in Framer as components with variants throughout — pricing cards, hover feature cards, an accordion where each open state is its own wired variant. Every section responsive across desktop, tablet and phone, with the components carrying breakpoint-specific geometry rather than being squeezed.

The curiosity showing up most is in the small decisions. The globe's hotspot labels pair each country with its currency instead of its capital, so the mark doubles as a coverage map. The subscribe button has written success and failure states, because a form that says nothing when it breaks is a design that stopped early.

Details block

Role , Design, front-end build, copywriting Built with , Framer, custom shaders, code components Deliverables , Marketing site (multi-page, fully responsive), visual identity direction, full site copy, motion design

Skills / tags

Web Design · Framer · Brand Identity · UX Writing · Motion Design · Design Systems · Fintech · Responsive Design