OakNorth - Designing OakNorth for the AI era
OakNorth - Designing OakNorth for the AI era
Leading design across Business Banking while building the systems, tools and AI-native workflows behind OakNorth's evolving product ecosystem.
Leading design across Business Banking while building the systems, tools and AI-native workflows behind OakNorth’s evolving product ecosystem.
- Role
- Lead Product Designer
- Responsibility
- Business Banking · Design Systems · AI
- Timeline
- 2025 — Present
- Outcome
- Ongoing
- Role
- Lead Product Designer
- Responsibility
- Business Banking · Design Systems · AI
- Timeline
- 2025 — Present
- Outcome
- Ongoing
I - Rebuilding the foundation
As OakNorth's product ecosystem grows, we needed a shared foundation capable of supporting different banking experiences while improving consistency, accessibility and speed.
Working closely with engineering, I led the creation of Timber, a new design system built from the ground up around OakNorth products.
Today, Timber contains 200+ component sets and 100+ token variables, with theming, dark mode and accessibility built in. It is now live in Personal Savings, with migration across the wider product ecosystem ongoing.
As OakNorth’s product ecosystem grows, we needed a shared foundation capable of supporting different banking experiences while improving consistency, accessibility and speed.
Working closely with engineering, I led the creation of Timber, a new design system built from the ground up around OakNorth products.
Today, Timber contains 200+ component sets and 100+ token variables, with theming, dark mode and accessibility built in. It is now live in Personal Savings, with migration across the wider product ecosystem ongoing.
Closing the gap between design and engineering
A fundamental problem with traditional product development is translation.Designers create in Figma. Engineers interpret it in code. Differences emerge between the two, and over time the design and production systems begin to drift apart.
We wanted Timber to reduce that translation layer as much as possible.
Its components, tokens and styling architecture are designed in close collaboration between design and engineering, with StyleX forming part of the coded styling foundation. Decisions made at system level can therefore propagate through both how we design products and how those products are ultimately built.
The goal is not perfect parity for its own sake. It's creating a shared language between design intent and production reality.
A fundamental problem with traditional product development is translation.Designers create in Figma. Engineers interpret it in code. Differences emerge between the two, and over time the design and production systems begin to drift apart.
We wanted Timber to reduce that translation layer as much as possible.
Its components, tokens and styling architecture are designed in close collaboration between design and engineering, with StyleX forming part of the coded styling foundation. Decisions made at system level can therefore propagate through both how we design products and how those products are ultimately built.
The goal is not perfect parity for its own sake. It’s creating a shared language between design intent and production reality.
Designed for AI…and designers, and engineers.
That shared architecture became particularly important as AI changed how we prototype.
Our internal AI tools can work directly with Timber's coded components, tokens and rules. For early product explorations, that means we can skip Figma entirely, and we can move from an idea directly into a working, code-native prototype built using OakNorth's actual design language.
Because the model is constrained by the system, the output isn't arbitrary AI-generated UI. It inherits Timber's components, styling and established patterns, keeping experimentation brand-consistent and structurally much closer to production.
That shared architecture became particularly important as AI changed how we prototype.
Our internal AI tools can work directly with Timber’s coded components, tokens and rules. For early product explorations, that means we can skip Figma entirely, and we can move from an idea directly into a working, code-native prototype built using OakNorth’s actual design language.
Because the model is constrained by the system, the output isn’t arbitrary AI-generated UI. It inherits Timber’s components, styling and established patterns, keeping experimentation brand-consistent and structurally much closer to production.
That shared architecture became particularly important as AI changed how we prototype.
Our internal AI tools can work directly with Timber’s coded components, tokens and rules. For early product explorations, that means we can skip Figma entirely, and we can move from an idea directly into a working, code-native prototype built using OakNorth’s actual design language.
Because the model is constrained by the system, the output isn’t arbitrary AI-generated UI. It inherits Timber’s components, styling and established patterns, keeping experimentation brand-consistent and structurally much closer to production.
Design as infrastructure
Timber is a source of truth that can be consumed by designers, engineers and AI applications.
That has implications beyond faster prototyping - the system helps AI understand what components exist, how they should behave, which tokens are valid and what constitutes an OakNorth interface.
The design system is infrastructure for the product itself.
II - From system to product
Timber is now live in OakNorth's Personal Savings app, providing the foundations, components and interaction patterns behind the public product experience.
See the final Timber screens below, and what they looked like previously.
Timber is now live in OakNorth’s Personal Savings app, providing the foundations, components and interaction patterns behind the public product experience.
See the final Timber screens below, and what they looked like previously.
III - Built-in governance
Product files naturally drift. Components become outdated, tokens change, styles get detached and yesterday's correct implementation becomes tomorrow's technical or design debt.
So I built Root.
Root is an internal Figma plugin, built natively using Claude Code, that scans product files against the latest version of Timber. It identifies outdated or incorrect tokens and components and automatically reconnects them to their compliant equivalents.
Scan → Detect → Correct
Work that could otherwise require hours or days of manual auditing can be identified and corrected systematically.
Product files naturally drift. Components become outdated, tokens change, styles get detached and yesterday’s correct implementation becomes tomorrow’s technical or design debt.
So I built Root.
Root is an internal Figma plugin, built natively using Claude Code, that scans product files against the latest version of Timber. It identifies outdated or incorrect tokens and components and automatically reconnects them to their compliant equivalents.
Scan → Detect → Correct
Work that could otherwise require hours or days of manual auditing can be identified and corrected systematically.
IV - Designing how design designs
The same thinking extends beyond Timber.
I've been building an internal Toolbelt of focused applications that remove repetitive production work from the design process.
Rather than asking designers to become experts in every production workflow, the tools encode established standards and make them accessible to the team.
Root
Automated Timber compliance and design-system maintenance.
Flutter
Turns rough inputs into polished, brand-consistent product animation.
Fig
Converts and optimises video into production-ready formats without manual export workflows.
Dendro
Generates original, on-brand vector assets directly within Figma.
The same thinking extends beyond Timber.
I’ve been building an internal Toolbelt of focused applications that remove repetitive production work from the design process.
Rather than asking designers to become experts in every production workflow, the tools encode established standards and make them accessible to the team.
Root
Automated Timber compliance and design-system maintenance.
Flutter
Turns rough inputs into polished, brand-consistent product animation.
Fig
Converts and optimises video into production-ready formats without manual export workflows.
Dendro
Generates original, on-brand vector assets directly within Figma.
The objective isn't to automate design, it's to automate the repetitive work around design, giving designers more time for the decisions that actually require judgement.
The objective isn’t to automate design, it’s to automate the repetitive work around design, giving designers more time for the decisions that actually require judgement.
The objective isn’t to automate design, it’s to automate the repetitive work around design, giving designers more time for the decisions that actually require judgement.
V - The work has only just begun…
V - The work has only just begun
This work is ongoing.
Timber continues to migrate across OakNorth's product ecosystem while I continue design across Business Banking and continue developing the systems, tools and AI-native workflows surrounding how we design and build products.
Much of that work isn't public yet, so this case study represents only what can currently be shown.
This work is ongoing.
Timber continues to migrate across OakNorth’s product ecosystem while I continue design across Business Banking and continue developing the systems, tools and AI-native workflows surrounding how we design and build products.
Much of that work isn’t public yet, so this case study represents only what can currently be shown.