UI/UX design, visual design, prototyping, wireframing, interaction design
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.
Annelies Guisset – UX/UI designer
Elke Heymans – Front-end lead
Lennert Peeters – Front-end developer
Bart Noppen - Slicing
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.
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
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.
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.
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.
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.
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.