Designing for Scale at Airtime
Brand, Design System
2024
Lead Product Designer
Work Details
Why Rebrand
At Airtime we were undergoing a rebrand aimed at differentiating the product from other cashback programs and unlocking new growth. During this time I recognised an opportunity to create a design system to support the new brand - something that did not exist within the organisation.
Why a Design System
The absence of a system had led to fragmented UX and inefficiencies across both design and engineering. Every new feature required re-creating common UI patterns. Without a unified system, the rebrand would not scale effectively and the integrity of the new brand would erode.
My Role & Team
As Lead Product Designer, I initially acted as an advisor alongside the founders during the rebrand process. The brand identity, assets, and documentation were produced by an external agency. The design system was created by myself while working closely with our engineering team.
Why a Design System?
The need for a design system became clear after auditing the Airtime app and reviewing our Figma files. I discovered inconsistent foundations, multiple versions of the same components, and frequent discrepancies between design files and what was ultimately shipped in the app.
In retrospective meetings, the team regularly expressed that they felt slow. Every project required either creating new components from scratch or searching through multiple files to find existing ones, all to build relatively simple screens. These inefficiencies helped form the business case for the design system.
To benchmark expectations, I studied established systems from companies like Wise and Uber. I also ran a workshop with our design team to gather feedback on pain points, identify essential components, and begin aligning on what the system needed to support.
Tokenisation
The external agency provided a new colour palette as part of the rebrand. My responsibility was to translate this palette into a product-ready system while ensuring considerations such as accessibility were properly addressed.
I transformed the raw colour values into design tokens. This allowed designers and developers to collaborate more efficiently while maintaining consistency across the product. Tokens also supported automation and formed the foundation for scaling other design primitives within the system.
When building components, I also applied atomic design principles. Larger organisms were constructed from smaller atoms and molecules, allowing us to create modular, reusable components that could scale across the product with minimal duplication.
Foundation
A strong system needs a strong base. I focused on defining core foundations for colour, typography, spacing, icons, radius, and shadows to bring clarity, consistency, and control across every surface of the product. Building something scalable meant starting from the ground up.
One of the most impactful improvements was the introduction of spacing tokens. Previously, spacing was largely subjective, some designers worked on a 2px grid while others used 5px. Establishing a consistent spacing system created a uniform approach across the product.
Implementation
This was a busy period for Airtime. Not only were we rebranding the business, but we were also implementing a completely new design system. To manage this effectively, I created a milestone plan across departments and held weekly check-ins to ensure steady progress.
Throughout the project, I worked closely with engineering to establish a pipeline between Figma and production. The goal was to ensure what designers created was accurately reflected in the shipped product, reducing inconsistencies and speeding up implementation.
Within this pipeline, design tokens defined in Figma were exported in JSON format. They were then version-controlled in GitHub and transformed using Style Dictionary into platform-specific outputs for React Native.
Outcome
The Airtime design system launched with over 30 reusable components, a robust style guide, and clearly defined foundations. Every new screen in the app was built using the system, bringing consistency, clarity, and a modern polish to the product experience.
The system became a turning point in how we build and scale features. It reduced production time by 72% and increased design velocity by 3.75x. Beyond visual improvements, it delivered long-term value through better execution, efficiency, and product consistency.
Launching the design system alongside the rebrand also coincided with a 21% increase in monthly active users, the reactivation of over 100k members, and a 10% increase in session time.
This project marked a defining moment in my career. Delivering both a full rebrand and a complete design system within three months was a significant challenge, and it pushed me to grow as a more strategic and systems-focused designer.
