New design of Volkswagen website improving on user-centred, UX & usability engineering

volkswagen_logo-portada

Project

Volkswagen Web

Agency

Tasks

Duration

Link

DDB Barcelona

User Research

UX Strategy

Wireframming

Interface Design

Testing

May-Oct 2019


Files

My latest freelance project was with DDB Spain in Barcelona. I worked as a UX/UI Designer on a project for the double-migration of www.volkswagen.es and www.volkswagen-comerciales.es.

The main objective was to upgrade the old website with the new branding style, for a more pragmatic and user-friendly approach, resulting in a better overall user experience. It was a challenging project, one in which we created countless solutions for improvements in terms of usability, affordability and legibility.

I was part of the nine-person team for Volkswagen Spain’s website migrations. We began working on 27 May and finished without any problems before the set deadline. 🙌

Below I will describe the main parts of our process along with the methods we used. I will also go over some of the difficulties we faced as well as our accomplishments.

Ooops!!

The mobile version is not created.
Please visit on desktop version.

Overview

Introduction
Briefing
Team & Process

UX Research
#1 – User
#2 – Product
#3 – IA

Creating a HomePage
Step 1 – Categorise content
Step 2 – Analytics
Step 3 – Develop AI

UI Proposals
Testing
Conclusions

Briefing

Volkswagen announced its new branding in September 2019.

For this new plan, it was necessary to change the entire design of the website to update to the new look. To do so, we closely followed the strict rules of a closed CMS and pre-established style guides. The company’s main goal was to create a better connection with its users, through more intuitive information architecture. This meant enhanced usability, readability and meaningful content that answers their clients’ questions directly, as well as developing a coherent visual language with the new Volkswagen model.

The project lasted six months, from May to October 2019.

Team & Process

DDB Spain, in charge of the project, decided to set up two cross-functional and mirrored teams led by one Project Manager. The team members were recruited specifically for this project. Each team was responsible for one of the websites and consisted of a UX designer, a UI Designer, a Content Manager and a Copywriter.

We established our workflow in such a way that the UX Designer was in charge of the analysis and hierarchy of the information, research, determining the appropriate modules in collaboration with the UI Designer and also making visual proposals for improvement.

Organigram
Process

UX Research

When it comes to website migration, defining the user experience is one of the most complex challenges for Designers. My goal was to research the Volkswagen product and user. I investigated the old site, car models, and services, as well as the needs of the company to analyse and synthesise all of the information and to develop the best, efficient and creative solution with a focus on user-centred design.

#1 - User Research

👱‍♂🔍

The first step was to understand what it was that the website needed to accomplish. I began to investigate, speaking with various branches of Volkswagen, including advertising and social media to study the user and their purchase needs.

I then outlined the first database of users, targets and emotional purchasing needs. And finally, after much consideration, I applied a visual solution: Product cards and map flow.

  • Problem: Understanding user needs
  • Solution: DB Users, Product Cards, & Map Flow
  • Value add: Offer the best user experience

Product "Card" of Volkswagen

#2 - Product Research

Broom on Apple iOS 13.3

The old Volkswagen website had a lot of content repeated on different pages, sometimes contradictory and generally creating confusion for the user. To begin resolving this problem, I conducted a thorough analysis of all the products on the website. I contacted the resellers and Product Managers of Volkswagen and I conducted “mystery client” tests in dealerships. I also studied the Branding and Marketing sheets, and all of the official documents that Volkswagen sent me, in addition to checking on specialised automotive websites.

The Financial Services stage was a great challenge. Still, I correctly synthesised an overview of all the existing financing options and provided the information to the user in an easily digestible form.

I collected, analysed and synthesized large amounts of information, obtained from different stakeholders. By drawing the correct conclusions, I finally came up with a comprehensive design proposal that the client approved of, and that would add value to the user.

  • Problem: Disorganised product content
  • Solution: Restructure the products
  • Value added: Intuitively organised information, easy for the user to understand.

#3 - IA Research

🔗 🚗

The Volkswagen website had 79 pages. With this vast number of pages, there was too much interlinking between various services or related products. For example, in each showroom, there were related services and models. To solve this, I catalogued all of the information that made up the information architecture and hierarchy using a combination of the company’s interests and the users’ interests.

Finally, all the information, including the links, internal and external, were analysed and organised in a document called “Minesweeper” providing a reliable, flexible and scalable DB.

  • Problem: +200 links to define
  • Solution: Tab, DB interlinking Minesweeper
  • Value added: Provide value to the user through teasers, ensuring continuous navigation and respecting business interests.

Interlinking Volkswagen rafelgil

Creating a HomePage


Step 1:

Categorise content

First, we defined the content of the entire web in four main categories. We then assigned each a colour; it should be said that our main objective was to promote branding.

🔴 Conversion Promotions, Stock locator & Store
Yellow Circle on Apple iOS 13.3 Campaigns Branding & offers
🔵 Product Info Car models, dealers & Finance
Green Circle on Apple iOS 13.3 Added Value E-mobility & Innovation

categorias home volkswagen rafel gil
Volkswagen website content ordered by categories

Step 2:

Collate with Analytics

Next, we researched the analytics on the current Volkswagen website by conducting a Psyma report with an online form comprising 20 questions and 1000 participants.

We obtained the following metrics:

  • User behaviour
  • New users vs. recurring
  • Average session time
  • Bounce time
  • Business interests
  • Demography

Psyma report data & analysis
Psyma report data & analysis

Step 3:

Develop AI & Wireframming

In our first wireframes, we used our colour-coding to create a balanced and user-centred homepage, that helped visitors find what they were looking for.

❤️ RED: Conversion
💛 YELLOW: Branding & Offers
💙 BLUE: Product
💚 GREEN: Added value / Emotional

The idea was to have an impactful header and an engaging video underneath that would show the new branding and then explain the new Volkswagen paradigm. Then we would move on to conversion campaigns and brand products and services. Finally, in the footer, we included the six models of the brand for the user’s loop navigation.

wireframes volkswagen rafelgil

UI Proposals


User Centered
Design

Volkswagen’s CS6 design system already had a fully defined look and feel, but we hadn’t yet finalised the CMS.

It was still in development, and they were still implementing new modules. That being said, some aspects of the UI could be improved, such as the car selector, the menu and various visual elements. In general, we had to work with a closed CMS and with certain limitations. So I decided to develop specific proposals to improve the user experience.

  • Problem: CMS not complete
  • Solution: Visual interface improvements, model selector, menu selector.
  • Value added: Show proactivity for the project and focus improvements on the UX / UI

Select model with the arrows or dots

California Volkswagen rafelgil

Testing


From the start, my UX colleague and I pushed for rounds of testing. We hoped to obtain some valuable insights into user behaviour and potential areas for improvement. In our proposal to our supervisors, we detailed testing goals and requisites, areas we wanted to validate and tasks to perform.

In the end, Volkswagen decided to cancel the testing.

26

Sitemap revisions

70

IA Files

237

Wireframes

79

Pages published

Feedback of Rafel

Account manager | DDB Barcelona

Rafel nos ayudó mucho en un proyecto largo y ambicioso para nuestro cliente Volkswagen. Su actitud y predisposición siempre fueron bien acogidas y valoradas.

LINKEDIN

Lead Design | DDB Barcelona

Rafel colaboró con nosotros en un proyecto importante para la agencia, la suma que tiene de nociones de UX y UI nos ayudó a avanzar en un proyecto...

READ MORELINKEDIN

UX Designer | DDB Barcelona

He’s an absolute team-player, always ready to solve problems or challenges thrown at him with sound IxD and UI proposals, thus improving the overall user...

READ MORELINKEDIN
Conclusions

A complete redesign of Volkswagen's website

The biggest challenge was synthesising all the information of the old web, while maximising usability and user experience with more intuitive navigation.

View Brochure

Thinking about a project or idea?

Let's talk...

TALK WITH RAFEL