CDK Global
Online Car Retail

All Works / UX&UI / CDK Global

Responsibility: Design Lead, Project Scope & Usability Test

CDK Global, a multinational corporation provides data and technology to the automotive industry. In 2022, CDK acquired Roadster, a digital retailing tool that empowers consumers to build deals online and at the dealership, modernizing the sales process and increasing consumer conversion.

Since 2020, I worked closely with product managers, engineers, researchers, and analysts, using the data-driven-method to improve the digital online store experience.

Year: 2020 - 2024

Vehicle Detail Page Update

Through user testing and dealership feedback, the vehicle detail page requires many UI improvements. A modern look can create trust when consumers enter the site (“The white makes it look like a fake scam website,” one user said during the test). The improvements on the deal builder, include the use of rounded corner cards, shadows, and arrows that clearly indicate what to expect after the click - all of these new UI elements create a clear information separation between the product description and deal builder while the “realistic” cards are inviting to the consumers.

Search Result Page Update

The old search results page has multiple problems. It is not mobile-friendly, shows the result in three categories (new make and model, new VIN, and used), and does not have a fluid layout, which makes it hard for users to find what they want through excessive eye movements…

In my new design, I created a results page with customizable categories that are more familiar to the consumers (like continue browsing, most popular in your area, best in class). I removed the header banner to minimize distractions, especially on mobile. Key features such as filter, sort, and compare are sticky on the top with the header, allowing users to easily adjust their search preferences. For the result cards, I placed the image at the top since it's the most important content for car shoppers and proven by the analytic data. A primary button is added to clarify the action, and secondary information is hidden until hovered.

*you might also like…