B2B SaaS · Product & Web
Attributy
If the budget decision is hard, the interface should not be.
- Role
- UI/UX Designer & Creative Lead
- Tools
- Figma · Figma Motion · Photoshop
- Year
- 2025 to now
- Live
- Visit site ↗
- Live at attributy.com
- Around 50 pages across product, solutions and resources
- Product UI plus the marketing site
The brief
Attributy is a marketing attribution platform. It reconciles every channel a company spends on, online and offline, into one view of what actually drove revenue. The people who buy it are performance marketers, agencies and CFO facing marketing leads, and they arrive sceptical, because every analytics vendor promises the same thing.
I lead design here: the website end to end, and the product interface alongside it. The hard part is not decoration. It is making multi touch attribution, mix modelling and budget optimisation feel obvious to someone who has ten minutes and a budget meeting tomorrow.
Decisions
Show the product, do not describe it
The homepage puts the platform itself under the headline: a tab switcher moving through Live Tracking, Analytics, Attribution, Budget optimizer, Integrations and Agentic AI. A visitor sees the real interface in the first screen rather than another abstract diagram of arrows and clouds.
One question, asked in their words
“Revenue is happening. Do you know where?” The whole site hangs off that line, because it is the question a marketer is already asking themselves before they arrive. Everything below it is evidence.
An architecture that scales past me
Twenty product pages, ten solutions pages, thirteen integrations, plus blog, glossary, case studies and careers. Each family shares one page template, so the marketing team can add a capability or an industry without a designer redrawing the layout.
Answers, not dashboards
In the product, the Agentic AI view takes a plain question, “which offline channel is actually driving digital revenue”, and answers it in a sentence with the numbers attached. Data teams want the table. Everyone else wants the answer first.
Attribution is an argument about where money went. My job was to make that argument readable in one screen.
Sitemap
Structure first. Screens second.
Every page numbered and placed before a single screen was drawn, so the team could argue about the structure while it was still cheap to change.
drag sideways for the full map
The path
- 01
Question
The hero asks where revenue is coming from, then answers with one line about reconciling every channel.
- 02
See it
The product tab switcher shows six real views of the platform, no illustration standing in for the interface.
- 03
Recognise
Solutions pages speak to a specific industry or role, so a media agency reads about agencies, not about software.
- 04
Trust
Client logos, case studies and the integration list prove it plugs into the stack they already run.
- 05
Book
Book a Demo sits in the navigation on every page and repeats at the end of each argument.
Red route · step 05Everything is measured against one action: booking the demo. The site earns it, the product proves it.
The system
One family, three jobs. The display line runs Extra Bold at 58 with tracking pulled to minus 1.5 so a long sentence still reads as one object. Section heads sit at 38 Bold. Body runs 17.5 Medium at 1.55 line height, because attribution needs paragraphs and paragraphs need air.
- Display
- Inter 800 · 58 / 62 · tracking -1.5
- Section
- Inter 700 · 38 / 57
- Body
- Inter 500 · 17.5 / 27
- Interface
- Inter 600 · 15 / 22.5
- Action
- #6B4CFF · full pill
- Ink
- #0F0A2A on #FFFFFF
- Muted
- #6B6786
- Positive
- #17B26A
Product tab switcher
Six labelled tabs swapping real platform views inside one frame. The homepage centrepiece.
Platform shell
Dark sidebar, light workspace. One navigation pattern across Live Tracking, Analytics, Attribution, Budget optimizer and Agentic AI.
Page templates
Shared skeletons for product, solutions and integration pages so fifty pages stay consistent as the site grows.
Insight card
A single reconciled number with its supporting comparison. The smallest unit of the whole argument.
The screens
