Vehicle Listing Page Update
Overview
Deliverables
Merged Sonata Gas & Hybrid vehicle card (Part of “Powertrain Merge Project”)
My Role
UX
Team
Visual Designer, UX Researcher, HAEA (Dev Team), Producer, Account
Client
Hyundai Motor America
Project Goal
Design a cohesive Sonata vehicle card on the vehicle listing page that can support the upcoming 2024 Combined Sonata. Solution should promote cross-shopping and integrate with non-merged models seamlessly.
Considerations
Consistent site experience
The solution needs to align with decisions already made for the VLP and navigation.
Flexible cross-shopping
Cross-shopping elements should be scalable and flexible enough to work across combined and non-combined powertrain models
Cohesion to navigation
The solution should consider the entry point and how it fits with the current navigation.
Minimize changes
Minor changes with a focus on Sonata VLP will help minimize the timeline because there is such a breadth of elements to update.
Current
The vehicle listing page is where you can see a full list of Hyundai vehicles with images and specs. It's one of the main pages that takes users to our VLPs. On this page, users can filter the vehicles and compare their specs. On this page, there were separate cards for the Sonata Gas and Sonata Hybrid vehicles.
Exploration
I made sure that our solution aligns with the decisions already made for the VLP and navigation. I found clear ways that work with both combined and non-combined powertrain models to minimize confusion. Here are the options we have come up with.
Option 1 - Separate Entry Points with Fuel Type Tabs
Notes
Clear that gas and hybrid trims are all part of the same Sonata model
Users can quickly and easily compare vehicle info across all vehicles regardless of fuel type
Consistent UI pattern (Fuel type tabs) with the merged Sonata VLP
Breaks split fuel type pattern we currently use on the site
Requires more interaction for users to get to the VLP they want
The discrepancy between strategy approved for nav models drop-down
Requires higher HAEA LOE that may exceed our deadline
Option 2 - Separate Entry Points (Keeping The Current Pattern)
Notes
Consistent with the current split-fuel type approach on the site
Allows users to easily compare different fuel types for the same model
Users may think Sonata and Sonata Hybrid are different models (instead of different fuel type options for the same vehicle)
Option 3 - Combined Entry Point (Client’s Selection)
Notes
Clear that gas and hybrid trims are all part of the same Sonata model
Low LOE for HAEA
Breaks split fuel type pattern we currently use on-site
Combined vehicle specs could be confusing to the user
Final Design
We have developed a solution that is in line with our new merged VLP logic and others. Although having both merged and non-merged cards on the site is not the most ideal situation, we have successfully integrated both types of cards to work well together with minimal confusion for our users. Our clients were very satisfied with the outcome.
Vehicle Listing Page
Vehicle Spec Compare Overlay
Retrospective
It was amazing to work on such a huge project. Although we thought this change wasn’t ideal, we made every effort to come up with the best possible solution. I consistently sought to understand the client's perspective and the reasons behind their request for this change while working on this project. I wish we had more time for planning and testing at the outset, but I'm extremely proud of how the team managed our limitations and made everything happen.