©Guilherme Pocai

Car Compare


Mazda


Overview

The Car Compare (Mazda Compare Tool) is the second most visited feature on the Mazda website. However, it had not been updated since launch, and the experience no longer met modern usability and design standards. This limited its effectiveness in helping customers make informed decisions when comparing vehicles.
Opportunity

  • Test the existing tool with real users.

  • Gather insights from one-to-one research sessions (desktop focus).

  • Use findings to redesign the tool around usability, clarity, and modern design patterns.




    • Round 1

    Research Findings



    Entry point

    Most participants accessed the compare tool from the vehicle landing page rather than the main navigation.
    Memory Gap

    Customers were unable to retain information from the previous page.
    Business Impact

    Compare journeys – direct correlation and increase in Test Drive and Find a Dealer leads.
    Vehicle Range

    The majority of comparisons are completed across the same vehicle.
    Feature Order

    Our compare data is listed alphabetically instead of relevance.
    Competitors

    Competitor tools allow up to 3 models to be compared.




    Entry Point — This is the Grade Picker tool on the Vehicle Landing Page, where customers could quickly compare prices between grades, or navigate to the Car Configurator (Build Tool) or Compare Tool. Most users accessed the Compare Tool through this section.



    Memory Gap — The Compare Tool button on the Vehicle landing page took customers directly to the tool with a vehicle already selected. However, the chosen grade in the landing page was not reflected in the Compare Tool. By automatic pre-selecting both vehicles, users often didn’t realise they could compare different models across the range. There was a large disconnect between the UI patterns of the Grade Picker and the Compare Tool when selecting grades. The Grade Picker used top tabs with small images, while the Compare Tool relied on a dropdown. This inconsistency conflicted with the UX heuristic of recognition over recall.


    Compare Menu — Coming from the main navigation, the vehicle selection page didn’t allow customers to compare different specs within the same grade or across different grades. It also only supported two vehicles for comparison on larger devices.



    Comparison Table — People read from left to right, but the Compare Table placed headings and subheadings in the middle of the data, which broke the readability of the table.




    Mobile Analysis

    On mobile, users often didn’t understand the selection. They missed that the red underline indicated the selected vehicle, and didn’t realise they had to tap the other car to change the grade, engine, and then compare.



    Based on the findings, I implemented UI changes and prepared a second round of testing with the research team.

    The main changes included:


    Side menu

    Full vehicle range view for cross-model comparisons.
    Cards

    Car Configurator (Build Tool) cards repurposed for comparison.
    Repeat

    Repeated images to help users remember their selections.


    Comparison

    Added the ability to compare up to three cars side by side on larg devices.
    Content

    Reorganised content to align with the buyer’s mental model.
    Table

    Updated the table UI with improved hierarchy and readability




    Round 2


    Research Findings



    1. Finding, selecting, and removing vehicles was easy.

    2. Highlighting key differences was often overlooked.

    3. Users found it useful to compare cars across the full range.

    4. Adding filters was suggested to refine comparisons.



    “It was a
    breeze for me.”

    — Research Participant








    User Interface Breakdown

    Compare Range Page

    Structure 

    It was redesigned with a side navigation, content area, and navigation bar to improve discoverability.
    Range

    Full range visibility improved recognition and supported cross-model comparison, regardless of the user’s entry point. 

    Interactivity

    Filter — Enabled filtering by price range and category to support faster decision-making. Tabs — Enabled body style switching.
    Cards

    Introduced card previews to support quick scanning of base features before viewing deatailed specifications.

    Introduced card components on the Vehicle Landing Page to support recognition over recall and help users track their selections.




    Comparison Page
    Refinement

    The comparison page was simplified, making it easier for customers to view vehicles side by side.
    Grade Selection

    Dropdowns were maintained to streamline selection changes, reducing friction and improving efficiency. 
    Add & Remove

    The design also allowed users to delete and update selections.
    Hierachy

    Aligned with the website structure (Model → Grade → Image → Selection area).




    Comparison Table
    Scannability

    Improved table legibility by following the natural left-to-right reading flow.  
    Comprehension

    Added a sub-nav with price for recognition while scrolling.
    Comparison

    Highlighted differences rather than hiding them. 
    Engagement

    Add imagery to enhance the visual experience.






    Mobile End-To-End Flow

    Despite space constraints, the mobile redesign delivered a responsive, intuitive experience across devices. 

    The layout was simplified to prioritise essential information, interactions were optimised for touch, and navigation patterns were adapted for smaller screens.










    Deliverables


    For Customers

    • Easier side-by-side comparison of up to three vehicles.

    • Clearer readability, scannability, and recognition through improved hierarchy and imagery.

    • Consistent UI patterns across the journey (Grade Picker → Compare Tool → Configurator).

    • Faster, more confident decision-making with visible differences and filters.

    • A mobile-friendly, responsive design that works seamlessly across devices.

    For the Business

    • Increased engagement, with more customers progressing from comparisons to “Book a Test Drive” and “Find a Dealer.”

    • Stronger alignment with competitor standards and industry best practices.

    • Scalable, reusable design components that reduced design/development overhead.

    • Enhanced brand trust through a modern, intuitive experience.










    My Role
    • Lead Visual Designer driving the visual and overall experience.
    • Created wireframes and interactive prototypes to validate concepts.
    • Presented designs to stakeholders for feedback and alignment.
    • Collaborated closely with the research and testing team to gather insights.
    • Leveraged existing design system components and contributed new patterns to extend the system.
    • Partnered with engineers to ensure smooth delivery.




    ●