Start a project
->
White Tailwing

Helping people find their perfect car

Desktop mockup of the redesigned AutoTrader homepage. A large hero banner shows a grey Volvo SUV on a gravel mountain pass, with the heading "Find new & used cars" above a search bar for make, model and variant, a Filters button and a blue "Search 80 905 cars" button. Below, a "Your recent activity" section shows car listing cards. A bright red Nissan Magnite compact SUV overlaps the bottom right corner of the screen.
Client
AutoTrader
Product
Online Marketplace
Platform
Website

AutoTrader is South Africa’s largest automotive marketplace for people to buy and sell cars.

Their mission is to bring vehicle buyers and sellers together using innovative technology. At the heart of it all is a powerful search tool that helps users find their dream car.

The Challenge
Angled collage of AutoTrader interface components on a pale blue background, showing the breadth of the design system: body type filter tiles, a Mercedes-Benz model selector with checkboxes, a 4.5 star dealer rating breakdown, a white Mercedes-Benz C-Class listing card with a photo gallery, a finance price panel showing R 17 000 per month with a Fair Price badge, Call, Message and WhatsApp buttons, a red Toyota RAV4 listing card, a customer review card and an "AutoTrader Intelligence" vehicle highlights panel.

Scaling a trusted marketplace

Seven years ago, Now Boarding transformed AutoTrader into a simple, intuitive marketplace that drove trust, engagement, and conversion. Over time, as AutoTrader introduced new tools to help users find the perfect car, the legacy infrastructure struggled to keep pace.

Our challenge was to refresh the platform, optimise the conversion journey, and build a highly scalable design system. We needed to support advanced features while ensuring the core experience of researching, comparing, and buying cars remained seamless.

Services
Product Strategy
UX Design
UI Design
Design System
Brand Design
Interaction Design
The Solution
Mobile mockup of the AutoTrader homepage with an "AI-powered search" prompt, overlaid with an enlarged "Powered by AutoTrader Intelligence" card. The card highlights a vehicle's standout attributes: better fuel economy (top 5 percent, 6.75 litres per 100 km), faster acceleration (top 15 percent) and a lower number of owners.

Smarter searches, deeper insights

We brought AutoTrader’s data to life by designing the foundation for AutoTrader Intelligence. While this framework paves the way for conversational search, we also used its capabilities to enrich listing pages.

By analysing rich consumer and vehicle data, the platform can now highlight the unique attributes of each vehicle, creating a more intuitive and personalised journey for the buyer.

Two mobile mockups showing budget-based car searching. On the left, a filter panel set to Finance mode, with fields for a R 20 000 monthly budget, a 72 month loan term, trade-in value, cash deposit and an 11.75 percent interest rate marked "Good credit". On the right, search results for a Mercedes-Benz C-Class showing a white 2024 model priced at R 17 000 per month with a Fair Price badge.

Budget-driven vehicle discovery

To make the platform even more intuitive, we expanded the filtering system to reflect the reality of the South African market.

By adding the ability to search by monthly finance payments alongside the traditional full price, we helped users quickly surface vehicles they can truly afford. This straightforward design shift speeds up the discovery process for buyers and drives far more valuable leads to dealers.

Two mobile mockups of the redesigned vehicle listing page. The first shows a white 2024 Mercedes-Benz C-Class with a Price and Finance toggle, a monthly price of R 17 000, key specs in a tidy grid (certified, 2024, 44 334 km, manual, diesel, 162 kW) and sticky Call seller, Message and WhatsApp buttons. The second shows the dealer section with a 4.5 star rating, opening times, contact options and sales representative profiles.

Optimising the listing experience

We revamped the vehicle listing page to give buyers everything they need to make a confident decision.

By grouping critical specs, expanding galleries, and introducing dealer reviews, we built a highly scannable, trustworthy experience. To remove friction, we integrated finance toggles and ensured price and contact buttons remain persistently visible across all devices, making it effortless to connect with dealers.

The Results

Before & After

Side-by-side comparison of the old and new AutoTrader mobile listing page for the same white 2024 Mercedes-Benz C-Class. The old version on the left leads with a R 714 000 cash price, dense seller comments and a pale blue Call and Message bar. The redesigned version on the right adds a Price and Finance toggle, a R 17 000 monthly price with a Fair Price badge, an at-a-glance spec grid, a "View vehicle insights" tag and stronger Call seller, Message and WhatsApp buttons.

Screens

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
AutoTrader desktop homepage with a user typing "Mer" into the hero search bar. A dropdown suggests Mercedes-AMG, Mercedes-Benz, Mercedes-Maybach and Opel Meriva, each with a listing count and a Models link. A "Try our AI-powered search" prompt sits in the bottom right.
AutoTrader desktop homepage, dimmed, with a "Filter search" panel open on the right. The panel includes a Price and Finance toggle, minimum and maximum price fields set up to R 750 000, location set to Sandton, and collapsible filters for body type, year, mileage, transmission, new or used, fuel type and drive type, with a "Search 84 cars" button.
AutoTrader desktop search results for the Mercedes-Benz C-Class C220. Two premium listing cards show silver 2024 and 2023 models priced at R 721 000 and R 718 750, with Great Price and Fair Price badges, photo strips, dealer ratings and distance from the user. A sidebar offers a "Create an alert" option, related C-Class reviews and other Mercedes-Benz models.
AutoTrader desktop listing page for a white 2024 Mercedes-Benz C-Class C220d AMG Line. A large photo gallery shows exterior and interior shots, followed by a row of key specs including mileage, transmission, fuel type, power, emissions and fuel use. A price panel on the right shows R 714 000 with a Price and Finance toggle and Show number and Message buttons.
AutoTrader desktop listing page with a "Finance calculator" panel open on the right. It shows an estimated monthly payment of R 17 000, total interest of R 324 766 and an editable breakdown of car price, cash deposit, trade-in value, a 60 month loan term and a 13 percent interest rate, followed by a disclaimer.
AutoTrader desktop dealer profile page for Mit Mak Motors Gerrit Maritz, with Overview, Ratings and reviews, and Listings tabs. It includes an About section, four sales representatives with WhatsApp and call icons, a dealership photo gallery and a sidebar card showing a "Dealer of the Year" award banner, a 4.5 star rating from 280 reviews and a "Contact dealer" button.
AutoTrader desktop "Research & compare cars" page, searching Mercedes-Benz C-Class and Audi A4 and showing 22 099 results. A grid of car cards shows models with starting prices and Compare buttons, and a tray at the bottom holds a selected Audi A4 and Mercedes-Benz C-Class ready to compare.
AutoTrader desktop "Compare cars" page placing a blue 2024 Audi A4 Sedan beside a blue 2024 Mercedes-Benz C-Class C200. Below the car photos, a side-by-side table compares general details such as starting price and introduction date, followed by engine specifications.
AutoTrader desktop "Sell my car" page. A hero image shows a person with binoculars standing on the roof of a grey Jeep in a rocky landscape, beside a "Get a FREE valuation" form pre-filled with a 2020 Mercedes-Benz C-Class C220, 50 000 km and a Cape Town location. Below, a "Choose how you want to sell" section shows a blue and a red SUV.
No items found.
AutoTrader mobile homepage with the heading "Find new & used cars" over a grey Volvo SUV, a search bar, a blue "Search 80 905 cars" button, an "AI-powered search" prompt and a "Your recent activity" carousel of car listings.
AutoTrader mobile filter screen with tabs for cars, bikes, commercial and leisure vehicles. Pricing is set to Finance, with fields for monthly budget, loan term, trade-in value, cash deposit and interest rate, plus a free valuation prompt and a "Search 84 cars" button.
AutoTrader mobile search results for new and used Mercedes-Benz C-Class cars, with active filter chips, 84 results and a featured white 2024 C220d AMG Line listing priced at R 17 000 per month with a Fair Price badge and dealer details.
AutoTrader mobile listing page for a white 2024 Mercedes-Benz C-Class, showing a photo gallery with a "View vehicle insights" tag, a Price and Finance toggle, a R 17 000 monthly price, a spec grid and sticky Call seller, Message and WhatsApp buttons.
AutoTrader mobile finance calculator showing an estimated monthly payment, total interest and total repayment in a blue summary card, with editable fields for car price, cash deposit, trade-in value, loan term and interest rate, followed by a disclaimer.
AutoTrader mobile dealer profile for Mit Mak Motors Gerrit Maritz, featuring a "2024 Dealer of the Year" award banner, a 4.5 star rating from 280 reviews, opening hours, address and website links, and Call seller, Call dealer and WhatsApp buttons.
AutoTrader mobile "Research & compare cars" screen showing a blue 2024 Mercedes-Benz C-Class C200 Avantgarde from R 1 021 492, with a Compare button and a bottom tray holding two cars selected for comparison.
AutoTrader mobile "Compare cars" screen showing a 2024 Audi A4 and a 2024 Mercedes-Benz C-Class side by side, with comparison rows for starting price, introduction date and service interval, followed by an engine section.
AutoTrader mobile "Sell my car" screen with a dark SUV hero image, a "Get a FREE valuation" form for a 2020 Mercedes-Benz C-Class C220 with 50 000 km in Cape Town, and a Continue button.
AutoTrader mobile "Upload images" step of the sell-your-car flow, showing a three-step progress indicator, five photos of a light grey Mini Cooper, an "Add image" tile and a licence disc upload section below.
No items found.
AutoTrader mobile homepage with the heading "Find new & used cars" over a grey Volvo SUV, a search bar, a blue "Search 80 905 cars" button, an "AI-powered search" prompt and a "Your recent activity" carousel of car listings.
AutoTrader mobile filter screen with tabs for cars, bikes, commercial and leisure vehicles. Pricing is set to Finance, with fields for monthly budget, loan term, trade-in value, cash deposit and interest rate, plus a free valuation prompt and a "Search 84 cars" button.
AutoTrader mobile search results for new and used Mercedes-Benz C-Class cars, with active filter chips, 84 results and a featured white 2024 C220d AMG Line listing priced at R 17 000 per month with a Fair Price badge and dealer details.
AutoTrader mobile listing page for a white 2024 Mercedes-Benz C-Class, showing a photo gallery with a "View vehicle insights" tag, a Price and Finance toggle, a R 17 000 monthly price, a spec grid and sticky Call seller, Message and WhatsApp buttons.
AutoTrader mobile finance calculator showing an estimated monthly payment, total interest and total repayment in a blue summary card, with editable fields for car price, cash deposit, trade-in value, loan term and interest rate, followed by a disclaimer.
AutoTrader mobile dealer profile for Mit Mak Motors Gerrit Maritz, featuring a "2024 Dealer of the Year" award banner, a 4.5 star rating from 280 reviews, opening hours, address and website links, and Call seller, Call dealer and WhatsApp buttons.
AutoTrader mobile "Research & compare cars" screen showing a blue 2024 Mercedes-Benz C-Class C200 Avantgarde from R 1 021 492, with a Compare button and a bottom tray holding two cars selected for comparison.
AutoTrader mobile "Compare cars" screen showing a 2024 Audi A4 and a 2024 Mercedes-Benz C-Class side by side, with comparison rows for starting price, introduction date and service interval, followed by an engine section.
AutoTrader mobile "Sell my car" screen with a dark SUV hero image, a "Get a FREE valuation" form for a 2020 Mercedes-Benz C-Class C220 with 50 000 km in Cape Town, and a Continue button.
AutoTrader mobile "Upload images" step of the sell-your-car flow, showing a three-step progress indicator, five photos of a light grey Mini Cooper, an "Add image" tile and a licence disc upload section below.
No items found.
No items found.
“
|
AutoTrader
You may also like
Ready for Take Off?

Let’s chat about your product.