I was part of a larger force to redesign the vw.com website which focuses on the United States market. I was responsible for the UX effort to redesign the entire website with the launched of VW's new brand design as VW was moving towards electric. I improved the visual and experience design of the highest traffic page on the website, resulting in increasing the lead actions by 32%.
The ask
As Volkswagen moving towards the electric future, the brand launched a new global brand design, Vibrant Power, in 2019 as the start of the new era for Volkswagen. VW created a uniform global 360 brand experience which focused on its digital applications. With the intention of becoming more human and more lively, VW wanted to align with the customer's perspective to tell the authentic stories.
Designed in Germany, the new brand guidelines had to be modified for the United States market. Since VW was moving towards digital, we had to build the foundation of the online shopping experience for VW future vehicles that aligned with the new global brand guidelines, that spoke from the U.S. customer's perspective.
VW website was the main digital storefront to tell its authentic stories to customers. Starting with the website redesign, we were asked to not only increase the brand awareness, but also to drive customers towards the purchasing funnel.
Role
In my role as the Lead UX Designer on the team, I was accountable for the end-to-end UX effort to redesign the whole website to pave the way towards VW future e-mobility. This case study is a glimpse into how I improved the visual and interaction design of the highest traffic page to increase the site retention.
VW's vehicle showroom pages, or known as the product pages, were the "core" key of the company's engagement activities. They were the first thing that customers landed to seek for each vehicle's information.
However, the product pages were designed in a way that they told the story from the brand's perspective. The new brand guidelines allowed us to open up opportunities to redesign it to be more human and inviting. Here's a glimpse of the old product page that we were asked to redesign.
My primary role was to translate the old design to the new one that aligned with the global brand guidelines, but modified it to fit the customers' needs in the U.S. market. I worked closely with the Strategist, Content Strategists, Project Managers, Designers, Engineers, and Copywriters to improve the experience design while strategically shifting more emphasis towards customers' perspectives.
User research
One of the first things that I noticed was the information on the product page was too overwhelming. It looked like the brand was trying to throw all information about the car without knowing what really mattered to the customers.
The product pages considered as the highest traffic page on the site since most of the CRM, paid media, and social campaigns drove the customers directly to these pages. I took a look at the data analytics to understand the users behavior, including where they were coming from, which devices they were using, and how they interacted with the page. I noticed there was a drop in section views as they scrolled down the pages. There were also lower engagements in some sections resulting in the high exit number.
In order to understand the users' needs and why their engagement with the product pages was low, I conducted user research. I interviewed some VW owners and non-owners to understand their behavior while researching for a new vehicle. Below are the insights from the research:
- People were overwhelmed by the amount of information on the page.
- They couldn't get the information that they're looking for.
- They would like to know what other people were experiencing with the actual cars.
- They didn't know how to move forward with the purchasing if they're interested with the vehicles.
The research insights were helpful to prioritize the design decisions. I worked closely with the Content Strategists, Product, Marketing Analysts, and Legal Team to reduce the information to the essential and increase the key engagement of the page.
Job of the page
I analyzed the information architecture of the old product page that led to high numbers of page exit. I worked closely with the Marketing Analyst and Content Strategist to create a content framework that could increase the key engagement and buying activities. We started with simplifying the content structure and then adding the engagement tools.
Essential information
In order to increase the lead actions, we focused on reducing the information to the essential. From the conducted user research, I gathered what were the most important information for the customers. It helped us to tell the story from the customers' perspectives. We did card sorting exercise to prioritize the essential information from the lens of customers, product, and business. It became the foundation of product page structure to simplify the content and focus on driving purchase.
Design components
One of the intentions of the new design guideline was to keep the design simple. The old design didn't have a clear direction on using the standardized components, such as the usage of white space and interaction design of each element. We used a lot of tab interaction to show more information about the vehicle features.
The most challenging exercise was to use the new design guideline that was pretty rigid while trying to show important information about the vehicle, but kept it to the essential. To showcase the detailed information of the features which could be overwhelming, I shifted the design layout from the tab interaction to the accordion which was a big change. I thought the accordion interaction was more aligned with how the users interact with the screen: they scrolled up and down without any distraction to read the information horizontally.
I also tried to reduce the inefficient white space and use more impactful images to tell the brand story. This way, users didn't feel overwhelmed with all information they were seeing on the page.
Since accessibility was also an important part on the design, I always ensured that the design components we used were accessible, from the color contrast, alt-text images and components, and accessible through desktop, tablet, and mobile.
Customize vehicle
Customers needed to see whether the vehicle fit their needs. One of the engagement tools that could help educate customers were the configuration tool. We created this tool to help them compare the available trims and customize the vehicle based on their needs.
We added the configuration tool to the product page. This way, users didn't have to leave the page to start their purchase decision.
Vehicle discovery
Once the customers explored which vehicle fit their needs, they could search for available inventory near their locations directly on the product page. It helped the customers to discover how could they take the next step to start buying. We created the inventory tool on the product page to serve the right vehicle at the right time for customers.
Customers' Reviews
One of the most important information that customers needed was how other people experienced the vehicle. We created reviews tool to gain customer trust and influence their purchase decision on the product page. I simplified the design to help customers understand the overall rating of a vehicle and make it easier to filter out specific reviews they wanted to see.
The impact
The new product page became the foundation of how Volkswagen told the story from customer's perspective. During the redesign, I ensured that we looked at what mattered for the customers to help them learn about the product. By prioritizing the essential information, adding engagement tools, and improving the visual and interaction design, we saw an increase in the number of page visits (+26%), tools engagement (+10%), tools conversion (+9%), and action leads (+32%). This showed that we improved the user engagement of the page.
Visits
+26%
Tools Engagement
+10%
Tools Conversion
+9%
Action Leads
+32%
