Volkswagen Discovery Space

A new car usually takes about six months to produce, but in rare cases the wait can stretch to twelve. Volkswagen came up with the idea of a virtual space where customers could get precise information about the current stage of production, preview purchase documents, discover brand and educational content, or get rewarded for a long wait. We were asked to develop it bottom-up, grounded in a deep understanding of user needs.

period
2018–2019
with
the agency team and AF.lab (opens in a new tab)
my part
UX and creative direction, information architecture, user flows, wireframes

Who is waiting

To create a rewarding experience for frustrated customers, we needed to understand their behavior and mood during the wait, how they spend time online and what gives them satisfaction there. Our research started from Volkswagen’s buyer personas; with analytics tools such as Facebook Audience Insights, SoTrender and Brand24 we ran further studies to understand their motivations and lay the groundwork for personalization. Six additional interviews brought out more detailed pain points. Together they led to 12 jobs the platform had to do; matched with each persona, they gave tens of user scenarios, each turned into functional requirements on one large scenario map.

A wall covered with hundreds of sticky notes in columns: the scenario map from the workshop.
Fig. 1 -- User scenario map: personas and the jobs new owners need done, turned into requirements.

An architecture that changes with the wait

The information architecture came from user-story mapping and the requirements behind each scenario. At its core was an onboarding questionnaire, rewarded when filled in, that told us which persona we were dealing with. Each element came with notes on how a given persona should see it, and with time frames that unlocked actions once the wait passed critical points. We also kept navigation to a minimum, so content was always at hand and paired with clear actions.

From sketches to flows

With the architecture in place, we moved to low-fidelity wireframes. A working group of a graphic designer, two UX researchers, a developer and the product owner produced hundreds of sketches in brainstorming sessions; each was matched with requirements and given its pros and cons. Anyone in the group could vote for their preferred option, and the product owner confirmed the choice. From the approved sketches we made mid-fidelity wireframes, linked them into user flows and held a workshop with Volkswagen’s team to test our assumptions and gather feedback from all stakeholders.

A hand-drawn sketch of one order stage on a timeline, with handwritten notes in Polish.
Fig. 2 -- Low-fidelity sketch: one stage of the order on a timeline, with the dealer’s tasks below.
Dozens of grey mid-fidelity wireframes laid out and linked on a dark canvas.
Fig. 3 -- Mid-fidelity wireframes, linked into user flows.

The prototype, tested

Finally, we gave our graphic team a hand-off with the information architecture, user flows, mid-fidelity wireframes and strategy documents. The clickable prototype came together quickly and without costly changes. We then tested it with a focus group, using eye-tracking and GSR (galvanic skin response) to check the answers people had given in interviews.

The final design on a desktop monitor and phone screens: an order timeline with red Volkswagen imagery.
Fig. 4 -- High-fidelity design: the order timeline in seven stages, from processing to pickup.
The page for a buyer’s ordered Golf: the car on a red background with key specs, and an accessories section below.
Fig. 5 -- Final design: the page for the buyer’s ordered car, with its key specs and matching accessories.