Overview
Deliverables
All powertrain merged VLP for Sonata
My Role
UX
Team
Visual Designer, UX Researcher, HAEA (Dev Team), Producer, Account
Client
Hyundai Motor America
Project Brief
The client wanted to enhance the visibility of vehicle nameplates on their website by combining all powertrains into a single VLP (Vehicle Landing Page) per nameplate instead of having separate VLPs for ICE, HEV, and PHEV powertrains. While ICE VLP and VDPs had the most visitors, users constantly shopped alternative powertrains in the same nameplate regardless of whether they started on an ICE or Alt-Fuel VLP / VDP. This seems to indicate that EV shoppers are open-minded to ICE vehicles, and ICE shoppers are also interested in learning more about EV vehicles. This merge took place across all touchpoints on the website.
We were asked to merge only Sonata ICE and Hybrid VLPs into one. However, after the Sonata VLP merge update, the clients wanted to observe the performance of the combined VLP before deciding whether to apply the merged VLP to other vehicles.
Audit
When we first received this project, we knew that merging the powertrain would have a significant impact on various places of H.com, including the build configurator, global navigation, inventory page, TDP, and more. Therefore, we had to first start with an audit and find all the components and pages that needed to be updated.
• We have identified 31 components that require updates. Our approach was to prioritize the VLP structure/logic first, followed by the Global Navigation and other components within VLP, as they are the primary and most essential parts of the project. Finally, we moved on to other details such as the Build Configurator, Inventory, and more for a versatile shopping experience.
Research
We first started by examining how other original equipment manufacturers (OEMs) display vehicles with multiple powertrains on their websites. We looked for instances where an OEM had a combined Vehicle Listing Page (VLP) for a specific model, which is similar to what our client was looking for. We discovered that the Honda website and a few others have a combined VLP that matches our client's vision. However, since a merged VLP is not a very common feature on OEM websites, our UX researcher conducted a usability test to gauge user reactions to the combined VLP and identify any potential issues or concerns.
Findings from merged VLP usability test
While some participants expressed positive opinions and appreciation for certain aspects such as visual appeal and comparison features, many participants had concerns and suggestions for improvement related to navigation, information overload, and difficulty in accessing specific sections.
-
It was difficult for participants to determine which fuel type vehicle the presented explanations, vehicle specs, images, features, and options apply to. They wanted clear and organized explanations of each fuel type.
-
Participants expressed a desire to compare the features and options of hybrid and non-hybrid vehicles. They wanted a clear and accessible way to understand the similarities and differences between these two options.
-
Some participants felt overwhelmed by the amount of information presented on the VLP. They suggested simplifying the page, removing redundant information, and providing a more concise and organized layout.
-
Many participants expressed difficulties in navigating the website and finding the desired fuel type vehicle information. They highlighted the need for clearer navigation, a comparison tool, and easier access to specific sections.
Considerations
Powertrain content differences
Need to ensure that users are able to find relevant content quickly and easily understand which feature relates to which fuel type.
Flexible cross-shopping
Cross-shopping elements should be scalable and flexible enough to work across combined and non-combined powertrain models
Impact to navigation
Solution needs to take into account entry points and cohesion with the current navigation.
VLP Structure & Logic Explorations
We began the initial exploration by examining the VLP structure and logic based on our findings and insights. We carefully considered how each option would impact the user and other related pages to ensure a consistent and versatile experience across the website. Below, you will find three options that we have narrowed down from numerous ideas, each with its own pros and cons.
Option 1 - Page level toggle O , Component level toggle X
Overview:
Added main fuel type toggle functionality In the secondary nav.
Each fuel type will have its own overview
Near the top of the page, user will be presented with information on alternate fuel types available
Each overview will be shown based on the user’s entry point into VLP.
Notes:
Clear differentiation of fuel types allows for a quick understanding of features/visual elements of the model
Each fuel type VLP can have its most optimized unique VLP
Minimal component updates
May be confusing to users that all fuel types/trims are related
Option 2 - Page level toggle O , Component level toggle O
Overview:
Combined VLP experience displaying multiple powertrains.
Content updates based on the user’s entry point into VLP.
Added carousel functionality in the hero that functions as the main fuel type toggle.
Added toggles at a component level.
‘Gas & Hybrid trims available’ messaging is added to indicate fuel types available.
Notes:
Included carousel arrows in hero to quickly switch and compare/contrast different fuel types.
Consistent UI pattern of toggles gives the user the ability to cross-compare fuel types they’re interested in.
Scalable to support multiple additional fuel types and other trim groupings in the future.
Maybe each fuel type VLP cannot have its most optimized unique VLP
Option 3 - Page level toggle X , Component level toggle O
Overview:
Combined VLP experience displaying multiple powertrains.
Content updates based on the user’s entry point into VLP.
Added toggles at a component level.
Notes:
A consistent UI pattern of toggles gives the user the ability to cross-compare fuel types they’re interested in.
Contents are highly dependent on entry point without ability to toggle everything at once.
Maybe each fuel type VLP cannot have its most optimized unique VLP
VLP Main Toggle Exploration
After finalizing our VLP logic, our designers and clients had concerns that our page-level toggle might not be easily accessible for users when they land on the page. Therefore, we began exploring ways to highlight the page-level toggle more prominently to ensure that users arriving at the VLP from a merged entry point have a quick and clear way to switch fuel types. We also conducted user testing with the explorations that we have made.Below, you will find the two strongest options we had from many, as well as the results of the testing.
Option 1 - Split Hero as Toggle
Descriptions
Very prominent selection of fuel type due to placement in hero, animation, and content hinting
Works as a page-level toggle but also plays well with component-level tabs
Unusual interaction pattern on our site
Use cases and future scalability might impact design down the road
Option 2 - Simple Toggle in Hero
Descriptions
Potentially increased visibility due to placement in hero and inclusion of fuel type names (versus just a carousel)
Works as a page-level toggle but also plays well with component-level tabs
This option is also the most scalable long-term to accommodate up to four fuel types.
The styling of the toggle is already being used on our site
Not quite as prominent as Option 1
VLP Toggle User Testing
Our UX researcher conducted the test to measure the user’s ability, understanding expectations, and preference for switching between powertrains while exploring VLP on both mobile and desktop devices. Conducted two Comparative, unmoderated remote user testing sessions on UserTesting.com for mobile and desktop designs. 31 participants were selected from the UserTesting panel, with 15 for mobile and 16 for desktop, using the standard Hyundai target market screener.
The user testing revealed that ‘Toggle in Hero’ was the most preferred design among our options. Participants liked ‘Toggle in Hero’ because it was easy to use, especially for switching fuel types. They found the placement of the fuel type toggle next to the vehicle name clear and visible. This option was praised for its user-friendliness and ease of navigation. Although design aesthetics were not specifically mentioned, usability and clarity were more important to the participants. Overall, ‘Toggle in Hero’ was considered to provide a straightforward and user-friendly experience for switching between fuel types.
Final design
Below are the final designs of our combined Sonata VLP. Clients were extremely happy with the final design that we came up with after this long complex work. We have put together a lot of effort and time to get it right based on our research, multiple review sessions and testing.
Combined VLP Hero with page level fuel-type toggle
Combined Components with component level fuel-type toggle
Gallery Component on VLP
Offers Module Component on VLP
Additionally…
After deciding on our combined VLP logic, which is the main part of this project, our team explored designs for all the components impacted by the combined VLP. This includes the trims detail page (TDP), gallery page, specs page, global navigation, vehicle browse page, build configurator, inventory page, offer page, and more. We have developed multiple ideas for each of these pages/components and have shared them internally and externally with our directors, other teams, and clients to ensure that our approach aligns with their expectations. Please click the link below to view the pages/components I've updated and presented to the client for this project.
Takeaways
After completing the complex eight-month project of combining two vehicle listing pages into one on the Hyundai USA website, I learned that sometimes it could be challenging to stay focused on the initial goal of the project and to determine which part of our website would be impacted. When working on a large project like this for an extended period, it's easy to lose focus and have the design head in a different direction. However, I learned the importance of not losing sight of the project's initial objective and effectively communicating with other designers to create consistent designs throughout the process. It was also challenging to know where and how to start when working on such a big project, but I learned how to strategically plan such a large project, figure out where to start, and how to proceed.