Problem
The Volkswagen Group consists of six separate brands all with their own bespoke Used Vehicle website. Often when one brand requests new functionality other brands also want the same functionality. How can we reduce our time as a team and increase efficiency to deliver functionality to all brands more quickly and effectively. Also be able to produce new UVLs in a timely and cost effective way.
Goal
To create a bespoke VWG design system that can be used to build a templated SOLR solution managed and built by our in house development team. This solution must be encompass all needs of the manufacturers, dealers and users. Also be re-branded in the style of any VWG manufacturer, easily updated and straightforward to bolt on new functionality and features.
Solution
From research and ideation to UI and implementation, I created the VWG Design system and customisable template to allow users to have a seamless journey, from initial vehicle search to reserving that perfect vehicle, and everything in between. I also designed the template to consider customisation and branding also various brand pain points with their existing websites and what they would like from a new used vehicle locator. The finished template was built on a new platform and each brand within VWG could have options of slightly different layouts that the new SOLR VWG template could accommodate.
ROLE: UI / UX Designer
TOOLS: Adobe XD, Figma, Figjam, Miro, FlowMapp, Jira
TIMELINE: 12 weeks
Process
UX Research & Information Architecture
Initial information gathering: I looked at our existing UVLs and made lists of features, elements and pages. As a team we held collaborative brainstorming sessions to gather information on competitor websites also other e-commerce websites. We used sticky notes to collate findings and grouped them into categories. Items we looked at in depth were CTAs, search functionality and navigation, information architecture also trust and credibility.
Stakeholder interviews: I then created a list of questions to pose to our internal stakeholders and performed stakeholder interviews also then a list of questions were presented to the dealers and external brand managers to gather their thoughts.
Notable trends with the interviewees were:
Finding a vehicle that matches their specific needs and wants
Detail rich categorised information
Wanting large and clear images so user has a detailed view of the vehicle
Finding a quick and clear pathway to reserving a vehicle
Favouring a less input heavy initial search to access results quickly
Needs
Easy to follow and concise quick search with minimal search fields but still giving the user tailored results
Detailed information architecture and straight forward navigation with minimal clicks to reserve/enquire
Clear and well proportioned model images also a large gallery with multiple vehicle views
Pains
Long searches - not able to view results quickly
Knowing the size of vehicle they require but not the model
Shopping for vehicles is overwhelming and sales people are pushy
Not able to locate the important vehicle information they require
Desires
A quick and painless way of finding the perfect vehicle for their needs
To feel they have all the information at their fingertips
Feel confident, knowledgeable and reassured about their enquiry/reservation
Infinity diagrams: After analysing the data, I synthesised the findings into manageable reference points and combined the above information and created an infinity diagram and grouped the information into categories. Most of the ideas/concerns/painpoints centred around the search and also the information shown on the vehicle details page
Click to enlarge
Personas: I created archetype personas based on 7 user/customer types to determine and understand the needs, painpoints and goals of each user:
Empathy map - from the information in the personas I empathised with each customer type to create an empathy map to explore what each customer is saying, thinking, feeling and doing when going through the process of searching for a vehicle.
From the information gathered so far collaboration workshops were set up with all internal stakeholders and a Feature Matrix was created to determine all features needed for the template and how much they are needed by the user. From this a Feature Roadmap was created to determine a priority order/phasing for each.
Userflows and sitemaps were created using FlowMapp. The userflows documented the process of customer journeys within the website with a priority emphasis on flows shown here.
Initial user touchpoint with the landing page to the dealer enquiry
Initial user touchpoint with the landing page to the reservation of vehicle
Initial user touchpoint with the landing page to the user saving a search
Wireframing & Prototypes
Case Study 1: The Initial Search
From the research gathered so far below shows some of the findings and focus areas uncovered relating to the initial search
Findings
User desires a quick and painless way of finding their perfect vehicle
The user favoured a less input heavy initial search so they can access results quickly
The model images must be shown as the user often is unsure of the model name they are searching for, seeing the comparative size of the vehicle will be important.
Model images must be clear, well proportioned and dealers would like to display the ‘from price’
Stakeholders mentioned that they felt the quick search on some UVLs is too separate from the model select.
Focus areas
Uncluttered layout with less promotions and more focus on search
Connecting the input fields with the models
Less scrolling and a clear CTA
Categorised models on the model select area
Show the user how many results they are going to achieve by their choice
Clear but friendly language and direction
Tabbed/accordion search
Search is main feature of the page
Tabs displaying clear instruction at the top of each
Incorporating the model select section into the search
Sticky 'View Results" CTA which is always present on the page.
Alternative horizontal and vertical layouts
Exposed search
Search is main feature of the page
All search options can be seen at a glance
Incorporating the model select section into the search
1st SRP show that the horizontal search would push the search listings down when the search was open
2nd SRP shows that the search section would work as a smaller device view as well as desktop
Case Study 2: Vehicle Gallery / Vehicle Information
Another pain point uncovered from the user research was centred around vehicle images and improving usability so that the user could complete tasks easily.
Findings
User desires a multiple views and large clear images of their chosen vehicle
The dealer has many vehicle images and wants to show the vehicle from multiple angles initially with less scrolling
Hierarchical CTAs that show 'enquire' or 'reserve' as a primary provide a clear pathway to the end goal
Users want to share the vehicle on social media easily
Users want to see the price they are paying for the vehicle instantly - this includes 'finance'
Focus areas
Clear hierarchical CTAs
Emphasis on sharing and social links
Less scrolling on the gallery and options to show more vehicle images
Finance and how the T&Cs/Disclaimers and per month price will be shown
Use of icons and how 'saved search', 'compare', 'favourites', 'watched vehicle' and 'special offer' could be included for future phases
Option to show a '360 vehicle view' and a vehicle video
Prototypes
A series of prototypes were planned to demonstrate...
How the search variations search would function
The journey from beginning a search to reserving a vehicle
How the gallery options would function and display images
Layouts for the advanced search
How the sticky bars would function
User Testing
We planned to test each one of the prototypes on 5 stakeholders and 5 users (Nielsen approach) to gather their feedback.
As the tests were planned on wireframe prototypes the aesthetics or branding of the website could not be tested, so it was difficult to recognise an emotional reaction to the tone, feel, comfort, security etc. The tests performed were more about how the website functioned and how easily the user could get from A to B. Also if they needed more information regarding navigation elements.
