The stepper UI lets users know exactly where they are in the process. Serving as a way to aid their customization story. Using the granular approach, I stripped down the exterior process to contain color, wheel and grill tabs.
I designed the color, wheel, & grill components for exterior and interior to have some overlap for reusability, because at the time myself and some of the UX team were creating a new design system for Lexus.com.
Packages are shown without the visual clutter in the previous design. Users can access more details on packages via the tooltip next to the titles.
The card components were also designed to be reusable across the 'Options' section in the customization process.
The summary page shows your final customization details with an option to change individual components without having to restart the whole process. Making the interior, exterior and other components reusable also helped in designing the summary module.
Moving forward, I used the feedback to iterate my final designs.
Using testing feedback on the summary, I decided to lay out all the details in an 'avatar' format (just like in its done in video games). This lets them see everything with the ability to make necessary changes.
The tab switcher for car styles was changed to a dropdown so its more intuitive for our users. Our previous designs also lacked iconography, and relied heavily on text. The new iconography gives more feature details instantly.
In our review session, I received useful critique on all stages of the customization process. It was generally well received by my colleagues, along with notes on areas for improvement.
View Prototype