Luc Garrioch Design Portfolio

®2024

BMW Group Online Sales Platforms

A full redesign of the BMW Group South Africa digital sales platform across three brands — BMW, MINI, and Motorrad.

The platform allows customers to order their dream vehicles online, get a trade-in estimate for their current vehicle, and book test drives.

LINKS:

buy.bmw.co.za

buy.mini.co.za

buy.bmw-motorrad.co.za

Client

BMW Group South Africa

Deliverables

Online sales platform

Year

2024-2026

Role

UX/UI Designer

Designing one system, across three brands

The project required building the same design system that could be reskinned for each brand — BMW, MINI, and Motorrad — in Figma.

PROCESS

01 Review & Exploration

Review the existing platform across all three brands, identifying pain points in the purchase journey and UI inconsistencies.

02 Design System & Components

Utilise the BMW Central component library to ensure CI compliance, while building a shared component library in Figma for mobile.

03 Responsive Execution

Design desktop and mobile experiences in parallel, ensuring feature parity and a seamless journey across all screen sizes.

04 Handover & Iteration

Collaborate with and test the system alongside the development team. After go-live, conduct user testing and identify opportunities for further improvement.

Designing one system, across three brands.

The project required building a the same system design that could be reskinned to each brand (BMW,MINI and MOTORRAD) in Figma.

01 Audit & Discovery

Reviewed the existing platform across all three brands, identifying pain-points in the purchase journey and UI inconsistencies.

02 Design System & Components

Built a shared component library in Figma.

03 Responsive Execution

Designed desktop and mobile experiences in parallel, ensuring feature parity and a seamless journey across all screen sizes.

04 Handoff & Iteration

Rigorous testing to identify and manage defects.

The Product Landing Page

Allows users to search for their dream vehicle.

Old System

The confusing tab system made vehicle selection time-consuming, while large vehicle cards made browsing difficult.

Old System

The confusing tab system made vehicle selection time-consuming, while large vehicle cards made browsing difficult.

New System

Vehicle models are grouped into accordions within the filter, making them easier to search. Smaller model cards display more vehicles at once, making it easier for customers to browse.

New System

Vehicle models are grouped into accordions within the filter, making them easier to search. Smaller model cards display more vehicles at once, making it easier for customers to browse.

The Product Detail Page

The page where users can view vehicle information, add insurance cover and accessories, and proceed to checkout.

Old System

The layout was confusing and overwhelming, while the dated look and feel was not compliant with the brand CI.

Old System

The layout was confusing and overwhelming, while the dated look and feel was not compliant with the brand CI.

New System

Linear, full-width sections make the information easier to digest. Increased white space and an updated UI create a more modern, cleaner look.

New System

Linear, full-width sections make the information easier to digest. Increased white space and an updated UI create a more modern, cleaner look.

Trade-in

The trade-in feature allows users to get an estimate for their current vehicle and add it to their online quote.

What's next?

User tests have been conducted to identify areas of improvement. I will be rolling out changes periodically for MVP2 and beyond.

BMW Group Online Sales Platforms

BMW Group Online Sales Platforms

Next Project

Next Project

Next Project