New design of Volkswagen website improving on user-centred, UX & usability engineering
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.
Tools used
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.
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
#2 - Product Research
⚖
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.
Creating a HomePage
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
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.
UI Proposals
Select model with the arrows or dots
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.
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.