Design System · Hyundai.com
Building one template
that reads in both Arabic and English
Live demo: hmc.saltcake.com ↗- My role
- I owned CX planning, IA, UI, EN/AR design guidelines and AEM component rules.
- Team
- Me & 3 Product Designer · PM · 1 Developer
- Tool
- GA4 Analysis · Figma
- Timeline
- 7 months
Original template: 193 countries.
The US, Germany and the UK were initially excluded.
I rebuilt it for 18 markets in the Middle East and Asia, in Arabic and English, which meant every component had to survive right-to-left layout without becoming a separate design.
Impact overview
Market coverage
One template shipped to 18 markets across the Middle East and Asia, then expanded to 5 European markets: Italy, the UK, Germany, France and Spain.
Operational efficiency
Scenario-based AEM component guides cut page build time from 25 minutes to 15, a 40% reduction for regional operators.
Bilingual system
Alignment and interaction rules defined per component, so teams could publish in Arabic or English without a separate design.
My role
I owned CX planning, IA, UI, EN/AR design guidelines and AEM component rules.
Team
Me & 3 Product Designer l PM l 1 Developer
Tool
GA4 Analysis l Figma
Timeline
7 months
Design System · Hyundai.com
Live demo: hmc.saltcake.comBuilding one template
that reads in both Arabic and English
Original template: 193 countries.
The US, Germany and the UK were initially excluded.
I rebuilt it for 18 markets in the Middle East and Asia,
in Arabic and English, which meant every component
had to survive right-to-left layout without
becoming a separate design.
Impact overview
Market coverage
One template shipped to 18 markets across the
Middle East and Asia, then expanded to 5 European markets.
Italy, the UK, Germany, France and Spain.
Operational efficiency
Scenario-based AEM component guides cut page build time from
25 minutes to 15, a 40% reduction for regional operators.
Bilingual system
Alignment and interaction rules defined per component, so teams
could publish in Arabic or English without a separate design.
What 102 people across 17 markets told us
Surveyed 102 customers and dealers across 17 markets. Defined regional CX/UX benchmarks and competitive gaps across UX/UI, Content, and SEO.
Identified key issues through surveys and validated findings through interviews.
Survey : 17 markets,102 respondents(34 dealers + 68 operators)
Period : Dec 2020 - Feb 2021
52.6 %
Lack of contents
・No new contents
・Immersive contents
・EV vehicle info.
35 %
・Lack of On/offline
functional connection
・UI Design problem
・Not mobile first
UXUI painpoint
29 %
Web Operations
・No SEO optimization
Survey Rating Scale (5-point):
Extremely Satisfied / Very Satisfied / Somewhat Satisfied / Not as Satisfied / Not at all Satisfied
Total: 116.6% due to multiple responses.
Surveyed 102 customers and dealers across 17 markets. Defined regional
CX/UX benchmarks and competitive gaps across UX/UI, Content, and SEO.
Market Research: Painpoint
What 102 people across 17 markets told us
CX Journey
Customer experience journey
Developed two key CX strategies through journey analysis and benchmarking: personalized content to guide user actions and engaging experiences to strengthen brand connections.
CX
Category
Content
Function
New Features
BP Analysis
BP Analysis
Insight
Extra BM list
Extra BM list
Insight Keywords
Purchase Stage
New features
Content
Functionality
Design
Customer Experience Journey Market
Developed two key CX strategies through journey analysis and benchmarking:
personalized content to guide user actions and engaging experiences to strengthen brand connections.
Research Insight
CX-Content
• Offering personalized web experience in real-time
• Guiding following actions that fits customer’s interests
CX-Function
• Inspiring customers by sharing their real-voice
• Delivering emotional values between brand and customer
Information Architecture (IA)
Redesigned IA for improved usability
Regrouped menus by CX insights across 4 customer types and added user-centric primary navigation.
New
Integrated
Updated
Existing
UX Design — IA
Redesigned IA for Improved Usability: Regrouped menus by CX insights across
4 customer types and added user-centric primary navigation
Personalized experience design through CXJ
Different customer needs, a more relevant experience. We personalize the navigation and footer menu for each customer type.
Behavioral & Marketing Perspectives
Different customer needs, a more relevant experience. We personalize the navigation and footer menu for each customer type.
Personalized experience design through CXJ mapping from segmentation
to individualized user experiences across 4 customer types.
Definition about New Customer types
Four kinds of car buyer
Personalized Footer menu : Navigation is prioritized differently for each customer type, delivering a more relevant and seamless experience.
Brand Perception
Purchase・Related Factors
Purchase・Related Factors
Service & experience
01
02
03
04
First- time customers
Potential Customer
EV vehicle buyers
Existing customers
Explore the Hyundai brand
and find the right vehicle for you.
Compare options and move
confidently toward purchase.
Get the information you need
about electric vehicles.
Access ownership, maintenance
and after sales services.
New to Hyundai
Shop for a Hyundai
Considering EV Cars
Hyundai Owners
KEY CONTENTS
All cars
SUV
Sedan
Fleet & Business Inquiry
Hyundai Company
Community
KEY CONTENTS
KEY CONTENTS
KEY CONTENTS
Electric Cars
Simulate Charging & Range
Charge at Home
Charge at Road
Incentives Guide
Calculate Potential Savings
Build & Price
Book a Test Drive
Request a Quote
Brochure & Price List
Find a Dealer
Live Showroom
My Hyundai
Book a Service
Find a Service Center
Service Programs
Hyundai Convenience
Accessories & Tutorials
The system had to work in both directions
Arabic doesn't just translate. It mirrors. Reading order flips, control placement flips, and directional elements such as arrows and carousels can behave differently.
Arabic doesn't just translate. It mirrors. Reading order flips, control placement flips, and directional elements such as arrows, carousels can break.
We defined alignment and interaction rules per component so regional teams could publish in either direction without a separate design.
Design system for LTL & RTL
The system had to work in both directions
Improving component usability within existing AEM constraints
While the existing AEM structure couldn’t be significantly changed, I simplified the component-building workflow by reorganising button placement and refining configuration options, making the authoring experience more intuitive and efficient for regional editors.
While the existing AEM structure couldn’t be significantly changed,
I simplified the component-building workflow by reorganising
button placement and refining configuration options, making the authoring
experience more intuitive and efficient for regional editors.
AEM working
Improving Component Usability Within Existing AEM Constraints
Process Component
Layout
Title
Carousel
Tab
Text
Image
Table
Button
Accordion
Box
Add component
Content input (image,Title)
Styling options
Option selection
Step 02
Step 01
Popup for Carousel :
Create selected category
Select
component category
Design Development
- Popup button update
- Repositioned with intuitive Save & Close text
?
- Option & Style guide
- Added text guidelines for captions with screen
usage context
- Reference images accessible through guide link.
- Updated Delete & move button
- Relocated from top for easier user access
1
2
3
Option & Style type
1
Image +
Sub title + conetent
3
Caption + Title
2
Step 03
Completed component
For AEM page authoring, build time dropped from
25 minutes to 15 minutes a 40% reduction.
The template launched across 18 markets and laid the groundwork
for expansion into 5 additional European markets.
Italy, the UK, Germany, France and Spain.
Outcome
Because conversion reporting couldn't be attributed directly to the template during
the evaluation period, we measured operational efficiency instead.
As this was an infrastructure project, post-launch conversion data wasn't available.
In future projects, I would define metric access from the outset.
Outcome
Measured through operational efficiency
Because conversion reporting couldn't be attributed directly to the template during the evaluation period, we measured operational efficiency instead.
For AEM page authoring, build time dropped from 25 minutes to 15 minutes — a 40% reduction.
The template launched across 18 markets and laid the groundwork for expansion into 5 additional European markets: Italy, the UK, Germany, France and Spain.
As this was an infrastructure project, post-launch conversion data wasn't available. In future projects, I would define metric access from the outset.