Hyundai Motor Group
Unified the UX of Hyundai websites across 56 countries and boosted online sales through the interactive IONIQ 6 website
LAUNCHED
IONIQ 6 Website
MY ROLE
As a full time UX designer, I designed a guideline, iterated on feedback from local branches, improved accessibility related guidelines, and directed UX design of a website.
TEAM
2 UX Designers, 3 Developers, 2 Visual Designers, 3 3D Artists
IMPACT
Distributed to all of Hyundai’s 56 branches worldwide, resulting in 350% increase in unique visitors and selling 375,113 units.
TIMEFRAME
Jan - July 2022
Summary
This case study involves two projects: developing Hyundai Motor Group's first-ever website design guideline and implementing it on the IONIQ 6 website.
Project 1. Hyundai's First Global Website Guideline
Hyundai's websites lacked a unified UX, with static designs that poorly showcased vehicle interiors and exteriors, jargon-heavy language, and accessibility issues, violating regulations. I designed a global guideline with parallax scrolling for 3D product views, intuitive headlines, and compliance with WCAG accessibility standards.
56 countries
Implemented in 56 countries
New
led to a IONIQ 6 project
Project 2. IONIQ 6 Website
My goals were to boost online sales during the pandemic by creating a visually immersive showcase of the car's interior and exterior, emphasizing its signature dual lighting, and simplifying the explanation of driving assistance features. Adapting a guide I had previously created, I used parallax scrolling to showcase both the exterior and interior of the car, using dual-lighting key colors, and animating the driving assistance features to help consumers understand them.
350%
increase in unique visitors
375,113
units sold
Summary
Project 1. Hyundai's First Global Website Guideline
PROBLEM
Incohesive UX
Lack of guidelines caused design inconsistencies.
SOLUTION
Global Guideline
Every local branch in the world would form a cohesive UX by following global guidelines.
IMPACT
Deployed to
56 countries
Project 2. IONIQ 6 Website
PROBLEM
Inadequate Showcase
Simple photos and videos can't convey the three-dimensionality of a car
SOLUTION
Parallax Scrolling
The parallax scrolling interaction gives users a comprehensive tour of the car, offering an in-person feel, depending on how much they scroll
IMPACT
29%
Online Sales
PROBLEM
Jargon-Heavy UX Writing
Hard for non-experts to understand automobile technology
SOLUTION
Intuitive headlines & animations for describing technology
Anyone can understand
IMPACT
78%
Users responded it's easy-to-understand
PROBLEM
Limited Accessibility
Some countries legalized to follow accessibility guideline
SOLUTION
Level A WCAG
: Alt Text for all imgs
Not only have I met regulations around the world, I've also built an accessible UX
IMPACT
Increased
Accessibility
Process
Let me spill some tea … about backstory and process!
Client's Request
The client requested to maintain the existing brand image of Hyundai but to make it look trendy.
Clients wanted to show users that Hyundai Motor Group is trendy. However, they asked to maintain the brand legacy that Hyundai has established over decades.
Goal
How might we define the voice of Hyundai making it intuitive and trendy while still maintaining a trustworthy image and delivering accurate information?
Comparison
We chose parallax scrolling after considering other forms.
Parallax scrolling
Intuitive scrolling interaction, in line with the goal of creating an immersive experience
Short-from video
Too casual and didn’t fit the car's traditional image or modern trust standards.
Augmented Reality
Many countries lack reliable networks for AR, and many users lack capable phones.
Initial Guideline & Backstory
User friendly writing
Before, a few professional terminologies were contained in writing, making it hard to understand. However, anyone can easily understand descriptions after applying a user-friendly writing style.
Parallax scrolling
Hyundai's client took Apple's AirPods site as an example. I took the parallax scrolling interaction, which allows users to see the product in three dimensions as they scroll, and adapted it to fit Hyundai's image.
Feedback from Local Branches
New Solution
" This guideline will violate accessibility law! "
Canada Hyundai branches specifically requested to follow the W3C accessibility guide since some countries force enterprises to follow the accessibility guide. This experience thought me importance of inclusivity.
Comply with level A of the WCAG guide
If moving or scrolling content is longer than
5 seconds, a pause, stop, or hide function must be provided. Alternative texts for all images should be provided.
Iteration
Pause button for GIF files and videos
If the moving or scrolling content 1) plays automatically, 2) is more than 5 seconds long, and 3) is placed in parallel with other content, you must provide the feature to pause, stop, or hide it.
Alternative texts for all images
It must provide alt text for all images.
Feedback from Executives
Highly praised by executives, leading to the Ioniq 6 website design project.
This was the first global guideline for websites in Hyundai's history, and it received rave reviews from executives. As a result, we were asked to design a website using the guidelines for the global pages of the Ioniq 6, which launched four months after the guidelines were created.
Website design
I applied the guidelines to the IONIQ 6 website, creating a sleek design and directing videos to match the latest electric car's style.
Impact
Distributed to
56 branches
It standardized UX design for Hyundai over the world.
29% increase
in online sales
This interactive website increased 29 % in online sales.
78% increase
in understanding tech features
Users responded it's was easy to understand automobile technology features, compared with previous website design.
Takeaway
Communication is key, especially working on a big project.
This project involved many stakeholders, including clients such as Hyundai Motor Group in Korea, photographers, 3D artists, and local Hyundai branches in Canada. A minor miscommunication could have wasted time and effort and deteriorated the quality. I realized how critical communication is. Since then, I have written emails and messages clearly as they can be with bullet points and sent an email with discussed details after meetings. It eased discussions with various stakeholders.
Accessible design for an international webpage is mandatory, not an option.
Not to mention global societies recommend inclusive designs; many countries comply with accessibility guidelines by laws, just as Canada, Israel, and Sweden do. I realized that designing a webpage for international markets has to be universal. Since Korean websites rarely consider accessibility, it impressed me. Since then, I've formed a habit of inclusive design.
