Susana Binder
Experience researcher & designer

Volkswagen

Websites re-design

Summary

Sector
Automobile industry

Brief
The client’s websites needed to be adapted to a new CMS following updated branding and design guidelines.

The ultimate goal was to better connect with its users and clients by building a more intuitive information architecture, providing content that answers real questions of their clients, and developing a coherent visual language.

My Role
· UX Researcher and Designer for VW's Passenger Cars Website
· Information Architecture, content hierarchy for product pages, benchmarking, collecting and analyzing user data

Deliverables
· Sitemaps, Wireframes, Usability test guides, Presentations
· Volkswagen Passenger Cars
· Volkswagen Commercial Vehicles

Duration
5 ½ months (May-Sep 2019)

Websites redesign — Volkswagen

Overview

Introduction

Team & Process

Challenges
#1 - Know your user
#2 - Working with a CMS
#3 - Big company, competing interests
#4 - Working as a team

Making of...The Homepage

Adding emotion with "Vive Volkswagen"

What about testing?

Learnings
1️⃣ Fight for your data
2️⃣ OneHub = OneTeam

Introduction

Volkswagen announced its new logo and brand design in September 2019.

I was part of the 9-head-team for Volkswagen Spain's website migrations. We took up work on May 2 and finished comfortably before the set deadline 💪 .

Here, I'll take you through part of our process, methods, struggles, and successes.

Team & Process
Organigram

Organigram

Team & Process

For the purpose of this project, the creative agency DDB Spain in charge of the project, decided to set up 2 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 one UX and one UI Designer, one Content Manager, and one Copywriter.

Workflow

Workflow

Our workflow was established in a way that the UX Designer was tasked with the analysis and hierarchy of information, determining the appropriate modules in collaboration with the UI Designer. 

The UI Designer, together with the Content Manager, would then prepare the modules with specifications for the Copywriter as well as select and prep images to visually support the content.

The high-fidelity wireframes were presented to the client for final validation.

Challenges

#1 - Know your user

Adapting VW's websites to their new branding and design guidelines, meant to significantly reduce the overall content and reorder the remaining information to make it more user-centered.

It required me to revise all content, identify the relevant one for the user, and in what order they would expect it. To do this, I needed to get to know the user, for which I needed data on them.

One would think that in an established corporation like Volkswagen, accessing all sorts of user data was a click away. It was not. Quite to the contrary, gathering data seemed like mission impossible. Repeatedly, I was told, "there's no data".

What to do?

To provide the new product pages with some user-centered foundation, I had to get resourceful.

I didn't have a lot. What I did have, though, was a small report with information on navigation data that showed the number of clicks and time spent on different sections of one specific product page. And, I also had been introduced to both the Brand Manager and the Data Analyst.

👉 I went on to analyze and interpret the navigation flow resulting from the report.
👉  I contacted the Brand Manager and asked him for Volkswagen's target for the product page at hand.
👉  I asked the Data Analyst to access Google Analytics and make a selection following the information obtained from the Brand Manager.
👉 The last step was to cross all data and insights gained with the new design guidelines.

As a result, I managed to significantly reduce the content of the product page while providing a more user-centered structure and navigation.
(Side note: Scroll-wise it's even longer than the old version. This is due to the spacious CMS module arrangement, however.)

As there was no time to apply this process to all car models, this served as the reference for all other models.

#2 - Working with a CMS

If challenge #1 had been to identify what content to keep, challenge #2 was how to show the content.

While the use of a CMS (Content Management System) undoubtedly offers advantages, one big disadvantage from a UX perspective is that it's limited to a certain number of modules and might not provide the exact module we envision for a specific piece of content.

How to proceed?

Assisted by the UI Designer, whenever possible, we chose the CMS-module that best fulfilled the UX needs previously established.
In some cases, we had to find workarounds with the help of the Content Managers: explaining what the goal of a piece of content was and what its interaction should look like. The CM's would then tweak it as far as the system allowed for.

#3 - Big company, competing interests

Volkswagen is a big international corporation with numerous departments, some of them operating like semi-independent entities (e.g. sales, after-sales, finance).

It's no wonder then that even though the new branding and design guidelines were spearheaded by headquarters in Germany and supposed to shift the company's focus from product to user-centered, we found ourselves repeatedly in a position where we had to subordinate our UX findings to other considerations and find acceptable compromises for all stakeholders involved.

One example is the sitemap structure. In his case, we had to deal with both the diverse interests on the national level and also specific requirements coming directly from German HQ. The new design guidelines indicated no more than 6 elements on the first level of navigation - we had 9.
After weeks of struggle, calls, and different presentations aimed at stating the needs of the Spanish market, we had to succumb and reorder content to suit the 6-elements-rule. But we managed to keep after-sales on the first level, which internally was a fundamental aspect.

Another example is the "Making of...The Homepage", which I go into detail a bit further down.

#4 - Working as a team

For the purpose of this project, 9 people from different professional backgrounds, who didn't know each other and who had never before worked together were assembled as the "OneHub" team. This team was expected to function right away and to complete 2 entire website re-designs in a bit over 5 months.

Not knowing each other's working and communication style nor the intricate inner workings of the corporation represented a major challenge.

It was thanks to the members' individual commitment to the project's success, our PM's outstanding dedication, and the in-house leads and supervisors that the project was not only delivered in time but also received internal praise from headquarters for its creative use of the CMS and its successful adaptation to the new branding and design guidelines.

Making of...The Homepage

Starting from scratch

The homepage was the one page where we weren't asked to reduce any content but rather make a brand-new proposal on what information to show and in what order, following the new design and branding guidelines.


Step 1:
Applying the brand & business filter

To start with, we made a sitemap of the current homepage (in gray).
We then applied a filter that responded to brand and business criteria, i.e. elements we knew Volkswagen would want to keep or introduce on the homepage (in green).

Homepage sitemap: current status in gray; categories to be kept or introduced in green

Homepage sitemap: current status in gray; categories to be kept or introduced in green

Volkswagen website content ordered by categories

Volkswagen website content ordered by categories

Step 2:
Categorizing content

Our second action was to make an inventory of the selected content sections and order it by categories.

We managed to distribute the content in 4 categories:

1️⃣ Conversion (red) for VW Match, Promotions, Stock locator and Store

2️⃣ Campaigns (yellow) for branding and special offers

3️⃣ Product Info (blue) for Car models, After-sales, Car dealers, Finance

4️⃣ Added Value (green) for an Onboarding element to the new brand image, E-mobility, Innovation, Vive VW

Psyma report data & analysis

Psyma report data & analysis

Step 3:
Converting data into actionable insights

Next, we dived into a Psyma report that had been conducted on Volkswagen's website from Nov 7 to Dec 17, 2018.

The questionnaire comprised 20 questions, including 2 open-ended ones, and counted close to 1000 participants.


Gathering data

The report told us who the web users during that period were, how often they accessed the web, what their primary goal was, and what information they were looking for.

It also included a section with declared future actions by the users.


Actionable insights

Based on these numbers, interdepartmental interests, and the new branding and design guidelines, we ratified our first conclusions and drew some more.

1️⃣ We decided to set the threshold at 20%: everything above this % was relevant to "the user" and would find its way into the homepage.

2️⃣ Regardless of the 20%-threshold, there were sections that had to be included due to the inner workings of the company.

3️⃣ Furthermore, the new branding and design guidelines asked for innovation, e-mobility, and an event section to have a place in the first row. 

Websites redesign — Volkswagen

Step 4:
Wireframing by categories

In our first wireframes, we used the colors we had initially determined (red, yellow, blue, and green) to help us create a balanced and user-centered homepage that offered visitors easily what they were looking for.

Short reminder:
♥️ Red = conversion
💛 Yellow = branding
💙 Blue = product
💚 Green = added value 

The idea was to have an engaging video clip at the very top to serve also as a branding tool.

After a short welcoming message, there was room for changing branding and price campaigns as well as some conversion (price offers and stock locator) elements.

This would be followed by added value content on e-mobility and events, and one product (finance service).

At the bottom, people would find the "top 6" car models.

Wireframes evolution: by categories · CMS modules · with images (fltr)

Wireframes evolution: by categories · CMS modules · with images (fltr)

Lo-fi wireframe of launched homepage

Lo-fi wireframe of launched homepage

Launched version

Our proposed wireframe was repeatedly iterated and adapted to suit the different and competing interests within the company.

As can be seen by the predominance of the red color, in the end, it turned out to be a much more conversion-orientated homepage than what we intended.

Adding emotion

Vive Volkswagen....living the brand!

There was one element we all (literally ALL 🥳) agreed on: the event section that Volkswagen Spain had scattered all over the place had to be turned into a major cornerstone of the new user-centered experience.

Just as Volkswagen has a wide range of car models it also offers a broad spectrum of events:

🎸 With Driving Music, it not only sponsors a variety of concerts but also provides a car-sharing service. You may even select one of multiple Spotify playlists to go along...

🚐 Ven con tu furgo is a yearly meetup of van-lovers.

🏎 Driving Experience lets Volkswagen fans test cars like the next Michael Schuhmacher.

👓 The Store for brand-lovers.

The challenge here was to create a frame that could embrace this very diverse content and appeal to several targets.

In a team effort, one of the copywriters and myself we created a word play-logic that went 

     1️⃣ VW = mobility
     
2️⃣ mobility = progressing in life = living experiences
     3️⃣ VW = living experiences

And with some conceptual storytelling (watch presentation a bit further down), we devised the following funnel:

Websites redesign — Volkswagen

Conceptual Storytelling for "Vive Volkswagen"

Proposed vs published version

👈 This over to the left is the structure we proposed for "Vive Volkswagen". 

#SienteVolkswagen - 🎸Driving Music
It started out on a very broad level that unites us all as humans, thus as users.: feeling.
Feeling through music. 

#ComparteVolkswagen - 🚐Ven con tu furgo
From feeling we went on to the next very human element: sharing.
Sharing our life, our experiences, our love for vans.

#ConduceVolkswagen - 🏎 Driving Experience
From here, we introduced more material aspects: driving.

#ColeccionaVolkswagen - 👓Store 
Hard-core conversion: buying.

Of course, our proposal suffered some revisions trying to accommodate all internal interests. In the end, it started off with the more conversional element of the Driving Experience...

Check out the current version here!

Also, as German design guidelines dictated no more than 6 elements on the first navigation level, this section ended up a little bit hidden on the second level...see if you can find it 🧐

What about testing?

Our proposal

From the start, my UX colleague and I pushed for rounds of testing. We hoped to obtain some valuable insights into user behavior and potential areas for improvement.

In the document we pitched to our superiors, we detailed testing goals and requisites, areas we wanted to validate, tasks to perform during the test, listed a few testing methods, which ones we'd choose for the occasion, and why, proposed some testing tools, and mapped out "next testing steps".

UX testing proposal

27
Sitemap revisions
70
IA files
237
Wireframes
79
pages published
Rewrite this text & update the background
Learnings

As in every project, the learnings were numerous and diverse: How to adapt quickly to a work environment with complex communication channels? How to reach goals without stepping on anyone's toes? How to streamline contradicting pieces of information? ...?

However, I'll focus on my personal Top 2:

1️⃣ Fight for your data

As I explained earlier, getting to know the user I was designing for proved to be one if not the major challenge of this project.

Even though I was repeatedly told that there was no data available, I found a way to meet some personal minimal UX requirements. 

The learning here is two-fold
👉You've got to fight for your data: don't accept a "there's no data" but rather think of alternative ways of how to access and combine existing data.
👉Know your limits: at some point you've got to realize that there, in fact, is no more data to be surfaced and you've gotta make the best with what you've got.

2️⃣ OneHub = OneTeam

9 people (1 PM, 2 UX, 2 UI, 2 CM, 2 Copy) were hired and assembled as mirrored teams to execute VW's OneHub project.

The theory was that one team was in charge of the Passenger Cars website, the other team was responsible for the Commercial Vehicles website.

Reality, however, showed us that the OneHub required a OneTeam.
As tasks kept emerging, some more complex than others, and the deadline approached, we realized the benefits of joining forces and answering questions and doubts together, as one team rather than 2 mirrored ones.

Thus, my UX colleague and I would jointly analyze and synthesize complex sections like financing or after sales.