Kia is the world's largest automaker. In 2019, the company updated the Korean and American versions of its sites, after which the Russian representative office decided to completely revise its digital platform as well. Kia contacted us to think through the entire UI and UX design of the new site. The global challenge was to make choosing and purchasing a vehicle as easy as any day-to-day shopping online.
We conducted qualitative audience research and competitive analysis of fifteen automakers. Then we suggested completely changing the logic and structure of the previous version of the site and building a new one based on the principles of content personalization. The main idea was to turn the site into a convenient turn-by-turn navigator for answering the needs of three types of the audience at once: those who are just exploring the model range, those who want to buy a car, and Kia owners themselves.
While developing the purchasing section, we encountered a truly enormous amount of configurations. Some Kia models have more than twenty of them. To prevent the user from getting confused, we created a convenient step-by-step configurator with various parameters that determine the choice of one or another configuration. Unsuitable options are not hidden completely but are collected in a separate group and remain available — you can return to them if there are not enough relevant results in the main search.
The decision to buy a car is often made based on which showroom provided the more favorable credit terms. Using this insight, we have developed a loan calculator, which will help the user to form an individual request, see possible discounts and subsidies, find out the amount of additional payment and monthly payment, add insurance and other services. You can apply for a loan online without an unnecessary visit to a bank office.
The visual style is influenced by the design system of Kia's global website, which gave us a lot of freedom. We didn't try to make a minimum of pages with a lot of information but rather left enough air and space on each one. There are no unnecessary decorations or unjustified elements that could distract the user's attention from the main thing, which is the Kia model range.
An important decision was the creation of a modular system and webpage builder, using which Kia's team can freely scale the site and add new pages on their own. We developed a set of ready-made blocks: text, interface, and full-screen images. By linking them together, you can get any page you want and keep the logic of simplicity and convenience we've laid out.
We developed about four hundred layouts (web and mobile versions). Most pages include micro-animation, which adds pleasant interactivity to the interaction experience. To make it easier for the client to maintain a consistent visual style of the site, in addition to the builder we prepared a detailed UI kit, which painted all the possible types of colors, icons, and solutions for text layout.
In 2020, Kia completely revamped its visual style. As we handed over materials from HQ, we decided to do a big UX audit in parallel with the visual update of the site. Analyzed the data we got and made UX changes.
The introductory block on the home page has been adjusted to an international likeness. In the line of Kia models, each has its own background, which reflects the character of the model.
The teaser page is strictly informative, with mostly visual updates.
We experimented a lot with the model page. We made motion approaches linked to the scroll, but practice has shown that it looks too different on different screens. So, we focused on creating a diverse and stylish layout. With lots of interesting information, statistics, and comparisons.
To update the configurator, 10 UX interviews were conducted and analyzed. This was followed by a document describing the changes that would significantly improve the user experience. About a hundred changes were implemented and in-depth copywriting work was done. Subsequent tests showed that it was much easier for the user to navigate in the configurator.
