UX/UI Design
Date
2024 and Beyond
Project / Client
TTC
This section will initiate the development of our evolving design system and style guide for 2024 and beyond.
It will serve as a living document—launched with foundational principles and continuously expanded to reflect updates in branding, UI/UX standards, and best practices as our digital ecosystem grows.
The customer’s site is built using a Tailwind CSS-based framework and a custom multi-brand design system we developed to support several travel brands, including Contiki, Trafalgar, Costsaver, AAT Kings, Insight Vacations, and others.
This system enables brand-specific customisation while maintaining a consistent, scalable foundation across all sites.
Multi-Brand Design System Overview
-
Atomic Design Methodology: Components follow a structured hierarchy—from atoms to organisms—supporting modularity, reuse, and scalability.
-
Tailwind CSS Integration: A utility-first approach ensures consistent styling, faster development, and minimal CSS overhead.
-
Brand-Theming Support: A shared core theme extends into brand-specific tokens (e.g., colours, fonts, spacing), enabling both visual consistency and distinct brand identities.
-
Figma Design File: An unbranded (vanilla) style guide is used in Figma, with brand-specific styles applied through defined design tokens to keep design and development aligned.
Magic Picker & Brand Customisation
The Magic Picker is a key interface that empowers both developers and non-technical users:
-
Code-Free Styling: Editors can visually update component styles within Umbraco CMS—on the fly—without front-end development.
-
Tailwind Token Management: Editors select from predefined Tailwind values (typography, spacing, color, effects, etc.) to ensure brand consistency.
-
Token Updates via JSON: All brand design tokens (e.g., colours, font sizes, breakpoints) are stored in a central JSON file, making it easy to update or add new brand themes programmatically. These JSON updates are reflected automatically in both the CMS and design tools.
-
This structure allows seamless onboarding of new brands and efficient global updates across components.
Component Library Structure
Components are structured for clarity and reusability:
-
Alphabetical Listing: Each category includes components listed in alphabetical order.
-
Component Previews: Default Umbraco controls are shown above each visual design mockup.
-
Categories:
-
On-Page Components – For use directly by content editors.
-
Built-In Components – Foundational UI elements within the design system.
-
Modules / Elements – Reusable layouts composed of base components.
-
Components may be universal or include brand-specific variants, allowing a flexible yet controlled multi-brand architecture.
To improve consistency and efficiency across our suite of multi-brand websites, the Design Team partnered with Front-End Developers to enhance and consolidate our existing Style Guides. Our goal was to eliminate redundant components and standardize the use of typography, buttons, and colour tokens—reducing design and development inefficiencies. The result was a more scalable, maintainable design system that supports both brand differentiation and technical alignment.
Approach and Collaboration
From the outset, we worked closely with developers to ensure our updates could be smoothly translated into production. TailwindCSS utility tokens served as our foundation, offering a practical, modular approach to building consistent UI components.
To support scalability across multiple brands, we established a streamlined and adaptable naming convention for both design and code. Foundational design tokens—including colours, typography, spacing, border radius, and shadows—were managed through Figma’s Local Variables, ensuring consistency and cohesion throughout the system.
Component Examples
Include the Figma file below to showcase how components adapt with shift and lift interactions for updating styling.
To support brand teams, we provided a reusable template file. When components were detached, we proactively engaged with designers to identify gaps and refine the design system’s structure and component variants.
