Barclays.co.uk

The stakes

Barclays.co.uk is the front door to one of the UK's biggest banks — 130M+ visits a year, from checking a mortgage rate to finding help in a financial emergency. The site had grown to 300+ pages with no consistent UI kit, a tangled information architecture, and a design that met neither modern user expectations nor accessibility standards. Every page was bespoke; every change was slow.

The brief was a complete responsive redesign. But the real problem was structural: without a shared design language, the organisation couldn't ship consistently at this scale. So I framed the project as two products in one — the website customers would see, and the system the bank would build everything with afterwards.

A system before a website

I started by auditing the entire site to surface its repeating design patterns, then designed a set of responsive components to serve as the foundation — each one iterated through multiple rounds of in-house customer testing before being locked into the kit. This became the Barclays Design Language, which I led the creation of alongside co-founding the Barclays Design Council to govern it.

The hardest component was the humble table. Financial content is dense with comparison tables, and they fail badly on small screens. User testing showed that the conventional answer — horizontal scrolling — didn't work; people lost track of what they were comparing. I restructured tables entirely for mobile, reflowing rows into stacked, scannable cards. Testing confirmed the restructured design outperformed scrolling, and it became the standard pattern across the estate.

Scaling design through workshops

Three hundred pages can't be designed one at a time by one team — and they shouldn't be. With the component set as a shared vocabulary, I ran wireframe design workshops with stakeholders across the business, building page structures together rather than presenting finished designs for sign-off. Stakeholders who help assemble a page don't ask for revisions later; the workshops delivered faster sign-off and dramatically fewer late changes.

The cadence was deliberately tight: new designs tested weekly in our in-house usability facility, refined, then released to development. Evidence kept opinions honest — including mine.

Information architecture, proven with data

A beautiful site that customers can't navigate is a failure, and the existing IA had grown organically into something only employees understood. I restructured it around discoverability, using card sorting with customers to rebuild the hierarchy from their mental models rather than the org chart — then verified the new structure with online tree tests before a single page was built.

The tree test put 12 navigation tasks to users against both architectures. The results made the case unarguable:

• Success rate: 52% on the original IA → 72% on the new structure.

• Directness: 78% → 90% — users took the right path first time, rather than recovering from wrong turns.

• Time taken: 7m 40s → 7m 8s across the task set.

Leading delivery, not just design

Midway through the programme, a project manager's maternity leave left a gap on a parallel workstream: a suite of bespoke financial tools. Rather than let it stall, I took it on jointly — Lead UX Designer and project manager — earning a PRINCE2 certification and leading a cross-functional team of 10 to deliver 10+ unique components over six months, on time.

It was the most useful thing I've done for my design practice. Owning the delivery plan, the dependencies and the budget changed how I scope design work permanently — I've never since designed something without knowing what it costs to build.

Outcomes

• —Awarded Financial Website of the Year
• —Navigation success up from 52% to 72%, directness from 78% to 90%, task time down from 7m 40s to 7m 8s — proven by tree testing before launch
• —The Barclays Design Language adopted across the entire digital estate, cutting design and development time by 50%
• —300+ pages redesigned, responsive and built to WCAG accessibility standards, serving 130M+ annual visits
• —Bespoke financial tools suite delivered on time by a cross-functional team of 10

Looking back

What I'd do differently: I'd have brought engineering into the component design loop even earlier. The Design Language halved delivery time once adopted, but the first components were designed ahead of the build system and needed rework to match technical constraints. Designing the system with its builders, not for them, is now how I work by default.

Where it led: Barclays taught me that the highest-leverage design work is often the system underneath the screens. It's the playbook I took to Cisco — where the Sales Org UI Kit and Topology Builder applied the same thinking to enterprise tooling.