Case study:
Imagine Design System.
Establishing a scalable design system to support rebrand, accessibility, and operational efficiency.
The Challenge.
Imagine Cruising undertook a full rebrand while simultaneously rebuilding its commercial website. A high-risk moment where inconsistency and technical debt can quickly compound.
As their senior designer, I was responsible for designing and operationalising a scalable design system that:
-
encoded the new brand into reusable components,
-
supported rapid delivery without sacrificing quality,
-
aligned designers and engineers around shared standards,
-
reduced long-term maintenance and rework.
This work required balancing brand expression and system rigour in a commercial environment with a broad, older user demographic.
Design Strategy.
I framed the system not as a visual style guide, but as infrastructure. A foundational layer that would support multiple teams and future change.
To reduce risk and uncertainty, I broke the work into three strategic phases:
-
research and landscape analysis,
-
audit and rationalisation of existing UI,
-
system design, documentation, and adoption.
This approach ensured the system was grounded in real usage and technical constraints.
Research & Landscape Analysis.
I began by surveying existing best practices and system models, drawing on:
-
prior experience building component-based systems at Booking.com,
-
Atomic Design principles (Brad Frost),
-
industry examples, tools, and emerging standards.
The scope extended beyond UI components. We needed:
-
a consumable pattern library,
-
clear documentation and governance,
-
alignment with engineering workflows to prevent divergence.
This early framing helped avoid the common pitfall of creating a system that looks good but fails in adoption.
UI Audit & Behavioural Analysis.
I conducted a comprehensive audit of the existing site, cataloguing:
-
UI components,
-
spacing, typography, and colour usage,
-
interaction patterns such as CTAs and navigation.
Where appropriate, I preserved learned user behaviours to avoid unnecessary disruption.
Heat mapping and Google Analytics were used to validate:
-
high-traffic areas,
-
interaction friction,
-
opportunities to reduce complexity.
Impact:
-
reduced risk during rebrand by retaining familiar patterns,
-
fewer regressions caused by behavioural changes,
-
clear prioritisation of what needed rebuilding versus salvaging.
Securing Stakeholder Buy-In.
Before committing to the system build, I worked directly with stakeholders to secure alignment and funding.
I positioned the system in terms of business outcomes, not design aesthetics:
-
faster delivery through reuse,
-
fewer inconsistencies and versioning issues,
-
clearer communication between teams,
-
reduction of design and technical debt over time.
This helped shift the conversation from “nice to have” to “critical infrastructure”.
Designing the System.
Scalability, accessibility, and governance.
Visual language and component architecture.
I adopted an atomic design methodology to create small, composable building blocks with clearly defined properties and variants.
This allowed:
-
fine-grained control over styles,
-
future tokenisation of design decisions,
-
easier synchronisation between design and code.
Grid, spacing, typography, and colour formed the system’s core foundations.
Each component, from buttons to forms and navigation, was designed to:
-
scale across layouts and content types,
-
remain legible and usable across browsers,
-
support an older demographic through larger touch targets and readable type.
Accessibility at the core.
Robustness and regression testing.
Accessibility was baked into the system from the outset:
-
colour contrast ratios were rigorously tested,
-
type scale and spacing, along with considering reading age and ability,
-
clear affordances and focus states reinforced interactivity.
By encoding these decisions into the system, accessibility became default behaviour, not a retrofit.
Each component was tested across multiple contexts and content scenarios to validate:
-
visual resilience,
-
cognitive load,
-
hierarchy and composition at the page level.
This surfaced constraints early and informed templating decisions, reducing downstream breakage.
Documentation & Adoption.
Clear documentation was critical to adoption.
Pattern library & tooling.
For every component, I defined:
-
purpose and usage,
-
guidelines and constraints,
-
do / don’t examples,
-
Developer-ready code snippets.
Documentation was hosted centrally and structured for consistency in terminology and understanding, enabling designers and engineers to work from the same mental model.
I implemented the system in Zeroheight, creating a central hub that:
-
organised components and patterns,
-
synced with Sketch,
-
supported tokenisation for future evolution.
This tooling choice future-proofed the system and made it easier to roll out incrementally across the site.
The Solution.
The final system delivered:
-
a fully rebranded, cohesive visual language,
-
a scalable component library with governance,
-
embedded accessibility standards,
-
reduced friction between design and development.
As the system rolled out:
-
design and engineering velocity increased through reuse,
-
inconsistencies and ad-hoc decisions decreased,
-
the platform became easier to maintain and evolve.
The next phase focused on deeper tokenisation and tighter integration with the tech stack, enabling automated style updates and further operational efficiency.