Flybuys eDM System Architecture
Re-architecting a fragmented agency handover into a high-velocity, in-house production engine at Coles Group.
Role: UI Design
Tools: Figma (Auto-Layout, Component Properties, Variables)
Core Objective: Transitioning from a fragmented agency handover to a high-velocity in-house production engine.
01. The Overview
Transitioning to In-House Autonomy
When the Flybuys eDM design moved in-house at Coles, the design team inherited a significant technical hurdle. While we had the visual layouts from the previous agency, the underlying Figma components remained linked to their private, external libraries. This created a "hollow" design environment where the internal team lacked the infrastructure to scale efficiently.
02. The Challenge
The "Static" Handover Bottleneck
The inherited files consisted of "dead" pixels—static layers with severed component links. This created two major bottlenecks:
Manual Reconstruction: Every new marketing brief required me to manually rebuild layouts from scratch rather than using a live system.
Production Friction: The lack of a standardized library led to minor inconsistencies and slowed down the handoff process back to the agency for the final technical build.
The Technical Debt: Severed component links forced a manual, error-prone reconstruction process for every campaign.
03. The Solution:
Reverse-Engineering for Scalability
Instead of continuing with manual "pixel-pushing," I took the initiative to architect a native, fully-owned Flybuys UI Library from the ground up. I treated the eDM not as a one-off graphic, but as a modular product.
The Technical Build:
Atomic Audit: I analysed previous Flybuys campaign history to identify recurring patterns and "Atomic" elements (typography, brand tokens, and spacing grids).
Engineering for Velocity: I rebuilt every module—from Hero banners to complex multi-item grids—using Advanced Auto-Layout and Component Properties.
Slot Logic & Variable Content: I implemented "Slot" components to handle the high volume of eDM variations. This allows for the instant swapping of core content types—such as a library of pre-set Hero Banners, Partner Logos, or Points Offers—within a fixed container. This ensures that even with tens of different eDM versions, the structural integrity and brand spacing remain perfectly intact.
The Source of Truth: A modular, local UI library designed for 1:1 brand fidelity and 10x production speed.
04. The New Workflow
Reversing the Power Dynamic
By establishing a local "Source of Truth," I transitioned the workflow from being a recipient of agency files to being the authoritative source for the build team.
The Brief: Marketing provides the campaign strategy and copy requirements.
Internal Assembly: Using the new library, I map content to pre-validated components. What used to be manual labor is now a systematic, "drag-and-drop" assembly.
The Handoff: I provide the agency with technically perfect, standardized Figma files. This ensures the final build is 100% brand-compliant and eliminates "lost in translation" errors.
System in Action: Utilizing Slot logic to swap complex Hero assets while maintaining fixed structural constraints.
05. Impact & Results
De-risking the Future
While I am currently the primary user of this system, the impact is felt across the entire production chain:
100% Design Sovereignty: Eliminated all technical dependencies on external agency libraries.
Operational Velocity: Drastically reduced the time from "Brief" to "Handoff" by automating the layout process.
Scalable Foundation: Developed a robust system that ensures brand integrity and is ready for seamless onboarding as the internal team expands.
Agency Efficiency: Reduced internal revision cycles by providing the agency with "build-ready" blueprints.