The Auto Trader is the UK's leading and most trusted marketplace to buy and sell used and new cars. On average, with 55 million monthly visits to 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 was outdated, and it was 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 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 brings 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 aspects of a project including design strategy, building a design system with the engineering team, establishing realistic goals with stakeholders, working closely with a UX researcher to understand user behaviour, and observing data patterns 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 the "Create your advert" CTA was down significantly. However, through research, we realised that the heading above CTA does not give enough reason to the users to click on the CTA, so we changed the heading with benefits and saw an increase in the click-through rate of 4.64% on desktop and 6.24% on mobile.
The brand was not initially screaming for a refresh. The current design matched industry basics, and the products group company represented 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 had to maintain a different codebase for the desktop and mobile which led 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.
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 follow the broad concepts of the industry. To discover what landing page 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 the 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.
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 a 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.
In the study, users were asked what their thoughts were on colours, brands 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 user 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.
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 users would feel confident, premium, and have trust in the Auto Trader.
The Auto Trader takes 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 the "Create your advert" CTA was down significantly. However, through research, we realised that the heading above the form and CTA doesn't give enough reason to the users to click on the CTA, so we changed the heading with benefits and saw an increase in the click-through rate of 4.64% on desktop and 6.24% on mobile.
