Financial ServicesHyundai Card

The Convergence of Mobility Innovation and Digital Payments

Dark Mode
In-Car Payment
Localization
Mobile Service

Pain Points

The languages, devices and payment methods of 44 countries and 24 languages had to come together in one payment experience.

Strengthening Mobility Service Competitiveness in Europe

By providing an efficient payment process across 44 European countries, we aimed to raise user satisfaction with a safe and convenient experience of paying directly from the car, and to deliver a consistent experience to global users with multilingual support for each country. The service is provided through the CCS (Connected Car Service) app, where users connect their linked car to use it, experiencing seamless integration between smartphone and vehicle and a more unified service.

Core features of the integrated payment system include support for local payment methods, payment processing for one-time products and subscriptions, and payment history. Key features of in-car payment (ICP) include a payment interface through the linked car’s infotainment system, and payment processing and history for services paid with a card registered in the integrated payment system.

The project serves 44 European countries and strengthened the localization strategy with multilingual support. By building an integrated payment system for subscriptions and one-time products and improving safety and convenience with in-car payment, it aimed to strengthen the competitiveness of mobility services in the European market.

Hyundai Card In-Car Payment Mobile Service — Collection of payment screen mockups

Strategic Lens

We designed a seamless payment journey from sign-up to checkout.

Building a Seamless, User-Centered Digital Experience

Intuitive Parking Information

We systematically defined the common elements of the parking service from the user’s point of view. To show parking status and remaining time accurately, we carefully considered time and unit notation, planning even how remaining time is shown when less than a minute is left so users can understand it intuitively.

Hyundai Card In-Car Payment Mobile Service — Hand holding a smartphone payment screen

An Efficient Sign-Up and Card Registration Process

To make the new service more accessible, we designed a seamless sign-up process covering terms, vehicle registration and card registration. Allowing sign-up with service providers at the same time made it more convenient, and we also planned pages for handling exceptions. We clearly indicated which card brands can be registered, and carefully planned and reviewed the pop-up messages and notices shown during card registration so users can decide easily when adding a card.

Hyundai Card In-Car Payment Mobile Service — Screen flow chart and designed screens

Optimizing the Main Screen and Checkout for Key Information and Intuitiveness

On the main screen, we considered the order in which cards appear so the most important information comes first, and clearly defined the scope and hierarchy of displayed information so users can quickly find what they need.

In checkout, with the business side in mind, we precisely defined the free-trial notice for subscriptions on the payment page and designed the flow to clearly show users their previous payment when a payment is canceled.

Creative Approach

With use while driving in mind, we designed a dark mode based on the brand guide.

Design for a Consistent Experience for Global Users

Dark Mode Based on the Brand Design Guide

Because in-car payment is often used while driving, for parking, fuel and food orders, visual comfort is crucial. Dark mode reduces the glare of bright screens, easing eye strain and helping users stay focused. Designed with appropriate contrast, it also blends with the surroundings at night or in dark parking lots, letting users use the service comfortably without disturbing their view. In short, offering dark mode improves usability and comfort, contributing to brand loyalty and a better user experience.

Hyundai Card In-Car Payment Mobile Service — Collection of dark-mode mobile screens

Delivered Experience

From 280px mobile screens to PC, the same payment experience in 24 languages.

Resolution Optimization for Various Devices

By designing for resolutions down to 280px, we aimed to provide an optimal interface on any device. Responsive design provides a consistent UI, keeping the experience uninterrupted and consistent.

Hyundai Card In-Car Payment Mobile Service — Vehicle display and mobile payment screens

Hyundai Card In-Car Payment Mobile Service — Payment screen on a foldable phone

Hyundai Card In-Car Payment Mobile Service — Two mobile order history screens

Support for 24 Languages

Because the service supports 24 languages, we designed flexible layouts unaffected by sentence length, and used icons and images that do not depend heavily on language so users can easily understand features even without text.

Five in-car payment app screens: card management, payment method selection and parking reservation

Client

Making payment inside the car simple, safe and consistent across 44 European countries.

Project Information

Industry: Financial Services
Project Type: New Build
Role: UX Planning, UI Design

Client: Hyundai Card
Client Introduction: Founded in 2001, Hyundai Card is one of Korea’s leading credit card issuers. As an affiliate of Hyundai Motor Group, it offers customers a wide range of benefits through innovative financial services, and it stands out in digital finance, particularly in mobile payments and data-driven services.

With advances in digital technology, the car is evolving from a means of transportation into a platform for many kinds of experiences. In-car payment services spreading across Europe make paying for parking, fuel and food orders from inside the car easy, meeting consumer expectations and becoming an important factor in strengthening brand loyalty and the user experience. They point the way for the future of the mobility industry and are becoming a new standard in the digital age.

The service is an in-car payment service provided by Hyundai Card, a Hyundai Motor Group affiliate. Users link their car to the CCS (Connected Car Service) app and can use it in 44 European countries.

Case Intelligence Summary

Pain Points

The languages, devices and payment methods of 44 countries and 24 languages had to come together in one payment experience.

Hyundai Card In-Car Payment is a mobile service: drivers link their car in the CCS (Connected Car Service) app and use its digital wallet to pay for parking, fuel and food orders. Because it runs in 44 European countries, 24 languages, many devices and each country's local payment methods had to become one experience. One-time purchases, subscriptions and payment history all had to be handled in a single flow. Above all, since it is used while driving or right after parking, information that reads at a glance and visual comfort mattered most.

Strategic Lens

We designed a seamless payment journey from sign-up to checkout.

We designed a seamless payment journey from sign-up to checkout. Terms, vehicle registration and card registration were combined into one flow with service-provider sign-up happening at the same time, and we carefully planned pages for exception cases, guidance on accepted card brands, and the pop-ups and notices shown when adding a card. The main screen orders cards and defines the scope and hierarchy of information so the most important comes first. For parking, we even defined how remaining time is shown under one minute, and at checkout we made free-trial notices for subscriptions and information about previous payments on cancellation clear.

Creative Approach

With use while driving in mind, we designed a dark mode based on the brand guide.

Because the service is often used while driving — for parking, fuel and food orders — we designed a dark mode based on the brand design guide for visual comfort. It reduces the glare of bright screens, easing eye strain and helping drivers stay focused. Contrast was tuned carefully so that at night or in dark parking lots the interface blends with its surroundings and never obstructs the driver's view. We saw a comfortable experience as the path to better usability and brand loyalty.

Delivered Experience

From 280px mobile screens to PC, the same payment experience in 24 languages.

The design delivers the same payment experience responsively from 280px mobile screens to PC, keeping a consistent UI on any device. With 24 languages supported, we built flexible layouts that hold up regardless of sentence length. Icons and images that rely little on language let users understand features without reading the text. The result is a consistent, safe mobility payment experience that works the same way for drivers in any European country.

Start designing consistent digital experiences for your global audience with Saltcake!

Contact