Automotive & MobilityHMC

CX for you, UX for all: Hyundai.com Global Website Renewal

AEM
Global Website
Mobile First
Narrative Engagement

Pain Points

A six-year-old global template could not capture the changes in customers brought by electrification, SDVs and the pandemic.

The Hyundai Motor Company Global Website Redesign, in Collaboration with Saltcake

In 2021, Hyundai Motor Group grew into one of the world’s top four automakers, producing 6.68 million vehicles a year.1) This was the expected reward for its efforts in product development, marketing and branding to expand into global markets.

During this period, however, Hyundai Motor Company faced many challenges in the auto market: new mobility innovations such as autonomous driving and the SDV (Software Defined Vehicle), the shift to electrification represented by BEVs (Battery Electric Vehicles), and rapid changes in customers’ digital experience (CXD) brought by COVID-19.

Figure: countries covered by the Hyundai.com global website — 28 websites in 19 countries

Figure: Countries covered by the Hyundai.com global website: 28 websites in 19 countries

Hyundai Motor Company runs Hyundai.com in each country for its overseas customers. High-volume markets such as the US, the EU, Russia and China can build and run their own websites, while other countries run Hyundai.com using one global website template.

Six years after its last redesign, the aging global website template began to be planned for a complete overhaul in 2020, and the redesign project got fully under way in 2021.

To accommodate diverse market environments and requirements on one standardized global platform, Saltcake handled almost every area except development, from CX strategy and UX design to GUI design and back-end system planning, working closely with Hyundai Motor Company to shape the future customer experience of Hyundai.com.

Hyundai Motor Company, Communicating with Global Customers

The first things we did at the start of the project were to collect internal interviews by country and analyze gaps against competitors, objectively evaluating Hyundai.com’s CX/UX level, understanding what dealers and customers expect, and understanding Hyundai Motor Company’s next-generation business. Considering the changes in customer experience patterns expected after COVID-19 was, of course, also important.

01. The Pandemic and the Digital Experience

Hyundai.com Global Website — 80% — prefer both online and offline services for purchase and support

Hyundai.com Global Website — 20% — growing share of consumers buying cars online

Hyundai.com Global Website — 25% — online buyers less likely to buy offline in future

Figure: 2020 car buyer trends — J.D. Power, Capgemini

Figure: 2020 vehicle purchase consumer trends (J.D. Power, Capgemini)

Because of the pandemic, customers came to see private vehicles as safer, raising purchase intent, while chances to visit stores in person were limited. In an omnichannel customer journey where online purchase research leads to offline stores, the digital experience’s influence on purchase conversion grew even greater, prompting competitors and Hyundai Motor Company alike to actively introduce low-touch interaction services.

Accordingly, we focused on designing services directly involved in purchase conversion with technologies such as VR, video chat and 3D view, so they could spread as global services.

02. Requirements and Challenges

Figure: challenges of the Hyundai.com global website renewal

Figure: Challenges for the Hyundai.com global website redesign

Customer Interaction & Online Service Optimization

— Requirements and methods: customer interviews and surveys (a survey of website operators and dealers in 18 markets, interviews in the pilot country, Saudi Arabia), benchmarking and gap analysis (competitor analysis of 27 automotive brands, best-practice analysis of 18 B2C brands) / Challenges: improving live consultation and support for a better customer support experience, optimizing how customer feedback is collected and handled, implementing a user-friendly online shopping process, and building community to increase engagement and collect feedback

Sales & Marketing Innovation

— Requirements and methods: market analysis (consumer perceptions of EVs and sales point analysis, research into zero-contact service cases), data analysis and insights (GA statistics by country) / Challenges: implementing personalized marketing and tailored sales strategies, and strategic selling techniques and cross-selling to increase revenue

Content & Product Information

— Requirements and methods: user behavior analysis (use of shopping tools and product details, factors in vehicle purchase decisions), SEO analysis (inbound keywords by country), UX writing analysis (key messages, features and content tone, storytelling structure) / Challenges: a content management strategy that improves access to and understanding of information, storytelling and information that highlight product features and benefits, stronger information on sustainable products and electric vehicles (EVs), and tailored content for a personalized user experience

Technology & Design Optimization

— Requirements and methods: technology benchmarking (video chat, car configuration and interactive UI cases), research into outstanding design cases (immersive content design, graphic user interfaces) / Challenges: design consistency that reflects the brand identity, and UI improvements optimized for mobile use

From the data analyzed by Saltcake’s CX/UX consultants and UX designers and the data secured by Hyundai Motor Company, we set 12 challenges for the front end.

Strategic Lens

“One’s CX, Everyone’s UX” became the standard for all our work.

One’s CX, Everyone’s UX

To solve these diverse challenges, we set “One’s CX, Everyone’s UX,” standing for tailored CX and consistent UX, as the core goal of the project. It is a very natural goal, but to achieve this fundamental aim, we constantly evaluated whether every piece of work throughout the project met it.

One’s CX, Everyone’s UX

From customer behavior and marketing perspectives, we defined four criteria that affect the types of customers who meet Hyundai.

• Personal characteristics and lifestyle: age and life stage, purchase motivation, environmental awareness, interest in technology, access to charging infrastructure

Brand perception

Brand awareness, loyalty, likelihood of switching brands, level of interest in the brand

Purchase-related factors

Purchase budget, price sensitivity, replacement cycle, purchase size

Service and experience

Past service experience and satisfaction, intention to buy more

These segment criteria help build a comprehensive understanding of customers’ needs and preferences, on which tailored customer services can be provided. For example, customers who are price-sensitive and have strong environmental awareness and technical interest in Hyundai’s EV brand could be classified as likely to consider an EV. For them, comparing the running costs of electric and combustion engine cars and presenting various EV purchase incentives can lead to conversion.

Hyundai.com’s tailored customer journey consists of distinct stages, each with different services and content, so customer-centered services can be provided organically across the entire website.

Creative Approach

Mobile First and Narrative Engagement guided the screen design.

Hyundai Motor Company’s UX Strategy: Designing a Conversation with Customers

After defining the content and services needed by each customer segment at each stage of the CXJ, we drew insight and inspiration on which UX designs could maximize the customer experience through competitor analysis and best practices from other business domains. We also designed the optimal UX considering requirements by country, the state of legacy systems, scalability and the characteristics of AEM (Adobe Experience Manager). Several UX design features stood out in this project.

01. Mobile First UX

For websites aiming to be responsive, UX design is often done on PC for convenience, with mobile UI wireframes added for situations that branch on mobile. This may produce a responsive website on the surface, but it can cause several problems.

Consistent experience

UI elements on PC often appear completely differently on mobile. On mobile, where vertical layouts take priority over horizontal ones, this can cause ongoing inconvenience for users.

Accessibility

Content that does not fit the mobile screen can make users miss important features or find them hard to use, for example buttons too small to tap or text too dense to read.

SEO optimization

Because Google uses mobile-first indexing, the mobile user experience greatly affects search engine results.

Designing the UX from a mobile perspective from the start lets these problems be identified naturally and addressed in advance.

02. Narrative Engagement

The most important theme in the UX design direction of each screen was a “Narrative Engagement Strategy,” leading customers to gradually take interest in Hyundai Motor Company’s story and form a positive relationship. This requires a seamless UX in which the storytelling flows naturally to deepen immersion, services and content are easy to reach, and user paths lead to purchase.

The Narrative Engagement Strategy shows clearly in the “customer-journey-centered content structure” and “brand messages centered on customer benefits.”

First, the customer-journey-centered content structure is the core UX design direction on every page, comprehensively considering the purpose of customers visiting the page, their preferred services and content, and the connection to the next stage of the journey.

Figure: customer-journey-centred content structure of the product detail page

Figure: Customer-journey-centered content structure of the product detail page

For brand messages centered on customer benefits, we also renewed the UX writing and product image strategy.

Figure: UX writing centred on customer benefits

Figure: UX writing centered on customer benefits

Figure: product imagery centred on customer benefits

Figure: Product images centered on customer benefits

Delivered Experience

We completed a global UX supporting multiple languages and RTL, based on AEM components.

Innovation in the Details: Hyundai Motor Company’s UX Design

The Hyundai.com global website had to express Hyundai Motor Company’s brand identity at the highest level. To this end, we carried out UX design in close collaboration with the client while strictly following the brand communication guide. Based on the Adobe Experience Manager (AEM) platform, we componentized the UX design so many administrators in different countries can run the website easily, increasing reusability and customer immersion.

The overall UX design was optimized for the purpose of each page or UI and implemented with support for RTL (right to left), multiple languages and the selective inclusion of services and content by country. This approach lets the Hyundai.com global website respond flexibly to the needs of diverse markets.

01. Start Page

Hyundai.com has several Start Pages, known as the home and sub-homes. They help customers quickly grasp the overall services and content and move easily to the page they want. Including frequently used services for each customer, user-friendly explanations, search and promotions, these pages maximize the convenience of using the site.

Hyundai.com Global Website — Elantra N vehicle introduction screen

02. Simulation

For vehicle purchases, Hyundai.com goes beyond simple text and images with interactive “Car Configuration” and “Simulate Charging & Range” features, letting users experience various purchase scenarios themselves. Customers can calculate vehicle options and the potential benefits of eco-friendly vehicles in real time.

Hyundai.com Global Website — Charging and range simulation screen

03. Request

Hyundai.com serves as a communication hub with customers by offering inquiry services such as “Book a Test Drive,” “Request a Quote” and “Book a Service.” These services help users understand and use them intuitively, and a consistent UX design raises usability and improves conversion.

This UX design direction focuses on strengthening Hyundai.com’s brand identity and providing the same optimized experience to users worldwide.

Hyundai.com Global Website — Test drive request screen and mobile screen

04. Customized Service

Customers find it hard to remember the many options they consider even for the same model, so they want to save several decision scenarios. They also want to see Hyundai services and their history in one place, such as quotes, test drive bookings, service bookings and one-to-one inquiries. “My Hyundai” manages all of this.

Hyundai.com Global Website — My page screen

05. Navigation System

GNB

Instead of putting the entire menu system in the GNB, we chose to always show the menus for “exploration,” the first stage of the customer journey when visiting the Hyundai website. Customers who want to explore cars see all vehicles through “Cars,” those interested in EVs see the “Eco-friendly Cars” menu, and Hyundai owners see the “Support” menu, for an efficient customer journey.

Footer

The footer also offers menus segmented for customers new to the Hyundai brand, those considering an EV and Hyundai owners.

Hyundai.com Global Website — Dark-theme mobile menu screen

06. Accessibility & Convenience

To raise purchase conversion, the Hyundai global website offers a “Shop” sticky UI gathering purchase-related menus at the top of product detail pages, a floating UI at the bottom of every page for access to Live Chat, Live Showroom and more, and a “Compare” menu for comparing products.

Hyundai.com Global Website — Purchase menu and IONIQ 5 N mobile screens

Saltcake, Your Global Partner

The Hyundai.com global website redesign was the perfect project to show the strengths of Saltcake’s experience consulting and human-centered design. Requiring CX and UX standardization across many countries, it was an opportunity to further elevate our capabilities. Saltcake will continue to serve as a consulting company that helps Korean companies succeed in overseas markets.

People crossing a zebra crossing, seen from above

Client

One's CX, everyone's UX — a global template for 28 Hyundai websites in 19 countries.

Project Information

Industry: Automotive & Mobility
Project Type: Renewal
Role: CX Strategy, UX Planning, UX/UI Design, Development

Client: HMC
Client Introduction: Founded in 1967, Hyundai Motor Company is Korea’s leading automaker. Having introduced the world’s first mass-produced hydrogen vehicle and the premium brand Genesis, it leads future mobility with autonomous driving and connectivity technologies. Under its vision of “Progress for Humanity,” it explores how technological progress can serve people’s lives.

The Hyundai Motor Company global website redesign project began to completely renew the customer experience in step with changes in global markets. By gathering specific requirements from around the world and driving user-centered design with the latest digital tools, it aims to strengthen Hyundai Motor Company’s brand image and market leadership.

Case Intelligence Summary

Pain Points

A six-year-old global template could not capture the changes in customers brought by electrification, SDVs and the pandemic.

By 2021 Hyundai Motor Group had grown into one of the world's top four automakers, producing 6.68 million vehicles a year, yet it faced new-mobility innovation like autonomous driving and SDV, electrification led by BEVs, and a sharp shift in customers' digital experience due to COVID-19 all at once. High-volume countries such as the US, EU, Russia and China ran their own sites, while the rest operated Hyundai.com on a single global template. Six years after its last renewal, that template had aged, and a full renewal was planned from 2020. After the pandemic, fewer store visits and the growing influence of online research on purchases raised the need for low-touch services. The challenge was to fit the differing needs of 28 websites in 19 countries into one standard platform.

Strategic Lens

“One’s CX, Everyone’s UX” became the standard for all our work.

Handling nearly every area except development — CX strategy, UX design, GUI design and back-end planning — we first diagnosed Hyundai.com's CX/UX level and what dealers and customers expected through internal interviews by country and a competitor gap analysis. Surveys of operators and dealers in 18 markets, user-behavior and SEO analysis and technology benchmarking produced 12 front-end challenges. To solve them we made “One's CX, Everyone's UX” — tailored CX with a consistent UX — the core goal, and kept testing every piece of work against it. Customer segments were defined by four criteria: personal traits and lifestyle, brand perception, purchase-related factors, and service and experience. For example, customers who are price-sensitive, eco-minded and interested in EVs are shown running-cost comparisons and EV incentives — services tailored to each stage of the journey.

Creative Approach

Mobile First and Narrative Engagement guided the screen design.

After defining the content and services each segment needs at every stage, we drew insight from competitors and best practices in other industries and designed the UX around country requirements, legacy systems, scalability and the characteristics of AEM. The first principle was Mobile First: designing on PC and patching mobile later breaks consistency, hurts the accessibility of buttons and text, and weakens SEO in an era of mobile-first indexing, so we designed from the mobile perspective from the start. The second was Narrative Engagement — natural storytelling and seamless paths that gradually draw customers into Hyundai's story and toward a positive relationship. This took shape in a journey-led content structure that considers why visitors come and where they go next, and in benefit-focused UX writing and a new product imagery strategy.

Delivered Experience

We completed a global UX supporting multiple languages and RTL, based on AEM components.

Following the brand communication guide closely, we componentized the UX design on the AEM platform so administrators in many countries can run their sites easily, boosting reuse and immersion. The build supports right-to-left scripts and multiple languages and lets each country include services and content selectively. We designed Start Pages with frequently used services, search and promotions; car configuration and charging-and-range simulations that let customers calculate options and the benefits of eco-friendly cars; and request services such as test-drive, quote and service booking. We added My Hyundai for viewing quotes and bookings in one place, a GNB that always shows the 'explore' stage with footers by customer type, a Shop sticky UI for purchase menus, a floating UI to Live Chat and Live Showroom, and a Compare menu. Together these make 28 sites move as one brand experience.

Facing a similar challenge?

Contact