Build & Price Configurator
A tool to customize vehicles and to understand pricing options before purchasing a custom vehicle at their local dealership
Lead UI Designer
Role
Web
Platform
Year
2019
Publicis Sapient + FCA
Team
© 2022 Melanie Wong
The Build & Price (B&P) page is a tool for customers to customize their desired vehicle and to find the overall pricing before purchasing their custom vehicle at their local dealership. Our team's goal in creating this tool was to design a premium experience that matches the luxurious nature of the Alfa Romeo brand.
The newest Build & Price configurator was out performing the old Build & Price tool (on Jeep, Ram, Fiat, Chrysler, and Dodge brand sites) as it was recently re-launched for Alfa Romeo USA brand. The tool was set out to be replaced and as a result this eventually was rolled out to the other brands.
Background
I was the lead Visual Designer and worked closely with UX Designers, Art Directors, Creative Directors, Front End Developers, Project Managers, Business Analysts, and QA. Our team needed to collaborate and work closely with each brand team (Jeep, Ram, Fiat, Chrysler, and Dodge) to ensure the branding and the content being displayed was consistent throughout.
My Role
On top of the existing Alfa Romeo design, I created variations of the components to be flexible enough to accommodate the new features of each brand. The use of colours, typography, and imagery needed to be consistent with the brand style and have the same look and feel as the new Alfa Romeo Build & Price experience.
Design system
The Vehicle Selection page provides customers a view of all of the available vehicles to build. I wanted to have imagery that showcased users the type of lifestyle each vehicle came with. This page also shows a glimpse into how many models are available to build and their starting price.
Vehicle Selection
The Model Selection page shows a view of all of the models that the customers are able to build. Each model comes with different features. For example, some Jeep Wrangler models (Sport Altitude & Sahara) only come with 4 Doors, compared to others that come with 2 doors. Before selecting the model, we wanted users to have the option to compare the models with the Model Comparison toggle.
Model Selection
In the Exterior section, users can view their vehicle and scroll down to view the vehicle's various selections of exterior colours, wheels, tops, etc. Their selections will appear on the left panel once they've made a selection on the right.
Exterior section
In the Interior section, users can view the vehicle's interior with a panoramic view. When a user selects a feature to add on the right panel, it will appear in the interior image as well as inside the panorama.
Interior section
The Packages section shows a list of group packages for users to add more features to their vehicle. Users can click on a package to view more details or to add them to their vehicle.
Packages section
With the Powertrain section, users can scroll down with the engine in view and select their ideal engine and transmission.
Powertrain
The Summary shows a breakdown of the user's selection for the exterior, interior, and powertrain details of the vehicle.
Summary
The Summary drawer shows a quick overview of the user's customized vehicle. Users can see the exterior and interior view of the vehicle as well as the price.
Summary Drawer
