Как мы перезапускали digital-платформу Kia: редизайн, исследования и UX

Рассказываем, как полностью перепридумали российскую версию сайта Kia, превратив его в масштабную диджитал-платформу. Опыт ONY

Три года назад компания обновила корейскую и американскую версии сайтов, после чего в российском представительстве решили полностью пересмотреть и свою digital-платформу. В каждой стране выбирали партнера, который бы разработал новый сайт: удобный и современный. В России тендер на перезапуск сайта выиграли ONY и QSOFT. Мы отвечали за весь UХ и дизайн, а команда QSOFT внедряла технологические решения.

В этой статье рассказываем с чего начинали редизайн, как получилось сделать сайт современным и как это помогло бренду. Также сняли видео в формате case study, где наш ведущий digital-дизайнер и продюсер проекта вспомнили все и поделились историей о том, как проводили исследования, и какие боли пользователей повлияли на проектирование первого релиза сайта в 2020 году.

В каждой стране — уникальная аудитория, свои болевые точки и особенности покупки авто. Например, отличаются работа дилеров, конфигурации моделей, возможности оплаты. Предстояло учесть новые нужды российского офиса, а также объединить информацию и функции с разных лендингов на одном сайте.

Какие задачи нужно было решить ONY:

Дополнительное требование клиента — сделать сайт максимально удобным для двух основных групп посетителей:

1. Людей, которые не разбираются в машинах, хотят посмотреть варианты и прицениться. Задача — впечатлить аудиторию и доступно показать выгоды от покупки именно этой марки.

2. Экспертов, регулярных посетителей сайтов автобрендов, которые хорошо разбираются в деталях, комплектациях, ценах и осведомлены о новинках. Задача — убедить в экспертизе и инновационном подходе Kia.

Перезапуском сайта занималась команда из 10 сотрудников ONY, среди них — продюсер, арт-директор и несколько дизайнеров, в том числе UX. В Kia беспокоились о знании продукта, поэтому всем членам команды, кто не водит или не достаточно погружен в автотематику, предлагали пройти воркшоп.

Первое, с чего стоит начать перезапуск сайта, — это анализ продукта, компании, рынка и аудитории. В теории можно рискнуть и сразу приступить к дизайну сайта. Однако без аналитики, без знания аудитории, ее потребностей и болей невозможно сделать востребованный продукт. Расскажем, что именно нужно узнать перед тем, как приступить к проектированию.

Анализ продукта

Мы проанализировали сайт Kia, метрики, пользовательские запросы, особенности позиционирования и выявили ряд проблем. Во-первых, сайт не выглядел привлекательным для клиента. Вторая проблема — отсутствовал конфигуратор авто — это важная функция, которая помогает собрать автомобиль под себя в необходимой комплектации. В-третьих, функции подбора кредита, сравнения комплектаций и страница спецпредложения оказались непонятными. Из-за перечисленных трудностей большая часть пользователей уходила с сайта. Перед нами стояла задача решить эту проблему.

Анализ компании

В 2019 году Kia была лидером среди иностранных брендов по количеству продаж в нашей стране. На тот момент работало около 200 официальных дилерских центров в 100 российских городах. Бренд предлагает машины под разные нужды: от эконом-варианта до премиум-сегмента, от легковушек до внедорожников. Причем все модели Kia для российского рынка производятся локально. Анализ показал, что качество автомобилей выросло, однако старый сайт не отражал ни высокий рост компании, ни ее технологичность.

Анализ рынка

Автомобильный рынок — своеобразный. Поэтому мы стали изучать, по каким правилам он работает. Анализ рынка нужен, чтобы учесть опыт конкурентов, их преимущества, визуальные решения и доступные сервисы. Мы изучили:

Эта информация помогла продумать позиционирование продукта онлайн: мы решили больше рассказывать о технических особенностях и делать красивый визуал.

Анализ ЦА

Начался этап глубинных интервью с респондентами. Мы опрашивали жителей мегаполисов, регионов и поселков — и не зря: данные исследований столицы и регионов сильно отличались. Выборка состояла как из лояльных, так и нелояльных потребителей к бренду Kia, за счет чего удалось получить объективное мнение.

После опроса мы выделили три основные роли на сайте:

Мы изучили потребности пользователей, их паттерны и боли, с которыми они сталкиваются во время выбора авто. Интервью также принесли множество положительных и отрицательных инсайтов. Все это помогло сформировать пользовательские пути и функциональность будущего сайта.

Помимо пользователей мы интервьюировали продуктовых менеджеров Kia. От них мы узнали, что у каждой модели Kia есть своя аудитория. Например, полуспортивный Stinger в России покупают любители автотюнинга и гонок. Они создают группы в соцсетях, где показывают прокачанные автомобили. Что это значит для нас? На продающей странице Stinger важно рассказать про стиль и скорость. А модель Rio — самая народная: на нее часто пересаживаются бывшие владельцы Лады. К тому же, только в России у этой модели есть теплые опции для холодных зим. Поэтому на странице Rio нужен акцент на демократичной цене и универсальности.

Мы учли потребности представителей различных целевых групп. Обработав инсайты с исследований, приступили к проектированию пользовательских путей, а потом сделали прототипы сайта и протестировали их на пользователях.

Некоторые комментарии респондентов заложили в основу новой функциональности. К примеру, в одной семье могут быть два абсолютно одинаковых автомобиля Kia. Чтобы у супругов не возникло сложностей с записью на сервис на новом сайте, мы придумали дать возможность пользователям указывать «кличку» машины. Кажется, это мелочь, но именно благодаря небольшим улучшениям мы увидели довольные лица пользователей на следующих опросах.

Мы спроектировали около сотни сценариев взаимодействия пользователя с сайтом и снова пошли в аналитику: показывали прототипы и спрашивали мнение респондентов. Исследования помогли нам протестировать гипотезы и понять, какие изменения стоит внести в дизайн, чтобы путь пользователя стал удобнее.

Вынесли в шапку сайта самые востребованные продукты Kia

У сайта Kia многоуровневая структура. Мы разработали новый подход к группировке информации и выстроили удобную навигацию для десктопной и мобильной версий. Чтобы не смешивать разделы для пользователей, мы сделали левую часть меню для покупателей, правую — для автовладельцев. Сайт изучают зигзагообразно, слева направо. Поэтому слева оказался раздел для потенциальных покупателей: это приоритетнее.

Пересобрали разделы в верхнем уровне

Основным инсайтом для новой навигации стало то, что у Kia есть три целевые аудитории, и необходимо учесть и проработать потребности каждой из них. Поэтому на верхний уровень вышли разделы:

Сделали блок с новостями на главной

Главная страница — точка входа для всех целевых групп: владельцев авто, будущих клиентов, потенциальных дилеров и СМИ. Поэтому мы поставили блок с новостями компании для журналистов.

Добавили в меню разделы авто в наличии и с пробегом

Была мысль сделать единый раздел по типу классического интернет-магазина: листинг машин, карточка авто, подробная фильтрация, включающая свойство «с пробегом». Однако у машин с пробегом Kia много особенностей: собственная программа, свойства, рекламный трафик и база данных. Так получились два раздела: авто в наличии и с пробегом.

Сделали бесшовным серфинг по разделам сайта

Серфинг по разделам теперь приводит к действию: расчёт и сохранение кредита, заявка в дилерский центр, конфигурация авто или скачивание брошюры.

Разбили на шаги сценарии, для которых требуется восприятие большого количества контента

Если выдавать простые действия порционно, пользователю проще проходить сложные и длинные сценарии. Так поступили с конфигуратором и разделом трейд ин.

Добавили конфигуратор — раздел сайта, где можно собрать комплектацию авто

Раньше конфигуратора не существовало. Выбор конфигурации — сложный сценарий: нужно определиться с движком, коробкой, приводом, цветом и отделкой. У некоторых авто количество конфигураций превышало десяток, а выбор одного параметра влиял на другие. Конфигуратор разбили на шаги, чтобы пользователь мог вернуться на шаг назад. Плюс всегда видно, как параметр влияет на цену авто.

Адаптировали сайт под мобильные устройства

Почти 60% трафика приходит с мобильных устройств. Все принципы навигации десктопа, фото- и видеоконтент адаптировали под большинство мобильных девайсов.

Кредитный калькулятор

Исследования с пользователями показали, что им приходится тратить много времени на то, чтобы изучить спецпредложения и понять, какой кредит им подходит. Поэтому мы изменили сценарий расчета кредита. Теперь данные выдаются порционно на каждом шаге, не перегружая внимание пользователя. Мы вынесли выбор спецпредложений на отдельный шаг и сделали текст спецпредложений максимально понятным. Получился удобный интерактивный калькулятор.

Страница обзора модели

Этот раздел включает подробную информацию об авто: от основных фишек до цен. Главная задача страницы обзора — показать каждую модель во всей красе через характер и стиль.

Проблема: Раньше для каждого авто создавалась простая информационная страница и отдельный лендинг, а на основном сайте все модели выглядели одинаково. Делать индивидуальную верстку для каждой модели долго и дорого, к тому же в течение года модели обновляются.

Решение: Мы построили страницу обзора по принципу конструктора. Для разных моделей можно менять порядок блоков и их цвет в зависимости от характера авто. Для обзорных страниц создали новый контент: фотосессии интерьера для просмотра в 360 и 3D-визуализации.

Сложной задачей стала таблица комплектаций и цен на одноименной странице. Например, у модели Sportage 24 комплектации. Чтобы пользователь мог сравнить их, мы сделали фильтр и горизонтальную прокрутку заголовков комплектаций. Данные в таблице скроллятся вместе с заголовками так, что видно: к какой комплектации какие характеристики относятся.

Пришлось повозиться и с форматом прайс-листов. Это пдф-документы с ценами и комплектациями модели. Его часто печатают в дилерских центрах и отдают клиентам на руки.

Большинство примеров прайс-листов конкурентов были сложными и с невероятно мелким шрифтом. Плюс, нужно было следить за количеством листов бумаги, чтобы клиент не уходил с кипой из дилерского центра.

Сначала мы решили что у каждой комплектации будет свой лист с перечнем функций. Это позволяло использовать комфортный для чтения шрифт. Листы можно выложить на стол и сравнить параметры авто. Это работало для моделей с 2-3 комплектациями. Но не для модели Sportage, где было более 20-листов.

Тогда мы изменили шрифт и перекомпоновали макеты так, чтобы появилась сравнительная таблица: 20 листов сократились до 3-х.

С момента перезапуска диджитал-платформы Kia количество заявок на тест-драйв и запросов на покупку авто у дилеров увеличилось в 2 раза. Также на 25% уменьшилось количество отказов от взаимодействия с различными формами на сайте. Это хороший результат, клиент доволен проделанной работой, но на этом сотрудничество не закончилось.

Сейчас мы продолжаем работать с Kia и развивать платформу: внедрили новый визуальный стиль после глобального ребрендинга Kia в 2021 году, улучшили UX-решения на основе исследований, разработали возможность онлайн-покупки, работаем над несколькими внутренними инструментами Kia для взаимодействия с медиапартнёрами. Также за это время мы запустили дилерскую платформу, благодаря чему сотни дилеров Kia в России и СНГ смогли быстро обновить свои сайты.

В следующей статье мы подробно расскажем о том, какие конкретно UX-исследования проводили для Kia и как улучшили UX самых популярных блоков на сайте, которые прямо влияют на бизнес-показатели: конфигуратор, расчёт кредита, трейд-ин, авто в наличии, комплектации и цены авто.

Посмотреть кейс первой версии сайта можно здесь. Проект получил 1 место в номинации ‎«‎Лучший сайт для авто- и мотобизнеса» на премии Tagline Awards, серебро за User Experience и бронзу за User Interface в конкурсе Mixx Russia.

Если у вас есть digital-задачи, которые нужно решить в кратчайшие сроки — давайте обсудим.

Еще больше кейсов, подкастов от нашей команды и новостей дизайн-индустрии — в нашем Telegram-канале. Подписывайтесь!