AI Product Design
Design Systems
UX Architecture
White-Label
Aura AI
Designing a modular UI system that enables AI-powered experiences to scale across brands.
Industry
Sports Technology / AI
Role
Senior Product Designer
Timeline
3 months
Aura needed a scalable experience framework that could support multiple clients, brands and content types without requiring each experience to be designed from scratch. The system also needed to handle live data, dynamic content, different typography systems and increasingly complex AI-driven experiences.
The challenge was to balance flexibility with consistency, creating a system that could be rapidly customised while remaining maintainable for both design and development teams.
I designed a modular, white-label UI system built around reusable components, design tokens and flexible content structures. Using Material Design 3 as a foundation, I established a scalable architecture that could quickly adapt colours, typography, layouts and components to different client brands.
I then extended the system into an adaptive composition model, combining live data and behavioural signals to dynamically change content, component sizing and layout based on user context. This created a foundation for AI-driven personalisation without requiring bespoke layouts for every experience.
The resulting system created a reusable foundation for rapidly designing, prototyping and deploying branded experiences across different clients and use cases. Around 80% of the foundation could be built from reusable system patterns, with the remaining work focused on bespoke functionality and client-specific customisation.
More importantly, the system established a path toward adaptive, AI-driven experiences that could evolve with new data, behaviours, clients and product requirements without continually rebuilding the underlying interface.
Let's dig deeper.
Designing the Foundation
I started by auditing existing sports, broadcast and media interfaces to identify recurring patterns, edge cases and opportunities for reuse.
From there, I defined the core modules and behaviours the system needed to support.
The focus was on creating flexible foundations rather than fixed screens.
80% System 20% Custom
The system was built around a simple principle:
Build once. Customise where it matters.
Around 80% of the foundation followed Material Design 3 principles, giving us a reliable base of tokens, components and patterns.
The remaining 20% could be customised for client-specific functionality, layouts and content requirements.
This dramatically reduced the amount of bespoke design required for each new experience.
Building a Modular System
Instead of designing individual pages, I designed reusable modules that could be combined into different experiences.
Scores, statistics, teams, players and content could all adapt to different layouts and data states.
This allowed the same underlying system to support multiple products without forcing every experience to look identical.
Branding at Scale
The system was focused around design tokens for colour, typography, spacing, elevation and component styling.
This meant a new brand could be introduced by changing the underlying theme rather than redesigning every component.
New brand in. New experience out.
The design system became a shared language between design and development.
Designing for Live Data
Sports interfaces introduce another layer of complexity.
Scores change. Team names vary in length. Statistics appear and disappear. Match states constantly evolve.
Components needed to adapt to these conditions without breaking the layout.
I designed flexible sizing and content behaviours so modules could expand, collapse and reorganise around live data.
From Responsive to Adaptive
The next evolution was moving beyond traditional responsive design.
Instead of simply adapting the interface to different screen sizes, I explored how the system could adapt to different users and contexts.
Live data and behavioural signals could influence which content appeared, how it was prioritised and how the interface was composed.
The interface could become more relevant based on how people interacted with it.
The Composition Engine
Brand
Theme Tokens
Component Library
Content API
Behaviour Signals
Ranking Engine
Adaptive Layout
User
Together, these layers created a flexible composition engine capable of generating different experiences from the same underlying foundation.
The goal was to move from designing every experience manually to designing the system that creates the experience.
Aura Box AI Userflow