Lexus Electrified

Streamlining EV Selection for a Seamless Experience

OVERVIEW

Revamped the Lexus Electrified experience by retiring the Hybrids page and creating new Electrified Vehicle (EV) pages, providing users with clear pathways to explore and choose from an expanding range of EVs.

View Live Site

Project

Marketing Website
Client-Facing

ROLE

UI/UX Designer

TIMELINE

Feb - Mar 2023

Play

Goal Achieved

Marketed Lexus Electrified Vehicles to Drive Customer Interest

Created landing pages for Lexus Electrified Vehicles to attract potential users and introduce an expanding range of powertrains. These pages clarify differences, validate selections, and encourage users to learn more and schedule appointments at local dealerships.

OUTCOMES

The metrics were provided by the strategy team three weeks after the project launch.

29k

Unique Page Views

Achieved a 60% increase in views compared to the retired Hybrids page in 3 weeks.

15k

Carousel Users

Over 90% of users clicked CTAs from the carousel to explore specific model pages.

High

Client satisfaction

Successfully launched the project in 1 month, featuring interactive visuals they loved.

01 | RESEARCH

Customer Goal

Enable customers to effortlessly explore Lexus’ Electric Vehicle (EV) lineup, understand each model’s unique features, and confidently choose the perfect EV for their needs and lifestyle.

Customer Journey Map:

Business Goal

To guide consumers from uncertainty to confidence and ultimately to selection, aligning the landing page with Lexus’s marketing strategy to compete effectively in the EV market.

Visual breakdown of the user’s path from interest to conversion:

02 | PROJECT OBJECTIVES

Overall Objectives: Customer Goals + Business Goals

1. Inform and Educate

Reduce uncertainty, highlighting Lexus's unique advantages.

2. Attract and Engage

Introduce users to Lexus’s EV offerings with rich content.

3. Inspire and Convert

Transition users from interest to purchase.

03 | CONTENT RESEARCH

Competitive Analysis

A high-level summary of how Lexu’s competitors like Audi, Volvo, Cadillac, Mercedes-Benz and BMW’s put information on their EV landing pages.

Findings:

• Highlight bold hero sections and key EV features and benefits to engage users.
• Incorporate rich content (interactive tools, GIFs, videos) to enhance user exploration.
• Mention sustainability, warranty, and other key topics clearly within FAQs.
• Avoid overly technical details to keep content accessible.

04 | STRATEGIES PROPOSED TO CLIENT

Content Strategies

I collaborated with the PM and Strategy Team to define core strategies and essential elements, informed by:

• UX Design Perspective: Customer expectations, goals, and competitive analysis.
• Strategic Data Perspective: User behaviour insights from the previous Lexus Hybrids page.

05 | DESIGN KICKOFF

Site Map

Page Structures

To refine and validate the consumers’ path to purchase:

Wireframes

I crafted page wireframes, integrating Highlighted, Rich, and Mentioned Contents drawn from the Competitive Analysis and Strategy Plan.

06 | DESIGN CHOICE EXAMPLES

Design Choice 1: Reusing Components

With a one-month launch timeline, efficiency was paramount. I prioritized reusing existing functionality, repurposing interactive elements from the RZ catalog design—a project I previously led—to streamline development for the EV project.

Mouse Hover GIF

Interactive Charging Options

Image + Copy layout

Design Choice 2: Redesigning the Vehicle Lineup Carousel

To address the Strategy Team's observation of low engagement with the Vehicle Lineup carousel on the previous "Hybrids" page, I proposed a redesigned solution for the "Electrified" page, with the following key considerations:

• User Engagement • Scalability • Accessibility & Mobile Optimization

Step 1. Ideate and down select

I began by exploring several options for the lineup carousel with two prominent ideas:

• A Powertrain filter to help users easily sort through different vehicle types.
• The carousel layout was explored in full-width and compact designs (like cards).

After thorough evaluation from multiple perspectives, we chose the full-width carousel, Design #1.

Step 2. Iteration

• Incorporating Immersive Visuals

Leveraged real environment backgrounds in Design #3 to enhance visual appeal and align with the client’s lifestyle branding, inspiring its adoption in Design #1.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Initial Design

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Iterated Design

• Simplifying Interactions

Streamlined user interactions with elegant transitions, ensuring feasibility across mobile and desktop through early developer collaboration.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Initial Design

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Iterated Design

Successful Outcome:

• Enhanced Usability:

The revamped “Electrified” page carousel introduced intuitive navigation, concise visuals, and robust filters, outperforming the old “Hybrids” page by making vehicle comparisons and exploration easier.

Old “Hybrids” page lineup carousel

Revamped “Electrified” page lineup carousel

• Impressive Metrics:

Within three weeks, the carousel attracted 15,000 users, with over 90% clicking CTAs to explore specific model pages. The client was highly satisfied with the outcome.

• Scalability:

Its success led to adoption across other Lexus pages and a reskin for Toyota lineups.

View Toyota carousel: Trucks Lineup

Final Interactive Prototypes

I created prototypes for client review, refining designs through team feedback to ensure feasibility and alignment with the project scope.

Desktop prototype: Figma link

07 | DESIGN HANDOFF

Design Breakpoints Handoff

Developed responsive breakpoints and delivered production-ready assets optimized for various devices, including large desktop, small desktop, tablet, and mobile.

Production Assets handoff via SVN

Exported and organized assets with detailed naming conventions, ensuring seamless SEO optimization and efficient asset management.

08 | VISUAL QA

Design Validation

After implementation, I validated developed pages against the design to ensure alignment, documenting discrepancies for developers to address pre- and post-launch.

09 | FINAL RESULT

Client Satisfaction

Our client (Toyota Canda Inc.) was highly satisfied with the project’s outcomes, including a 60% increase in page views compared to the retired Hybrids page within just 3 weeks of launch.

Launched in March 2023, the Lexus Electrified project has stayed live on Lexus.ca with minimal updates.

View Live Site: Lexus Electrified

OTHER CASE STUDIES

Nav.it

Nav.it Design System

Skiin Connected Life