All case studies

Turners Automotive
Group

Turners Cars, New Zealand’s largest used car network with 20 locations and around 3,000 cars for sale, has served Kiwis for nearly 60 years. Part of Turners Automotive Group, which includes Oxford Finance, DPL Insurance, and EC Credit, Turners aims to be New Zealand’s favorite place to buy and sell vehicles. In 2023, Turners Automotive joined the NZX50.

Senior UI/UX Design

Auckland

Role:

Design system, User Journeys, Design Lead

Date:

Apr 2022- Oct 2024

Tools

Figma/Storybook/

Confluence/Miro/Jira

Creating a design system means building a unified set of standards and components to ensure consistent, scalable design across a product or brand.

We have successfully developed and implemented a comprehensive design system tailored for our web application, encompassing features like chats, finance management, buy now flows, and auction pages. The process began with thorough user research and competitive analysis, leading to the creation of user personas and detailed user journey maps. We established a cohesive visual identity and built a reusable component library using atomic design principles, ensuring consistency and scalability. Interactive prototypes were developed to visualize user flows, followed by the implementation of a responsive front end using a modular framework. Special attention was given to accessibility, making the website inclusive for all users. Each feature, from real-time messaging in chats to streamlined transaction flows in finance, intuitive product pages in buy now, and seamless bidding in auctions, was meticulously designed and tested. Continuous feedback and iterative improvements were integral to the project, supported by comprehensive documentation and a publishing system for ongoing updates. The result is a user-centric, scalable design system that enhances user engagement and navigability across the entire Platform.

Brief description

Development and implementation of a scalable design system to streamline the user experience for Turners Automotive’s web application, which supports high-traffic, complex user interactions across finance, chat, buy-now, and auction features.

Project title

Turners Automotive Web Application Design System

Key outcomes

Enhanced user engagement, improved accessibility, reduced development time, and consistent UI across multiple interactive features. This cohesive design system helped users quickly navigate complex workflows and enhanced platform scalability.

Project title

Turners Automotive Web Application Design System

Key outcomes

Enhanced user engagement, improved accessibility, reduced development time, and consistent UI across multiple interactive features. This cohesive design system helped users quickly navigate complex workflows and enhanced platform scalability.

Brief description

Development and implementation of a scalable design system to streamline the user experience for Turners Automotive’s web application, which supports high-traffic, complex user interactions across finance, chat, buy-now, and auction features.

Get Started

Learn More

Project context

Project statement

Brief description

Project title

Turners needed a comprehensive, flexible design system for their web application that could meet the high standards of usability, accessibility, and consistency across various features, from real-time messaging to finance management and auction flows.

Development and implementation of a scalable design system to streamline the user experience for Turners Automotive’s web application, which supports high-traffic, complex user interactions across finance, chat, buy-now, and auction features.

Turners Automotive Web Application Design System

Background & Goals

Project title

Key outcomes

The project’s primary goal was to create an intuitive, user-friendly experience that met users’ diverse needs and simplified complex tasks. By establishing a reusable, adaptable design system, we aimed to reduce development time, enhance user satisfaction, and provide a foundation that could accommodate the platform’s ongoing growth.

Turners Automotive Web Application Design System

Enhanced user engagement, improved accessibility, reduced development time, and consistent UI across multiple interactive features. This cohesive design system helped users quickly navigate complex workflows and enhanced platform scalability.

Role & Responsabilities

Key outcomes

As the Lead UX/UI Designer, I was responsible for user research, competitive analysis, creating user personas, developing journey maps, designing the component library, and building high-fidelity prototypes. I also collaborated closely with product and development teams to ensure seamless implementation.

Enhanced user engagement, improved accessibility, reduced development time, and consistent UI across multiple interactive features. This cohesive design system helped users quickly navigate complex workflows and enhanced platform scalability.

Team & Stakeholders

The project involved cross-functional collaboration with product managers, front-end and back-end developers, and accessibility specialists. We also coordinated with stakeholders across marketing, customer support, and executive leadership to align on key objectives.

Research & discovery

Initial Research & Methods

To ground the project in a user-centric approach, I conducted comprehensive user research, including interviews with users across different demographics, usability tests on current workflows, and competitive analysis of industry standards.

Key Insights & Findings

Our research identified key pain points, such as navigation challenges, complex transactional flows, and inconsistencies in visual elements. We also recognized the need to support accessibility standards, making the platform inclusive and easy to use for a wider audience.

Personas & Target Audicence

Based on research insights, I created detailed user personas representing core user groups—e.g., regular buyers, car dealers, finance managers, and customer service agents. This guided the design choices to ensure we addressed the distinct needs of each persona.

Ideation & Design Approach mobile

Brainstorming & Concepting

We explored multiple solutions for core features. For instance, for the chat interface, I mapped out various layouts and interaction flows, prioritizing readability and ease of real-time communication. Similar ideation processes were applied to finance and auction pages to enhance usability and speed.

Wireframes

Early-stage wireframes outlined primary user flows and key interactions for each feature, helping visualize the architecture of complex pages like the finance dashboard and auction flow. This stage allowed us to iteratively improve the layout and navigation before diving into high-fidelity designs.

Design Systems

Project title

To ensure brand consistency and scalability, we developed a reusable component library grounded in atomic design principles. This library included typography, color schemes, buttons, forms, icons, and custom components for real-time chat and auction interactions, promoting a cohesive visual identity across all features.

Turners Automotive Web Application Design System

UI Designs & Protypes

Key outcomes

High-fidelity prototypes were essential to demonstrate how the user flows would feel in action. I created detailed prototypes for all critical interactions—such as finance management screens, the buy-now checkout, and the auction bidding process. This enabled stakeholders and users to interact with the design and provided valuable feedback.

Enhanced user engagement, improved accessibility, reduced development time, and consistent UI across multiple interactive features. This cohesive design system helped users quickly navigate complex workflows and enhanced platform scalability.

Testing & Iteration

User Testing Approach

Usability tests were conducted with users representing each key persona. We focused on validating the ease of navigation, clarity of interaction flows, and overall intuitiveness of the interface. Specific features like the finance transaction flow and the auction bidding were tested under various scenarios.

Feedback & Adjustments

Through testing, we identified areas for improvement, such as simplifying multi-step forms in finance and enhancing the readability of chat messages for accessibility. Iterative design adjustments were made based on feedback to refine the user experience and ensure high usability.

Iterations

For example, in the finance module, we streamlined form layouts to reduce cognitive load and added visual cues to guide users through complex steps. For the auction feature, we revised the bidding process to make it faster and more transparent, adding real-time updates to enhance engagement.

Implementation & Handoff

Collaboration with Developers

I ensured a smooth handoff by providing detailed documentation and assets via Figma. Regular check-ins with developers helped address any technical constraints, especially for complex features like real-time chat. We used Confluence & Storybook to manage UI specifications and maintain consistent design implementation.

Challenges in Implementation

The integration of real-time features, particularly the chat interface and auction bids, required close collaboration with the development team to overcome technical challenges without compromising the user experience.

Final Deliverables

Delivered a full UI kit, interactive prototypes, and thorough design documentation. The component library and style guide allowed developers to implement new features quickly while maintaining consistency across the platform.

Together, we can craft your next breakthrough.

Together, we can craft your next breakthrough.

Together, we can craft your next breakthrough.

Together, we can craft your next breakthrough.