In ATB’s evolving digital landscape, our team identified the need for a centralized design system to unify disparate design patterns, development frameworks, and backend systems. Various products and platforms exhibited inconsistencies in UI components, a lack of accessibility compliance, and friction within our internal processes that often resulted in increased workload. Resistance to change led teams to revert to traditional methods, while securing a budget for ongoing development required broader buy-in. Building a dedicated team for effective design system governance also proved to be a hurdle.
To address these challenges, a small team was formed to spearhead the creation, implementation, and scaling of a design system aimed at enhancing consistency, fostering collaboration, and accelerating product development.
Timeline
November 2022 –
February 2025
Client
Designers, developers and product managers
ATB Design System
Scope
Accessibility
Components
Design tokens
Documentation
Icons and illustration
Implementation guidelines
Motion and animation
Style guide
UX patterns and interactions
Wireframing & prototyping
As a Product Designer on the design system team, I expanded the colour palette keeping accessibility in mind, developed web and mobile components - including tokens, and led focus groups to validate component usability.
My background with ATB's brand team and visual communication skills helped bridge the gap between brand and UX, reinforcing collaboration and ensuring consistency across the Design System and ATB’s brand.
My role
To ensure successful adoption and cross-functional alignment, our team conducted workshops and presentations to educate and promote the design system across various teams. This helped to foster widespread understanding and engagement.
Through these knowledge-sharing opportunities, our team gained valuable feedback from designers, developers, and leadership to enhance the design system.
Education & support
The design system was piloted across select products and platforms to evaluate feasibility, usability, and risks before a full launch. I further supported the team as a design system ambassador, ensuring updates were communicated effectively prior to implementation. The initiative provided valuable insights, leading to improvements in usability, better brand alignment with other ATB products, and demonstrated the low effort required to apply design system elements, proving its success.
MVP phase
Lessons & achievements
Building an internal design system for ATB from the ground up was a major learning curve. Despite limited capacity and budget, our small but mighty team successfully established a scalable foundation for product consistency and innovation. Through adaptability, regular communication and collaboration, we overcame challenges and drove engagement and adoption.
Contributing to the design system provided invaluable lessons that I continue to apply to my practice, including:
• the importance of consistent communication: regular updates on component creation and iteration helped developers and product teams navigate usability and implementation efforts
• the power of user-testing: focus groups provided insights into component functionality, ensuring the delivering of responsive, intuitive assets.