Volkswagen

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)

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.

#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.

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).

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:

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".

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.