Industry

Automotive

Client

Toyota

Role

Senior UI UX Designer

Platforms

Mobile Web + Desktop

Toyota Super Bowl

Main Project Image
Main Project Image
Main Project Image

Enhancing the Tundra Model Landing Page for a Super Bowl-Ready Experience

The 2022 Toyota Tundra marked a major milestone—its first major makeover in 15 years. Toyota knew it was a game-changer and decided to spotlight it during the Super Bowl 2022 TV spot. As traffic from the commercial flooded the website, my job was clear: rethink and redesign the Model Landing Page (MLP) to make it as engaging and action-driven as possible, converting visitors into potential buyers.

I led the redesign of the Tundra MLP, collaborating with a dynamic team that included an account producer, content strategist, fellow UX designer Dylan Hsiao, content creatives, developers, and Toyota clients. We worked in an Agile environment, following Scrum sprints to ensure we stayed on track and met deadlines leading up to game day. I worked closely with content creatives to align on asset creation and specs, while collaborating with developers to ensure feasibility and smooth implementation. My responsibilities spanned visual design, UX, creating interactive prototypes, and delivering detailed design annotations. I also worked with Toyota clients to level set timelines and expectations for the project.

The goal was simple: get users excited about the Tundra and push them to take shopping actions right after watching the Super Bowl TV spot.

Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #1

Brainstorming with Content Creatives

Toyota’s content team brought in high-fidelity vehicle images and videos, but we needed to sync up on what worked best. After several sessions, we settled on key themes: •Go to Places •Premium Towing Performance •Central to Toyota’s core messaging: Innovation and Adventure

MLP Enhancements Breakdown

1.Welcome Mat (Enhanced): We gave the hero section a major glow-up with both image and video backgrounds to highlight the horsepower and towing capacity. It was designed to wow users right from the start. 2.Vehicle Colorizes (Enhanced): Analytics showed low engagement with color selection and vehicle rotation. We proposed: •Auto-rotate vehicle as users scroll. •Prioritize the most popular colors in the sequence. •Parallax terrain backgrounds to match color choices. •After some development constraints, we moved forward with the parallax effect only, creating a dynamic experience without overwhelming the user. 🚗 3.Single & Grid Gallery (Enhanced): The original design forced users to click to see images. We preloaded multiple images in a grid format, empowering users to easily browse the vehicle’s features. Analytics confirmed it increased engagement and simplified the browsing experience. 4. Hotspots: We added interactive hotspots that let users click into vehicle details, zooming in on key features while rotating the vehicle. This visual storytelling made technical specs much more digestible. 5. Flipbook: Instead of the traditional “gradewalk,” which felt overly technical, we designed a story-driven flipbook for each trim. It took users through different terrain and towing scenarios, showing how the Tundra could fit into both work and play.

Large Project Gallery Image #2
Large Project Gallery Image #2
Large Project Gallery Image #2

Next Steps and Enhancements

To smooth out the user journey, we enhanced the CTA flow: •Clear separation of CTAs with aesthetically-pleasing blocks to guide users. •Repeated the “Build Your Vehicle” CTA throughout the page to keep the shopping mindset in users' minds as they scrolled. •We simplified the path toward purchase decisions, aiming to guide users naturally into the shopping process.

Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1

Execution Phase

In addition to the design work, I ensured the MLP was responsive across all breakpoints (desktop, tablet, and mobile). Working closely with developers, I provided detailed annotations and specs to bridge the gap between the design and technical teams.

Elevating Financial Experiences: Dello Fintech Banking App's Impact and Future Endeavors

Key Outcomes: •Engagement with the enhanced modules significantly increased, especially on mobile and desktop. •Visitors were much more likely to click on the “Build Your Vehicle” CTA, with 2-3 times higher click-through rates. Performance Gains: •Scroll Depth: There was a +10% increase in scroll depth, with more visitors reaching the bottom of the page and interacting with the “Build Your Vehicle” CTA. •MY22 Tundra Mobile: 12% (+10%) •MY22 Tundra Desktop: 11% (+10%) CTA Interaction: •Next Steps CTA: 6% (Mobile), 7% (Desktop). •Build Your Vehicle CTA: 21% (Mobile), 17% (Desktop). While the results were a great success, there’s always room for improvement. Moving forward, I would: • Bring in 360-degree interior tours to engage users more deeply, inspired by brands like Apple. • Enhance storytelling capabilities to provide a more immersive experience across trims, reducing information overload. • Explore a single trim carousel to give users a cleaner way to explore features without feeling overwhelmed.