D’Ieteren_web_mockup_01

UI/UX design, visual design, prototyping, wireframing, interaction design

Redesign of D'Ieteren's stock website for Volkswagen vehicles

Introduction

During a previous project for D’Ieteren, my colleagues at Ordina Belgium helped research and design the stock.volkswagen.be website. Our objective then was to build an online platform so that customers could buy a stock car from anywhere they wanted within Belgium. 

The online sales process could be completed entirely through a digital platform, including the signing of the contract, the payment of an advance and the choice of financing method. The customer could even sign the order form for the vehicle and any financing contract directly on the platform via VDFin.

My assignment for this project was to redesign the existing website so it would follow Volkswagen’s rebranding.

Team

Annelies Guisset – UX/UI designer
Elke Heymans – Front-end lead
Lennert Peeters – Front-end developer
Bart Noppen - Slicing
 

Challenge

The new Volkswagen design is radically different from the previous style - titels are much larger, there's more use of white space and images, buttons are shaped differently, etc. This had a huge impact on how to redesign the existing website. Even the content couldn’t remain entirely the same because of this new style.

This meant that prior to the design work, I conducted a thorough analysis of the existing content and layout elements alongside the new styleguide. Many of the patterns were no longer the same and needed to be re-evaluated. The most prominent examples of this were the sidebar navigation and footer navigation.


Opportunity

Figuring out how to translate an outdated design to a very modern and clean design provided an immense challenge from both design and development perspective. Such a puzzle, however, is something I’m passionate about solving. I enjoy the challenge of figuring out exactly how to make the design work for the content. I wanted to take this opportunity to explore better layouts and use the new patterns of behavior to our advantage. Also, the new visual style of Volkswagen was fun to work with – clean, plenty of white space, and heavy use of visuals.


Exploration and iteration

As with any new project, I took a deep dive into the materials at hand. This included

  • The research conducted by my colleagues, with focus on content, target audience, and functionalities
  • The current website design (form)
  • The online version of the website (function)
  • The new VW styleguide
  • Online examples of the new VW style and branding

Once I had a better understanding of the project, I got to work on brainstorming and sketching out ideas for the major pages of the website.

D’Ieteren_wireframes_02
D’Ieteren_wireframes_01
D’Ieteren_wireframes_03

During the process of turning these wireframes into mockups, I checked with my development team often to gauge the technical feasibility and discuss interaction designs. There were a few functionalities that raised a number of questions in terms of functionality and usability, such as the filter for example.

 The filter system in the previous version of the stock.volkswagen.be design did not match the new filter design as implemented on a similar website. I analyzed both implementations in terms of usability as well as user experience. With my designs, I sought to create the most user-friendly solution while staying as true as possible to new VW design. 

I applied the same logic to the card elements on the results page and its functionalities. I designed the cards to fulfil two main objectives: make the cars look as appealing as possible to increase the conversion and offer a clear, enjoyable user experience.

D'Ieteren_web_home
1440_stock-volkswagen_Overview

Throughout the design process, there were also a number of feedback rounds with the client. Particularly for a commercial website, it’s important to keep business interests in mind while designing. I turned the mockups into clickable prototypes through InVision, allowing for a more true-to-life representation of the designs for client feedback.

scrnshot_invision

Based on the stakeholders’ feedback, I made a number of small design changes. One of our front-end developers set to slicing the designs – preparing the framework for further development and back-end implementation. Throughout the process of development, the developers and I stayed in continuous communication in case anything needed to be changed or designed, so we could make sure everything was working smoothly. 

The final result is currently live and can be found at www.stock.volkswagen.be.

D'Ieteren_mobile_mockup_01

Lessons learned

What I enjoyed most about this project was the emphasis on the visual design and aesthetics. Of course, function trumps form but it was wonderful to see what a real difference design can make in terms of user experience, with particular focus on how this experience feels. Buying a car online isn’t something most of us do every day, so it’s important that the user feels as comfortable as possible, that this experience has been created just for him/her:

  • The design is pleasant to use and look at,
  •  you don’t feel rushed,
  • the data is displayed in a logical, clear way
  • CTA’s are clearly visible

What could have gone better was better estimation and scope regulation. I should have conducted a thorough analysis of the tasks at hand compared to the time budget available. This project also taught me valuable lessons in terms of continuous communication – not being afraid to flag issues or raise concerns when I have them, as soon as I have them.