Case Study: Implementing an Atomic Design System at Xapo
Background
When I joined Xapo, the company was in the middle of a significant brand transition. Over time, Xapo had evolved from a simple crypto wallet into a more ambitious product, but this growth had happened without a cohesive design strategy. The result was a fragmented product experience — each regional team (from Brazil to Argentina, Africa to Europe) had slightly different versions of Xapo, with inconsistent feature sets, brand elements, and user experiences. Despite sharing the Xapo name, the product looked and felt different depending on where you used it.
The existing design system was minimal at best: a collection of shared icons, a basic colour palette, and a handful of generic components like buttons and containers. However, without a unified approach, designers had adapted and modified these elements to meet their own regional needs, further compounding the inconsistency.
Should you have a design system?
Having a design system in place is often essential for ensuring unity, consistency, and efficiency in design delivery, particularly as businesses scale and manage multiple products or brands. A well-crafted design system provides a centralised source of truth for design patterns, components, and principles, enabling teams to maintain visual and interaction consistency across all touchpoints. This becomes even more critical when organisations curate multiple products under one umbrella, where each product may serve slightly different user segments, with distinct themes or brand expressions. In such cases, a design system acts as both a foundation and a flexible framework, allowing for coherence while enabling the necessary nuances between products.
However, while design systems offer clear benefits, there is also a risk that they can unintentionally limit the pace of innovation if they become too rigid or overly governed. It’s important that design systems do not constrain creativity or prevent teams from pushing boundaries. The most successful systems are designed to evolve—they provide guardrails, not fences. Certain foundational elements, such as colour palettes, typography styles, iconography, and core grids, might be deliberately locked to maintain brand integrity. Other areas, like component variations, containers, or layout systems, can be more fluid, adapting over time as new user needs, design trends, or platform requirements emerge.
Equally important is ensuring that the design system is deeply aligned with the engineering team from the outset. Building a ‘code counterpart’ for each component in the design system—through a shared component library or design tokens—allows for seamless handoff between design and development. This alignment accelerates delivery speed, reduces design debt, and ensures consistency in user experience across platforms. At Xapo, I personally oversaw the implementation of an all-encompassing design system that spanned our website, web app, and mobile products. This approach meant that regardless of which team or squad was working on which product line, they always had access to a shared, scalable set of components that both designers and engineers could rely on—driving efficiency, maintaining brand cohesion, and improving user trust across our digital ecosystem.
The Challenge
My role was to spearhead product design globally and oversee a brand refresh that would unify the fragmented cross-functional teams and deliver a consistent, high-quality product experience. This was not just a visual update — it was about repositioning Xapo from a crypto wallet into a “private safe haven bank account” offering secure access to crypto and USD currencies.
We needed a scalable design system that could bring together the diversity of regional requirements while maintaining a cohesive global brand and product experience across both app and web platforms.
The Approach: Atomic Design System
To tackle this, I defined a clear strategy based on Atomic Design methodology, as set out by Brad Frost. This modular approach — building from atoms (basic UI elements) to molecules, organisms, templates, and pages — provided the perfect structure to create reusable components while ensuring flexibility for different product needs.
Key Steps:
Vision & Principles
I established a clear vision for the design system:
Consistency across all platforms and regions
Scalability to adapt to future product growth
Efficiency in design and development workflows
A user-centered approach focused on clarity, trust, and delight
Team Structure & Leadership
I led a large, multidisciplinary design team, including product designers, animators, illustrators, and researchers at varying levels from junior to lead. We allocated dedicated weekly hours to the design system project, with one designer and myself leading its implementation.
Collaborative Build in Figma
We built the design system in Figma, ensuring a single source of truth accessible to all teams. The system included:
A comprehensive foundation layer (colour tokens, typography, grid systems)
An extensive components library (buttons, inputs, cards, navigation patterns)
Scalable molecules and organisms for complex UI patterns
Guidelines for interaction states, animations, and micro-interactions
Assets for marketing, product, and development alignment
Governance & Maintenance
To future-proof the system, we created a framework for governance, defining clear guidelines on how new components would be proposed, reviewed, and added. This ensured quality control and avoided design drift.
Cross-Functional Collaboration
We worked closely with engineering to align design tokens with development frameworks, ensuring a seamless handoff and consistent implementation across app and web platforms.
Brand Integration
The design system became the backbone of Xapo’s new brand identity, bringing the visual and experiential shift from “crypto wallet” to “private digital bank” to life in every interaction, while allowing regional nuances to exist within a global brand standard.
Results & Impact
Achieved consistent design language across all regional product variants
Improved design-to-development efficiency with reusable components and clear documentation
Increased team alignment and collaboration across design and engineering
Enabled faster feature delivery with less redundancy and reduced technical debt
Delivered a cohesive user experience that reflected Xapo’s new positioning as a secure, trusted financial platform
Built a scalable system ready to support future product growth and evolving market needs
File naming conventions
While creating a new design system, we also created a new process for file naming with the goal to solve the following points and aiding developer handover.
❌Each squad and designer is using a different organising system for their files and artboards
❌Artboards do not have a single naming convention, making it difficult to reference across tools
❌Looking at a Sketch file, it is difficult to know which area already in production, and which are exploratory
✅Adopt a uniform organising system that can be used across designers, design teams and squads
✅Every individual dartboard should have a unique ID, that matches across Sketch, Marvel, Jira etc
✅Our system should extend to Sketch files themselves, so anyone can tell the status of a screen.
Summary
Implementing an atomic design system was not just a design exercise — it was an organisational change that brought clarity, alignment, and quality to a complex, globally distributed product. By focusing on modularity, user-centered thinking, and cross-functional collaboration, we created a system that balanced the needs of both global consistency and local flexibility, while raising the bar for how Xapo delivers delightful, trusted experiences.
TLDR:
I led the implementation of an atomic design system at Xapo to unify fragmented regional products, creating a scalable, consistent design foundation that supported a global brand refresh and improved product delivery.
I've also implemented Design systems at Natwest, SuperFi and Loot.