Biota design system

Evolving design system across rebrands and enterprise transformation

 

Context

The organisation underwent three brand evolutions — including its first major rebrand in 18 years — alongside large-scale digital transformation.

When I joined, BiOTA 1.0 existed in name but not in discipline.

Digital interfaces were characterised by:

  • Inconsistent button styles and interaction behaviours

  • Divergent brand application across regions

  • Duplicated components built independently

  • Informal governance

  • Limited shared interaction standards

Design quality was constrained not by capability, but by system immaturity.

Each subsequent rebrand became an opportunity to structurally evolve the system rather than apply another surface refresh.

Role

As Head of UX & Product Design, I led a multidisciplinary team embedded across nine product squads spanning search, content, commerce and CRM.

I joined prior to Generation 2 and inherited a fragmented system. Recognising that UX consistency could not scale without structural change, I intentionally shifted focus toward design operations and system maturity.

Over time, my role evolved from stabilising inconsistency to architecting and governing a platform-level design system.

Generation 1 — Fragmented Foundations

(Pre-existing)

BiOTA 1.0 was guideline-led but inconsistently applied.

  • Buttons varied in style and behaviour

  • Interaction patterns were duplicated

  • Components were rebuilt across squads

  • Brand application lacked cohesion

The system lacked enforcement, documentation maturity and architectural alignment.

It provided a starting point — not a scalable foundation.

Generation 2 — Systemisation

(Rebrand 2)

As product complexity increased and multiple squads delivered in parallel, structural change became essential.

BiOTA 2.0 introduced:

  • A formalised component library

  • Defined tonal scales and foundational tokens

  • Improved accessibility standards

  • Clearer documentation and reuse

  • Early governance cadence

This phase reduced duplication and rework, creating predictable handoffs between design and engineering. BiOTA shifted from loosely applied guidelines to an operational system.

Generation 3 — Platform Integration

(Rebrand 3 + Enterprise Transformation)

The third evolution aligned with major architectural modernisation:

  • React front-end rebuild

  • Headless CMS adoption

  • Structured product data integration

  • CRM consolidation

  • Expansion to nine global product squads

BiOTA 3.0 became infrastructure.

We implemented:

  • A clear primitive → semantic hierarchy

  • Alignment between system definitions and React components

  • Version-controlled documentation

  • Contribution workflows

  • Global governance forums

The system enabled safe rebrand rollout, minimal UI unpredictability and reduced component-level rework during transformation.

Impact

  • Increased consistency across digital streams

  • Reduced duplicated components and redesign cycles

  • Improved cross-squad delivery predictability

  • Enabled rebrands without structural disruption

  • Embedded governance into product decision-making

BiOTA transitioned from fragmented guidelines to a behavioural and architectural foundation.

Reflection

The evolution of BiOTA was not a visual journey, it was a structural one.

From inherited inconsistency to modular scalability and finally platform integration, each generation represented a maturity shift in governance, architecture and digital team culture

By prioritising system stability before scaling innovation, we created the interaction foundation that allowed nine squads to move safely at speed while protecting customer experience.