Cupra Car Configurator
A walkthrough the redesign of the car configurator of CUPRA
The challenge of this car configurator is that it has many dependencies and we have to take into consideration so many possible errors on the part of the system. That is to say, there are many combinations that are not possible once some elements are chosen during the configuration process.
Also, in this process, as a request of the Product Owner we had to add a section of elements that were not going to have a price and it was not going to know the stock.
ROLE
UX/UI Designer
CLIENT
CUPRA (SEAT)
PLATFORM
Website
TOOLS
Sketch, Flinto, Principle, Zeplin
METHODS
Personas, User Flow, Surveys, Tree testing, Card Sorting, User testing
DURATION
6 months
Objectives
The main objective was to redesign the CUPRA car configurator in order to:
Methodology
We started this project with a meeting with stakeholders and product owners to know the main objectives of this project.
Then we did a benchmark to know more about the competition's configurators.
Once this benchmark was done, we had a meeting with the product owners about the approach they wanted to give to the CUPRA configurator.
Then we started to develop the sitemap of the configurator and the user flow with all the possible variables.
Then we started to sketch wireframes in low fidelity and then do a usability test.
Benchmark
This analysis consisted of the main contents and structure of the brands most related to CUPRA to learn more about the configurators of the competition. It consisted of an exhaustive analysis of 20 car brands.
Affinity Map
We made an affinity map to find the strengths and weaknesses of when a person from our target audience is going to make the configuration of their ideal car.
We spent a week doing this affinity map in-depth to know in depth the points to highlight and draw conclusions.
Sitemap & User-flow
This analysis consisted of the main contents and structure of the brands most related to CUPRA to learn more about the configurators of the competition. It consisted of an exhaustive analysis of 20 car brands.
Tree Testing
Once we had a solid structure about what the structure of the configuration process should look like, we did a tree testing to see if this structure makes sense. These were the results: These were the results:
Lo-Fi Wireframe
After having the basis of the clear structure and content of each section we began to make wireframes in low fidelity.
To present the client we made a rapid prototype in Invision:
Hi-Fi Wireframe
After the meeting with the client, we applied the feedback that he gave us. Although in this case, they liked the design a lot so we didn't have to make many changes.
The next step was to pass this design to High Loyalty for the product owners to advance the customer look&feel of this configurator.
This was the result of this wireframe in high fidelity:
User Testing
Scope & Objectives
Scope:
Evaluate the flow of the CUPRA CC for both, the mobile and the desktop versions. The test includes the following aspects: logic of the navigation, interactions, items discoverability, content and labeling and users perception of the car configurator and CUPRA products.
Objectives:
Methodology
User Tasks
Happy flow car configuration
Review the summary page and save the configuration
Modify and start a new configuration
Incompatibility recovery
Final design
Final design to be used for the user test:
©Beatriz Gómez Pérez. All rights reserved.
©Beatriz Gómez Pérez. All rights reserved.
©Beatriz Gómez Pérez. All rights reserved.