Volkswagen Group – Building a new eCommerce platform

During my experience at diconium, I worked together with the Volkswagen eCommerce team to build a new eCommerce white label solution that could be used by all brands within the group such as Volkswagen, Audi, SEAT, SKODA, etc.

Although I was mainly responsible for tasks that belong more to the UX & concept sphere of design such as, customer flows and wireframes, I also ended up designing some UI screens and components that were later included in the Volkswagen style guide.

vw001.png

CUSTOMER PROFILES

 
Image 1.png

Curious browsers

They have not ordered a Volkswagen product online yet. No specific product in mind when navigating the website.

Intent: Get inspired, see what‘s new.

Image 1 Copy 2.png

Thrifty shoppers

They only buy the products they need at a specific moment. they are often on a budget and make sure they don’t exceed it when they shop.

Intent: Check the best offer, understand and calculate long-term effects.

Image 1 Copy 3.png

The trendy

They are focused on innovation and modern lifestyle and are often returning visitors.

Intent: Experience what‘s new, multiple kinds of acquisition: trial, rent, on-demand, etc.

 

High spenders

They spend more than the average customers. This group tends to make large orders once every few months or weeks and cares about status and reputation.

Intent: Get the most premium and high-quality products.

 
Image 1 Copy 4.png

Loyals

They promote the brand and keep a constant flow of revenue. They trust Volkswagen and its products and have a better understanding of the brand’s products, pricing, and services than other customers.

Intent: Feel safe and connected to the brand.

 
 

ECOMMERCE PILLARS

 

Based on the customer profiles, their needs, and Volkswagen's vision for their eCommerce. We defined three main pillars to serve as a basis for all of the upcoming design and business decisions regarding Volkswagen's eCommerce:

01. Convenient

02. Frictionless

03. Personal


WIREFRAMES

 
Checkout process wireframes

Checkout process wireframes

 
Home high-fidelity wireframe with possible strategies we could take to tackle all of our customer profiles.

Home high-fidelity wireframe with possible strategies we could take to tackle all of our customer profiles.

 
 
Purchase process wireflows

Purchase process wireflows


UI SCREENS

 

Once the structure of the most important pages was defined, I started working on the UI, making sure the components I was using could be easily adapted to the other brands within the Volkswagen Group.

PLP for Used Vehicles

PLP for Used Vehicles

 
PDP for after sales products

PDP for after sales products

PDP template being used for Audi (first row) and Volkswagen (second row)

PDP template being used for Audi (first row) and Volkswagen (second row)

 
Shopping cart - Mobile

Shopping cart - Mobile

Checkout Process

190815_VW_OneShop_Checkout_step-1_summary-close_Desktop.png
 
190815_VW_OneShop_Checkout_step-2_same-billing-address_Desktop.png
190815_VW_OneShop_Checkout_order-confirmation_Desktop-v2.png
Anterior
Anterior

Looptimize - Designing a website from scratch in one week

Próximo
Próximo

Unitymedia - Rebrushing a checkout process