Project Overview:
We were tasked with revamping the model pages on Lexus.com to improve the user experience and streamline asset production. The primary goal was to present comprehensive information about each vehicle while focusing on storytelling to highlight their unique attributes. By shifting from isolated features to a narrative-driven approach, we effectively showcased each model’s distinctiveness. Additionally, we implemented an atomic design structure to enhance reusability across components. The result was a successful redesign that balanced user engagement with production efficiency.
Project type: Web
Category: UI
Role: Sr. Experience Designer
Date: 2018
Key Modules:
Hero Module
The Hero Module highlighted campaign-level content, incorporating high-quality visuals, MSRP details, and multiple call-to-action (CTA) buttons. Video support was added for immersive storytelling, with mobile-specific adjustments such as autoplay disablement to enhance performance.
Visualizer Module
The features included a model selection interface with carousel-style browsing, allowing users to easily explore various options. Customization was enhanced through color swatches, enabling users to visualize different configurations. Pagination provided a seamless way to navigate and explore multiple visual perspectives of each vehicle.
Information Layer
The Information Layer consolidated detailed specifications, trim comparisons, and feature breakdowns into a user-friendly format. Features such as tooltips and accordion-style tabs streamlined complex data presentation.
Results:
The modular design and interactive features significantly boosted user retention on the model page, driving improved engagement. Enhanced navigation and well-placed CTAs led to higher conversions, encouraging more users to explore offers and inventory. Additionally, the responsive design ensured a seamless and consistent experience across devices and regions, enhancing global accessibility.