Cars are often one of the largest purchases people make in their lifetimes, and the process is an intensive one involving assessing budget, studying specs, and negotiating prices. We aimed to make the process more enjoyable and transparent for anyone who considered purchasing a Volkswagen vehicle and wanted to make it as intuitive as a “dating website for cars”, where users could decide which model they wanted, customize it to their heart’s content, and get quotes from their local dealers from the comfort of their homes. I was involved with making continuous UX design updates to vw.com. In order to ensure that new designs would work within the existing system and improve upon its effectiveness, I mapped user flows, designed medium and high fidelity wireframes, and evangelized usability testing to drive an iterative prototyping process.
Challenges
- Faced with a large existing content design and information architecture
- Juggled many ongoing updates at once on short timelines
- Made designs intuitive to end users, despite industry jargon/nomenclature and complex business logic
- Coordinating with a large team of designers, developers, account executives, strategists, and producers
In order for the designs to best serve the user, I needed to keep in mind where in the car purchasing process and how the user accessed car information on the website.
Usability Testing, Research & Web Analytics
I conducted numerous usability tests and provided feedback on designs to ensure that the design was user friendly before it underwent development. It’s much cheaper and faster to make changes in design, rather than development! For example, I discovered early that while car shoppers benefit from information, lists, bullets, and spec sheets did not convey the experience of driving a Volkswagen, so we focused on creating a comprehensive and immersive vehicle tour through interactive storytelling rather overwhelming the user with lists. I also found that the majority of VW’s potential customers were not serious car shoppers/enthusiasts, and were not familiar with VW’s lineup, and needed more vehicle details front and center. Observing web analytics also provided insights on existing UI patterns on the website, as new visitors rarely explored gallery images (7.9%) or the highlights module (11.7%), which is consistent with Nielsen Norman Group’s findings on the low rate of using carousels.
Comparison & Build Your Own Tools
Here’s an example of my usability test findings, where I showed five recent car shoppers the mobile prototype of vw.com’s Comparison Tool and Build Your Own features. As they compared car trims and built their own cars, I observed first impressions, feature awareness, ease of navigation, and overall usability.
Models Page
VW’s “Our Models” page provides an overview of their car models. Its KPI is to lead users to the Model Bucket page, where the model is advertised. Although the page displayed eye-catching shots of the car models, analytics revealed that models toward the bottom of the page were often forgotten. I recommended the following improvements:
- Minimize the size of the models so customers can compare VW’s offerings at a glance, which eliminates excessive scrolling and cognitive load
- Add information pertinent to customers, such as 4 wheel drive and whether the model comes in diesel, hybrid, or electric
- Remove the “premium features” section at the bottom of the page because it is rarely clicked, and avoid distracting customers out of the model exploration process
Wireframes
In addition to usability testing, I also focused on adding incremental features and improvements on the website. I utilized medium-fidelity wireframes, which was a happy medium that allowed us to explore and pivot on ideas quickly, while improving communication with the client who was familiar with the current website design.
Volkswagen Builder Save
I determined how a user would take to save their custom Volkswagen build by linking their email address.
Zip Overlay
I designed an overlay on mobile for the user to enter their zip code or opt have it automatically located, so that they could find special offers near them.
FAQ
I designed a searchable and scannable FAQ page.
Volkswagen Newsroom
We also established the UX design system for Volkswagen’s Newsroom, a mobile responsive article website focused on improving Volkswagen’s publicity, SEO, and advertising of vehicles. I determined the information architecture of the site and created annotated wireframes to outline functionality of design patterns. I ensured that articles had high discoverability through tags, and an intuitive browse and search. To improve advertising efforts, I made a variety of types of media available, such as video and image galleries, and brought up links to vehicle detail pages on vw.com when the user searched a specific vehicle.
Landing Page
This the landing page of the newsroom website, which displays most recent articles as well as featured ones.
Topic Page
The version of the topic page without a featured article simply displays thumbnails of article within that category. The subtopic filter button allows the users to focus their browsing further. When the subtopic dropdown is clicked, all the available filters slide down below it. As the user types a search query, live results populate below.
The news article page features various forms of media, such as carousels, videos, and images. Metadata of each article includes tags, which helps users find content. Additionally, articles that feature vehicles include links to pages where users can build their own version of the vehicle or get a quote.
