Design System for Sub-brands & Sales Channels
Scalable Design System for Multi-Channel Branding
COMPANY
Turners Cars
ROLE
Senior UX UI
EXPERTISE
Full stack design
time • 2 years + 8 months
Apr 22 - Oct 24
Turners Automotive isn’t just a single website, it’s a platform supporting multiple sales channels, including auctions, Buy Now listings, price reserves, finance modules, and loan services. Some finance and insurance offerings are delivered through business partners, requiring multi-branded UI components for sub-brands and specific product offers. To support this complexity, the design system was built with a token system, making design processes sustainable, adaptable, and scalable.
Turners Automotive
Turners Cars is New Zealand’s largest used car network, with 20 locations and around 3,000 vehicles for sale. Part of Turners Automotive Group—which also includes Oxford Finance, DPL Insurance, and EC Credit—it has served Kiwis for nearly 60 years and joined the NZX50 in 2023.
Timeline
As Turners’ first UX/UI designer in 60 years, I spent 2.8 years leading research, design, prototyping, and implementation to deliver a robust, user-centered design system.
Background
Turners Automotive needed a comprehensive, flexible design system for its high-traffic web application to ensure usability, accessibility, and consistency across complex features such as real-time chat, finance management, buy-now flows, and auctions. The goal was to create a scalable foundation that could support the platform’s ongoing growth and evolving user needs.
User-centered, collaborative, iterative, and scalable.
Research & Planning
Conducted user research including interviews, testing, and competitive analysis to uncover navigation issues and inconsistent UI. Created personas and user journeys to align design goals with user needs and business objectives.
Analysed call center interviews to identify pain points and inform UI improvements. Collaborated with account managers on a fleet management dashboard and led a website redesign for consistent components, better accessibility, and cohesive design patterns.
Design & Prototyping
Created a cohesive visual identity and built a reusable component library grounded in atomic design principles to ensure consistency and scalability.
Implementation
Created wireframes followed by prototypes to map real user flows for features such as finance dashboards and auctions, enabling stakeholder feedback and validation. Held weekly meetings with the Head of Product and Marketing to review milestones, progress, release plans, challenges, and prioritisation.
Testing & Optimization
Delivered a responsive front end with modular, accessible components. Collaborated with the testing team to quickly resolve bugs, ensuring consistent functionality and responsiveness.
Tools used
Jira/Miro > Balsamic > Figma/Tailwind > Token study > Storybook
The overall solution was to build a token-based component library, enabling consistency, scalability, easier maintenance, and faster development across all digital products.
Cohesive Design System
Delivered a consistent, reusable component library ensuring brand alignment and streamlined development.
Improved User Flows
Simplified complex tasks like booking, finance management, and auctions for a smoother user experience, while significantly improving visual appeal, accessibility, copywriting, and spacing management.
Developed a token-based component library and design system to standardize UI elements, ensure accessibility, and enable efficient, scalable design across all products and sub-brands.
Increased User Engagement
Consistent, intuitive interfaces reduced friction in key tasks like booking, finance management, and auctions, improving usability and driving higher user satisfaction and engagement.
Faster Development Cycles
Reusable, well-documented components and tokens allowed developers to implement designs quickly and accurately, reducing handover time and accelerating release cycles.
Consistent Brand Experience
The design system ensured a cohesive, recognisable user experience across diverse sub-brands and partner products, while supporting multi-brand UI needs through flexible, tokenised styling.