Confido Legal — Thirty pages, one system, every before beside its after
A full website redesign for a legal payments platform — thirty page templates rebuilt on one token and component system, every one with its legacy page beside it.
Page templates redesigned for desktop and mobile, each built beside its legacy counterpart on one component system.
[ The problem ]
Confido Legal sells embedded payments to law firms and to the legal-tech platforms those firms run on — two audiences with different questions. The old site answered neither well: a generic template with a single pitch, a pricing page of two pills, an integrations page that was a fifty-logo scroll, and no path at all for developers. For a company handling over a billion dollars in legal payments, the site was the least credible thing about it.
[ Goals ]
Two audiences, one site — law firms and legal-tech developers each get a clear path from the first screen. Credibility — volume, integrations and customers shown as evidence, not claims. Every page, not just the homepage — thirty templates rebuilt on one system so nothing on the site is left behind. A system the team can extend — tokens and components so new pages match without a designer.
Approach
Every legacy page was captured live and placed in the file beside its redesign, so each template was argued against the page it replaced rather than against a blank canvas. The audit set the structure: two audiences, so the homepage opens with a choice — law firms one way, developers and partners the other — and every product page inherits that split. The system came first. A token layer of 147 variables across typography, colour and layout, then fifteen component sets — navbar, buttons, stat cards, segment cards, workflow cards, trust bar, partner grid, article cards, footer — and every one of the thirty templates built from them, desktop and mobile in the same frame. The pages were reviewed with Confido's marketing lead in rounds. The demo scheduler is the clearest example: their feedback kept the step-by-step flow and its two paths by firm size, asked for a slimmer chrome so prospects finish the steps, and the page was rebuilt to that brief rather than to the first concept.
[ Scope and constraints ]
[ The work ]
The surfaces.
Pricing
Turn two pills and a paragraph into a page that answers the question a law firm is actually asking: what will this cost us per transaction, and what is included.
Accept-payments and send-payments rates separated into their own blocks, ACH and card side by side, with every included feature listed once. Left is the legacy page, right the redesign.
Accept and send pricing sit on one page with the surcharge and onboarding notes beside the numbers, not in a footnote.
Integrations and partners
Replace a fifty-logo scroll with a directory a firm can search by the software it already runs.
Partners grouped by category with a filter row, a consistent card per integration, and a partner-page template for the ones that need depth. Left is the legacy page, right the redesign.
Each partner gets a template page with how the integration works, so the directory doubles as the developer story for prospects.
Knowledge base
Bring support content onto the same system as the marketing site so a customer never feels they have left the product.
Category grid, article template and a search-first landing built from the same cards and type scale as the rest of the site. Left is the legacy help centre, right the redesign.
Categories, article and search templates share the site's components; support stopped looking like a different vendor.
Schedule a demo
Keep a prospect focused through a multi-step scheduler that routes by firm size and current integration.
Stakeholder feedback asked to keep the step-by-step flow, remove distractions and show progress. The redesign holds details and calendar side by side, with the demo type chosen up front.
Rebuilt to the client's brief: the existing step logic stayed, the chrome slimmed, and the booking calendar sits in the same view as the details.
Two audiences from the first screen
Give law firms and legal-tech developers each a clear path without splitting the site in two.
A 'choose your path' pair directly under the hero — law firms light, developers and partners dark — followed by the four reasons that apply to both.
The two-path block became the pattern every product page inherits, and the shipped homepage opens on it.
Mobile
Carry every template to a single column without losing the proof points or the two paths.
Stats stack into a card, the two paths stack in order, and the reasons and workflow cards keep their icon-led structure at one column.
Thirty templates at 375px, designed in the same frame as desktop rather than adapted afterwards.
A page for the developers
Give the second audience — legal-tech platforms embedding payments — a page that speaks their language instead of a marketing pitch with the word API in it.
Hero, then the design-build-own roadmap, then evidence: platform testimonials, an accelerate-growth block with what the integration handles, a GraphQL sample in a dark terminal card, and 'benefit as we build' — the API keeps growing without the partner's work.
Developers get a page with a roadmap, a code sample and proof from platforms already on the API; the legacy page had a hero, a video and a testimonial.
[ The system underneath ]
[ Results ]
30+ | Page templates, desktop and mobile 147 | Design tokens across typography, colour and layout 15 | Component sets, 114 components 2 | Audiences, one site — law firms and developers
The redesign is live. The homepage now opens on the two-path structure, product pages carry real proof — API calls, volume processed, firms served — and the integrations page became a partner directory instead of a scroll. The part that lasts is the system. Confido's team can add a practice-area page, a knowledge-base article or a partner page from the same tokens and components, and it will look like it belongs.
What I carry forward
Keeping every legacy page in the file next to its replacement was the most useful decision in the project. It kept the redesign honest, and it made every review a comparison instead of a taste debate.