The project
A “don’t change too much” redesign with a design-first mindset—guided by Figma variables and enhanced through an AI-powered prompt framework, which refines values based on client questionnaire input. The goal is to preserve the visual character of African Safaris NZ’s well-loved site, while formalising its design language into a system that supports accessibility, performance, and future growth.
The company
About African Safaris NZ
African Safaris Ltd (New Zealand) is run by Claire Vial, who curates bespoke Southern African itineraries—primarily for mature, high-disposable-income travellers. As a long-time LightSpeed client since 2019, Claire leads a small, hands-on business where clarity, efficiency, and personal service are just as important as visual continuity. The brand’s identity is warm, familiar and travel-savvy—our role is to translate that character into a structured, adaptable design language, without losing the personal touch her audience has come to trust.
The challenges
No existing design system
One of the key challenges in redesigning the African Safaris NZ website is the absence of a formal design system. The current site has a distinct personality that resonates with its audience, but it isn’t underpinned by structured variables or reusable components. After six years without a major visual refresh, small inconsistencies in layout, typography, and colour have naturally built up. Without a shared visual language, it becomes increasingly difficult to maintain coherence as new content is added or features evolve.
Accessibility
Additionally, the existing theme offers limited support for scalable styles or accessible defaults. With an audience primarily in the 50–65 age range, accessibility remains a key concern—yet the current site features small font sizes, low contrast, and navigation that can be difficult to use on mobile. At the same time, the client is understandably cautious about making any drastic visual changes. The challenge, then, is to retain the emotional tone and visual familiarity of the site while introducing a structured, accessible design foundation that can support future growth.
The solutions
AI‑enhanced prompt framework
We kicked off with two structured questionnaires—one for the client and one for the agency—capturing brand tone, audience preferences, and accessibility needs. These were transformed into prompt-based systems that generated design variables for colour, typography, spacing, and radius. These values were imported into Figma variables, which were then assigned to text, colours, components and pattern sections, meaning the entire project had a cohesive, single source of truth.
Duplicated existing Tour Operator Design System
Using our existing Tour Operator Design System as a base, we duplicated it, then reassigned the relevant variables in its established variable library to match the ASNZ prompts. This gave us the ability to rapidly assemble brand-accurate patterns using the prebuilt components in the Tour Operator Design System like buttons, links, cards, and navigation, all adapted to ASNZ’s aesthetic through variable reconfiguring. The result was a fully clickable prototype assembled in hours, not days, with the client providing near-instant feedback on how values like font size and contrast impacted the look and feel.
Find out more about the Tour Operator Design System here.
Accessibility upgrades through design tokens
Instead of retrofitting accessibility, we embedded it at the variable level. The default font size was increased to 18px, colour palettes met WCAG-AA standards, and spacing was tuned for touch interactions across devices. Because these were defined as Figma tokens, any future brand refresh—such as dark mode or high contrast variants—can be handled at the system level with just a few changes.
Frictionless developer handoff
As the design work reaches completion, the next step will be translating the prototype into WordPress using the LSX Design Theme and Tour Operator 2.0.. With every design decision—colours, spacing, typography, radii—already defined as variables in Figma, the development team will have a clear, consistent foundation to work from. This alignment between Figma variables and WordPress Global Styles sets the stage for a seamless transition from design to build, minimising the need for interpretation or manual recalculation. Elements like padding, column widths, and card components can be accurately replicated in the Block Editor, streamlining development and preserving the visual precision established during the design process.
The results
The structured design system reshapes not only how the site looks, but how it will grow. It preserves the original charm while laying down a modern, scalable, and accessible foundation. By aligning Figma variables with WordPress Global Styles, we bridge the gap between design and development—ensuring that the approved prototype will translate faithfully into the live site, with no surprises during implementation.
To close the loop, we have encouraged Claire to share the interactive prototype with her own audience before launch—inviting real-world feedback from the very users it is designed for. This feedback will not only help refine the new accessibility improvements but also reinforce the idea that good design is a collaboration between agency, client, and end-user.
Screenshots
