Skip to main content
Flybuys Design System

Building a scalable design system that empowers consistency, speeds up delivery, and elevates every Flybuys experience.

Flybuys | 2023

Overview

Flybuys’ digital ecosystem had become fragmented—legacy content, inconsistent styles, and disconnected strategies across channels were diluting member trust and brand impact. This initiative aimed to unify the experience across app, web, and other digital touchpoints through a scalable, brand-aligned Design System.

Content Image
Alt Content Image

My role

As Lead Designer for the App Experience, I was responsible for:

  • Executing app-specific components that reflected the new brand direction while meeting usability, accessibility, and scalability standards.
  • Contributing to workshops and design critiques, shaping the system’s direction and ensuring alignment across platforms.

Collaborating closely with:

  • The Design System Lead, to audit and validate existing experiences, uncover pain points, and define a scalable strategy.
  • App developers, to ensure smooth handover and continuous iteration throughout the build process.

The problem

Flybuys members engage across multiple channels—app, website, email, social media, and in-store—but the experience lacked cohesion. Pages felt mismatched, journeys were fragmented, and the brand presence was inconsistent. This weakened trust and made it harder to communicate the full value of the program.

Content Image
Alt Content Image

Opportunity

We saw a chance to reimagine Flybuys’ omnichannel experience by:

  • Establishing a unified Design System rooted in brand strategy.
  • Delivering consistent, accessible, and on-brand experiences across all member touchpoints.
  • Positioning Flybuys as a world-class loyalty program.

Goal

  • Build an intelligent Design System that reflects Flybuys’ brand and member needs.
  • Improve internal efficiency by providing a shared source of truth for designers and developers.
  • Resolve key pain points across current experiences.
  • Redesign the ecosystem block-by-block to meet world-class standards.
  • Improve speed to market by embedding brand and accessibility into product design.
  • Drive engagement, increase revenue, and elevate brand sentiment.
Content Image

The process

Timeline: 6 months

Audit existing experiences

We began by auditing the existing Flybuys app and web experiences to identify usability issues, inconsistencies, and areas of opportunity. This helped us understand how the brand was evolving across digital channels and where member pain points were most prominent. It was essential to uncover what was working, what wasn’t, and where we could make the biggest impact.

Stakeholder and team Interviews

To gain deeper insight, we conducted interviews with stakeholders across design, product, and engineering. As the business scaled, the design system had become siloed—each team had its own interpretation and execution approach, leading to misalignment and inefficiencies. These interviews helped us establish shared ownership and a unified vision, especially within the Product Design team.

Strategy alignment

Brand and strategy alignment was a key focus. While the brand direction was clear in collateral materials, it hadn’t been fully translated into digital channels. We worked closely with the Creative team to ensure the brand’s essence was consistently reflected across all member touchpoints, building trust and credibility in the process.

Content Image
Alt Content Image

Design principles and foundations

Next, we defined the design principles and foundations of the system. This included integrating the evolved brand elements—color palette, typography, iconography—into atomic-level components. These elements formed the basis of a scalable, consistent, and efficient design system that captured the Flybuys identity.

Testing and technical review

Accessibility was a non-negotiable. We partnered with accessibility experts to audit designs, train teams, and implement best practices that met WCAG AA standards. This ensured that our experiences were inclusive and technically sound across platforms.

Ideation and prototyping

We embraced a customer-centric, test-and-learn approach to ideation and prototyping. With our foundation laid out in Brilliant Basics, we focused on resolving member pain points, improving consistency, and driving retention. The system was designed to evolve continuously, supporting Flybuys’ long-term vision and growth.

Content Image

Handover to development

Once the components were finalised, we conducted a structured handover to both the Web and App development teams. This included annotated Figma files, usage documentation, accessibility specs, and interaction guidelines. We ensured each team had clarity on implementation details and supported them through pairing sessions, QA reviews, and ongoing feedback loops. This collaborative handover helped maintain consistency across platforms and accelerated the build process.

Content Image
Content Image
Alt Content Image

Outcome

  • A unified and brand-aligned digital experience across Flybuys’ app and web platforms.
  • Improved usability, accessibility, and visual consistency across all member touchpoints.
  • Stronger collaboration between design and engineering teams.
  • A scalable foundation that supports future product growth, experimentation, and faster delivery cycles.

    Impact

  • Increased design and development efficiency, reducing duplication and speeding up time to market.
  • A future-proof system that enables continuous improvement and innovation across the Flybuys ecosystem.