Brand Refresh Case Study

Brand Refresh

AutoTrader is the UK most trusted brand for the used and new cars. The brand refresh on sell car landing page increased 6.24% click-through rate on mobile.

Highlights

The Auto Trader is the UK leading and most trusted marketplace to buy and sell used and new cars. On average, 55 million monthly visits on the website and mobile app, some might say Auto Trader is a brand where customers feel the safest when they are looking to trade cars. The company thought that the brand is outdated, and it is time to lift the brand into something more premium to be credible as a destination for selling the cars. Therefore every detail has to be carefully considered when building it.

The process of building a premium and the user-friendly brand must be guided by information about what works and what doesn’t. The design that looks good on the website or app may end up being impractical or confusing, preventing users from achieving their desired outcomes. That’s where I and data-driven design comes in.

As a Principal Product Designer, it was my responsibility to ensure that a brand refresh project improves user experience as well as bring commercial value to the business by using research and data effectively. However, to successfully achieve the project goal, many different teams come together and work collaboratively to make this project a success. I worked on various aspect of a project including design strategy, building a design system with the engineering team, establishing realistic goals with stakeholders, working closely with UX researcher to understand user behaviour, and observing data pattern with a data scientist to make informed decisions.

Throughout the project, we consider the reputation, branding, and ethics, as well as qualitative and quantitative data. We run user studies with 300 participants, and many experiments to improve and optimise the user experience. Initially, when we released the new branding to the "Sell your car" landing page, we observed that the click-through rate of "Create your advert" CTA was down significantly. However through research, we realise that heading above CTA does not give enough reason to the users to click on the CTA, so we change the heading with benefits, and saw an increase in the click-through rate of 4.64% on desktop and 6.24% on the mobile.

The Approach

User & Business Needs

The brand was not initially screaming for a refresh. The current design matched industry basics, the products group company represents was clear, but navigation was a little bit difficult to use on mobile. However, the design team had learned a lot about user patterns and the brand itself. The website needed several improvements, and the engineering team has to maintain different codebase for the desktop and mobile that leads to inconsistent experience across the website. The business and design team sees an opportunity to simplify and improve the digital experience by restructuring the website into eight new responsive landing pages to answer the questions customers have about specific aspects of buying and selling a car.

Research

1. Investigate Google Analytics, Google Search Console data, and Google Ads to understand how and why users land on the landing pages: First, we analysed quantitative data regarding traffic acquisition channels and how it matches the content on the landing pages. By using Google Analytics landing page dashboard, Search Console data, and Google Ads keyword performance report, we found answers to the following questions:

The data helped us formulate the new value proposition shared in the improved designs, as well as identify opportunities for content that speaks to website visitors, for example out of the top 30 landing pages, 12 were blog articles and faqs.

2. Analyse user session recordings and heatmaps to clarify user flow: Although we had a clear picture of what users do next after landing on the top landing pages, we decided to check session recordings and heatmaps for visual clues.

By analysing user flow with session recordings and heatmaps, we discovered that visitors mainly use menu navigation when visiting the website on desktop, and mobile. As the majority of sessions were on mobile devices, the navigation bar in new designs should be easy to notice, simple, and accessible from any page of the website.

3. Determine industry trends by competitor analysis: The landing pages should be following the broad concepts of the industry. To discover what landing pages trends are common in the motoring industry, we performed a competitor analysis focused only on their landing pages. The purpose was to clarify:

The findings were essential for the tone of voice, the visuals, and putting personality into the product. We concluded that users visiting the Auto Trader website should feel a little more towards its 'pioneering' character trait through new aesthetic treatments.

4. Create a summary and kick start design sprint: We gathered insights to evolve the brand by interpreting a strategic repositioning into a brand design language. We bring all the relevant teams on board to kick start the design sprint.

Design Sprint

We began to explore potential designs for the website. To start this process, we all took part in a design sprint and created designs with refined typography, product-led photography, and more consistent approach to colour in the logo. We took an adaptable approach to design, dialling certain features up and down where appropriate.

Using these designs, we were able to conduct a user study with 300 participants. It allowed us to gather some crucial feedback to help us decide what to include in the final experience before jumping into the next iteration of our design.

Brand Refresh Concept
Brand Refresh Concept
Brand Refresh Concept
Brand Refresh Concept
Brand Refresh Concept
Brand Refresh Concept

In the study, users were asked what their thoughts were on colours, brand and imagery to help us understand users perspective of these designs. Some of the feedback we received from the users were:

We completed a few rounds of iterations based on users feedback to ensure the designs included everything we needed. Once the typography, colour, imagery, and functionality of our designs were finalised, we moved on to designing the new "Sell your car" landing page.

Finished Product

To capture our visitors' attention, we designed different components to create a stronger emotional connection with potential car sellers and buyers across the various landing pages. The final step was to optimise the experience for both new and returning users to ensure user would feel confident, premium, and have trust in the Auto Trader.

Desktop Finished Design
Mobile and Tablet Finished Design

Experiment

The Auto Trader take customer feedback and data seriously. Any feature we release is behind a feature flag to understand user behaviour and educate them if necessary about the new design or features. Initially, when we released the new branding to the "Sell your car" landing page, we observed that the click-through rate of "Create your advert" CTA was down significantly. However through research, we realise that heading above form and CTA doesn't give enough reason to the users to click on the CTA, so we change the heading with benefits, and saw an increase in the click-through rate of 4.64% on desktop and 6.24% on the mobile.

Desktop - Heading Change

Desktop Heading Experiment

Mobile - Heading Change

Mobile Heading Experiment

Other Projects