LAUNCHED
Vehicle Autonomy and Intelligence Lab
Vehicle Autonomy and Intelligence Lab
Unifing Hyundai's website UX across 56 countries and boosting online sales through IONIQ 6 website
Unifing Hyundai's website UX across 56 countries and boosting online sales through IONIQ 6 website
MY ROLE
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.
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
TEAM
2 UX Designers, 3 Developers, 2 Visual Designers, 3 3D Artists
2 UX Designers, 3 Developers, 2 Visual Designers, 3 3D Artists
IMPACT
IMPACT
Distributed to all of Hyundai’s 56 branches worldwide, resulting in 350% increase in unique visitors and selling 375,113 units.
Distributed to all of Hyundai’s 56 branches worldwide, resulting in 350% increase in unique visitors and selling 375,113 units.
TIMEFRAME
TIMEFRAME
Jan - July 2022
Jan - July 2022
Summary
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.
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
Project 1. Hyundai's First Global Website Guideline
Unifying Hyundai's UX globally with clear headlines, WCAG compliance, and parallax scrolling for 3D view
Unifying Hyundai's UX globally with clear headlines, WCAG compliance, and parallax scrolling for 3D view
56
56
Implemented in 56 countries
Implemented in 56 countries
New
New
led to a IONIQ 6 project
led to a IONIQ 6 project
Solution
Solution
Project 1.
Hyundai's First Global Website Guideline
Project 1.
Hyundai's First Global Website Guideline
PROBLEM
PROBLEM
Incohesive UX
Incohesive UX
Hyundai's website design was different in each country
Hyundai's website design was different in each country
SOLUTION
SOLUTION
Global Guideline
Global Guideline
The global guidelines ensured a cohesive UX across all local branches worldwide
The global guidelines ensured a cohesive UX across all local branches worldwide
IMPACT
Deployed to
56 countries
IMPACT
Deployed to 56 countries
Project 2.
IONIQ 6 Website
Project 2.
IONIQ 6 Website
PROBLEM
PROBLEM
Static Content
Static Content
Hard to capture the car's spatial feel with just photos
Hard to capture the car's spatial feel with just photos
SOLUTION
SOLUTION
Parallax Scrolling
Parallax Scrolling
It gives users a comprehensive tour of the car, offering an in-person feel
It gives users a comprehensive tour of the car, offering an in-person feel
IMPACT
29% ⇡
Online sales
IMPACT
29% ⇡ Online sales
PROBLEM
PROBLEM
Jargon-Heavy UX Writing
Jargon-Heavy UX Writing
Hard for non-experts to understand features
Hard for non-experts to understand features
SOLUTION
SOLUTION
Intuitive headlines & animations to describe technology
Intuitive headlines & animations to describe technology
Anyone can understand
Anyone can understand
IMPACT
78% ⇡
Grasp
Users responded it's easy-to-understand
IMPACT
Users responded it's easy-to-understand
78% ⇡ Grasp
PROBLEM
PROBLEM
Limited Accessibility
Limited Accessibility
Some countries mandate accessibility guidelines.
Some countries mandate accessibility guidelines.
SOLUTION
SOLUTION
Level A WCAG
: Alt Text for all imgs
Level A WCAG
: Alt Text for all imgs
Not only have I met regulations around the world, I've also built an accessible UX
Not only have I met regulations around the world, I've also built an accessible UX
IMPACT
Increased
Accessibility
in IONIQ 6 Website
IMPACT
Increased Accessibility
in IONIQ 6 Website
Process
Process
Let me spill some tea …
about the decision-making and process!
Let me spill some tea …
about the decision-making and process!
Client's Request
Client's Request
The client requested a trendier website to boost online sales.
The client requested a trendier website to boost online sales.
Goal
Goal
How might we make Hyundai's website trendy and user-friendly to increase online sales?
How might we make Hyundai's website trendy and user-friendly to increase online sales?
Competitor Analysis
Competitor Analysis
Competitors used immersive content to create realism.
Competitors used immersive content to create realism.
Insight from Users
Insight from Users
56% users responded that 360° videos enable car purchases without test drives.
56% users responded that 360° videos enable car purchases without test drives.
Comparison
Comparison
I chose parallax scrolling to present 360° videos in a more interactive way.
I chose parallax scrolling to present 360° videos in a more interactive way.
Parallax scrolling
Parallax scrolling
Intuitive scrolling interaction, in line with the goal of creating an immersive experience
Intuitive scrolling interaction, in line with the goal of creating an immersive experience
Short-from video
Short-from video
Too casual and didn’t fit the car's traditional image or modern trust standards.
Too casual and didn’t fit the car's traditional image or modern trust standards.
Augmented Reality
Augmented Reality
Many countries lack reliable networks for AR, and many users lack capable phones.
Many countries lack reliable networks for AR, and many users lack capable phones.
Initial Guideline & Backstory
Initial Guideline & Backstory
Parallax scrolling
Parallax scrolling
Included examples and content specifications
User friendly writing
User friendly writing
Included what to look for in UX writing, good and bad examples
Feedback from Local Branches
Feedback from Local Branches
New Solution
"This guideline will violate accessibility law!
"This guideline will violate accessibility law!
Canada Hyundai requested compliance with the W3C accessibility guide, as some countries mandate it. This taught me the importance of inclusivity.
Canada Hyundai requested compliance with the W3C accessibility guide, as some countries mandate it. This taught me the importance of inclusivity.
Comply with level A of the WCAG guide
Comply with level A of the WCAG guide
For content lasting over 5 seconds, a pause, stop, or hide option should be provided. All images should have alternative text.
For content lasting over 5 seconds, a pause, stop, or hide option should be provided. All images should have alternative text.
New Solution
Iteration
Iteration
Pause button for GIF files and videos
Pause button for GIF files and videos
Auto-playing content over 5 seconds with other content will include a pause button.
Auto-playing content over 5 seconds with other content will include a pause button.
Alternative texts for all images
Alternative texts for all images
Feedback from Executives
Feedback from Executives
Highly praised by executives, leading to the IONIQ 6 website design project
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.
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
Website design
I applied the guidelines to the IONIQ 6 website, creating a sleek design to match the car's style
I applied the guidelines to the IONIQ 6 website, creating a sleek design to match the car's style
Iteration on Parallax Scrolling
Iteration on Parallax Scrolling
Two parallax effects instead of the initially planned single one
Two parallax effects instead of the initially planned single one
Purpose
To capture attention at the beginning of the website
Pros
Cost effective by leveraging previous 3d asset
Cons
Not showing the interior failed to satisfy users' curiosity
Decision
Added 360° parallax scrolling to show the interior
Previous Idea
Incorporated the interior color change, instead of a looping gif
Reason
Parallax scrolling emphasized the USP more impactfully than a gif.
Previous Idea
Incorporated the interior color change, instead of a looping gif
Incorporated the interior color change, instead of a looping gif
Reason
Parallax scrolling emphasized the USP more impactfully than a gif.
Impact
Impact
29% increase in online sales
29% increase in online sales
Standardized UX in 56 branches
Standardized UX in 56 branches
78% increase in understanding automobile technology features
78% increase in understanding automobile technology features
Takeaway
Takeaway
Communication is key, especially working on a big project.
Communication is key, especially working on a big project.
This project involved stakeholders like Hyundai Motor Group in Korea, photographers, 3D artists, and local branches in Canada. Minor miscommunication could waste time and lower quality, highlighting the need for clear communication. Since then, I’ve used bullet points in emails and sent meeting summaries to facilitate discussions.
This project involved stakeholders like Hyundai Motor Group in Korea, photographers, 3D artists, and local branches in Canada. Minor miscommunication could waste time and lower quality, highlighting the need for clear communication. Since then, I’ve used bullet points in emails and sent meeting summaries to facilitate discussions.
Accessible design for an international website is mandatory, not an option.
Accessible design for an international website is mandatory, not an option.
Many countries, like Canada, Israel, and Sweden, enforce accessibility guidelines by law. I realized that designing for international markets requires a universal approach. It inspired me to adopt a habit of inclusive design.
Many countries, like Canada, Israel, and Sweden, enforce accessibility guidelines by law. I realized that designing for international markets requires a universal approach. It inspired me to adopt a habit of inclusive design.
