A 100% digital business since 2013, Auto Trader sits at the very heart of the UK’s vehicle buying and selling process and operates the largest digital automotive marketplace.
Understanding the problem
Having recently undergone a major brand refresh by Studio Output, we were tasked with implementing Auto Trader’s new visual language for their online annual report. As a corporate website, the finished product needed to useful and usable for a wide range of audiences, from potential employees to institutional investors. We were to provide all aspects of the website design, including the user experience and interface design.
Crafting the experience
From the outset, it was vital that we gained a strong understanding of how a variety of audiences might interact with the site. We created detailed personas for each of the user groups, validated them with key stakeholders and client-facing members of Auto Trader, and used them as a consistent frame of reference throughout the project.
Our data suggested that most users spend less than two minutes on corporate websites. With this in mind, we set a core principle of making the content available with minimal interaction. We highlighted market reports, the latest share price, latest results and access to other Auto Trader websites as the most important elements, and created a prototype illustrating the significance of their accessibility. The prototype helped us to effectively communicate the value of minimal interaction, and test for issues with users.
Next, we set to work on delivering a consistent and coherent user experience. We created a clear typographical hierarchy and principles for animated feedback, ensuring that users would have a seamless experience across the breadth of content, ranging from intricate charting data to detailed press releases.
To encourage and support repeat visits, we also designed a ‘latest updates’ feature. It notified users of content published since their last visit, and drove traffic to other areas of the website. For example, if Auto Trader released their Q1 Results, a notification would provide this information to the user and direct them to the results page.
We provided deliverables and updates at all stages, working with a process-driven mindset and keeping stakeholders informed. We created detailed, research-driven user personas, a robust information architecture, low fidelity wireframes, high fidelity UI designs, and a functional prototype for testing and demonstration. Once the design phase was complete, we worked closely with Auto Trader to ensure its frictionless implementation and launch.
The final site consisted of seven core sections with over 150 pages of content. By creating a robust design system built on reusable components, we created a consistent experience that can allow for scaling at a later date, if necessary.