Keytrade Bank · Case study
Shaping a design system for working with AI.
Connecting design knowledge, components, and product context so teams can explore ideas with AI while staying grounded in the bank’s design principles.
The challenge
AI is changing how product teams explore, design, and build. At Keytrade Bank, that creates an opportunity to make the design system more useful throughout the work.
The existing system documents components, tokens, and guidelines. But the knowledge needed to apply them is spread across Figma files, wiki pages, and people’s experience. Knowing which component exists is only part of the task. Teams also need to understand when to use it, why it works, and how it fits the product.
I’m helping bring that knowledge together in a form that both people and AI tools can use.
How we got there
Understanding what the system knows. We began by auditing the available design knowledge and where it lived. This included interface patterns and principles, alongside product context and the reasoning behind previous decisions.
The audit helped us look beyond the component library. A reusable component provides a starting point, but its value depends on the guidance around it. Without that context, teams still have to reconstruct decisions or rely on colleagues to fill the gaps.
The work therefore focused on connecting the system’s building blocks to the knowledge needed to use them well.
Making guidance usable. We restructured the knowledge around when, why, and how components should be used. The aim was to make the relationship between a component, its purpose, and its usage guidance explicit.
For designers and engineers, this creates a clearer reference when making product decisions. For AI tools, it provides context that can guide suggestions towards established patterns and principles.
The ambition is to give teams more freedom to explore ideas while keeping that exploration connected to the product and its customers.
Bringing the system into everyday work. Together with design and engineering, we brought the system into the tools teams already use, from design files to code assistants.
This makes access to guidance part of the workflow. The system can support a decision while someone is exploring an interface or implementing a pattern, reducing the need to search across separate sources.
It also gives design and engineering a shared basis for discussing how an idea should behave and how it should be built.
Learning through small pilots. Small pilots with product teams are helping us understand where the system adds value and where it creates friction.
These pilots shape the next steps. They provide a practical way to assess whether the guidance is understandable, whether the connections are useful, and whether the system fits the way teams work.
The approach keeps development grounded in actual use as both the system and the tools around it evolve.
An evolving foundation
The design system is becoming a shared foundation that connects components, patterns, principles, and product context for people and AI tools alike.
The intended outcome is more consistent design and implementation, with better support for exploration along the way. As the work continues, the focus is on making the system useful at the point where product decisions happen.