Нильсон Авто
Нильсон Авто — бренд по подбору запчастей, ремонту дизельных и грузовых автомобилей. Основной фокус — японские, корейские и китайские грузовики, автобусы и спецтехника, а также дизельные топливные системы
Целевая аудитория
Мужчины — 89%, женщины — 11%, средний доход
Статус проекта
Зарелизили сайт, чекаут на этапе разработки. Следить можно по ссылке
Моя роль
Была ведущим дизайнером на проекте, работала вместе с тремя клиентами бренда, проект менеджером и дизайн-лидом. Также устраивали созвоны с другими дизайнерами, разработчиками в команде. Ревьюила задачи дизайнеров младше
Что делала на проекте
Спроектировала и отдала в разработку: главную страницу, навигацию и поиск, корзину, checkout
и страницу подтверждения заказа
Задача
Спроектировать новый процесс оформления заказа
Откуда взялась задача
После завершения работы над главной страницей и навигацией, клиент обратился с новой задачей — переработать текущий процесс оформления заказа. Существующий чекаут вызывал затруднения у пользователей и не соответствовал ни UX-стандартам, ни бизнес-целям: были выявлены ошибки в логике, низкая конверсия на этапе оформления и перегруженные формы.
Как решала задачу
Работа велась итерационно. На каждом этапе я согласовывала решения с дизайн-лидом, получала фидбэк и дорабатывала. После этого показывала результат клиенту. Регулярно созванивалась с заказчиками, чтобы избежать недопониманий и учесть все нюансы.
Discovery (исследование)
Есть три склада для отгрузки — два в Омске и один в Москве. Цена товара зависит от выбранного склада, а доставка с каждого рассчитывается отдельно. Перемещение товара между омскими складами занимает время.
Анализ текущего решения
Для понимания проблем чекаута провела звонок с клиентами и аналитиком бренда. Во время разговора выяснила основные сложности, выявленные через анализ кликов, тепловые карты, обращения в поддержку и опросы клиентов.
Проблем было много, ниже я перечислю только некоторые из них.
пользователь не всегда уверен, что выбирает нужную запчасть
юридическим лицам приходится вручную заполнять все реквизиты компании
Отчеты Baymard Institute/Nielsen Norman Group
Изучила отчеты Baymard Institute и Nielsen Norman Group, чтобы понять лучшие практики проектирования чекаутов и глубже разобраться в проблемах текущего сайта.
Ключевые выводы
Автозаполнение данных снижает нагрузку и уменьшает ошибки, если при этом пользователю легко внести правки.
Важно не столько количество шагов, сколько воспринимаемое усилие при оформлении заказа.
Пользователи часто ищут подтверждение сложной информации — важно обеспечить лёгкий доступ к контактам поддержки, так как её отсутствие вызывает раздражение и снижает доверие.
Define (анализ)
Основные проблемы
Пользователь сомневается в правильности выбора запчасти.
Отсутствие инструментов для точного подбора повышает риск ошибки при покупке.
Юридические лица вручную заполняют все реквизиты компании.
Это удлиняет процесс оформления и увеличивает вероятность ошибок.
Формирование гипотез и проверка
Гипотеза 1
Если на странице товара разместить баннер с призывом позвонить менеджеру для уточнения совместимости запчасти, то это снизит уровень неопределённости у пользователя и увеличит доверие к покупке.
Проверка
Запустили кастомный эксперимент на реальном сайте с добавлением текстового баннера
в область чекаута.
CTR баннера достиг 12%, а количество звонков по товарам из тестовой выборки выросло на 27%.
Вывод
Гипотеза подтверждена. Даже простое текстовое решение мотивирует пользователей уточнять детали — особенно важно для тех, кто не может точно определить нужную деталь самостоятельно.
Гипотеза 1.2
Если добавить функциональность подбора запчастей по VIN-номеру или по параметрам автомобиля, то это поможет пользователю быстрее и увереннее находить подходящие детали, что снизит количество ошибок и возвратов.
Проверка
Мы не проводили отдельную проверку этой гипотезы, так как механика подбора запчастей по VIN-номеру или по параметрам автомобиля — это устоявшийся и широко используемый паттерн в e-commerce автотоваров. Пользователи уже ожидают, что смогут искать детали по VIN или характеристикам авто, и воспринимают этот функционал как базовый.
Я опирались на конкурентный анализ: все крупные игроки рынка (Exist, Автопитер, Emex, Автодепо) реализуют VIN-поиск как стандарт.
Гипотеза 3
Если внедрить автоматическое заполнение реквизитов компании по ИНН (с помощью интеграции с открытыми базами данных), то это упростит процесс оформления заказов для юрлиц, сократит время заполнения и снизит риск ошибок.
Проверка
Мы не проверяли эту гипотезу отдельно, так как автозаполнение по ИНН — это стандартная практика в B2B-интерфейсах, особенно при оформлении заказов от юридических лиц. Этот паттерн широко применяется и давно стал частью пользовательских ожиданий.
Мы ориентировались на best practices и конкурентный анализ: большинство платформ, работающих с юрлицами (например, СБИС, Контур, B2B-сервисы маркетплейсов и т.д.), уже реализуют эту механику.
Главный фокус был не на проверке гипотезы, а на качественной реализации интеграции —
с валидацией, автоподстановкой и сохранением данных в профиле.
User Flow
Для решения всех проблем, необходимо было сделать User Flow, чтобы понять какие пути могут быть у пользователя. User Flow делала я самостоятельно, если у меня возникали вопросы
я обращалась к лиду, либо к менеджеру. Есть три основных пути пользователя:
Заказ товаров с одного склада
Заказ товаров с разных складов
Доставка товаров разными способами для жителей Омска и Москвы
Design (проектирование)
Создание wireframes
Функциональный подбор запчастей по VIN-номеру или по параметрам автомобиля
Баннер с призывом позвонить менеджеру для уточнения совместимости запчасти
Автоматическое заполнение реквизитов компании по ИНН
Обсуждение решений
После презентации клиенту проект прошёл несколько итераций — это была самая крупная
и длительная задача, в которой я участвовала. Мы активно общались с клиентами — переписывались и созванивались, чтобы обсудить и доработать предложенные решения.
Дизайн страниц
После создания wireframes я приступила к UI-части. UI Kit проекта уже был готов — часть элементов я взяла из него, часть добавила самостоятельно.
Функциональный подбор запчастей
Ниже на экране изображены решения данной проблемы. Я решила, что не стоит делать это поля обязательными, потому что чекаут и так длинный. Дополнительные поля лишь застопорят процесс. Вместо этого я добавила пояснение для чего нужна дополнительная информация — для помощи в подборе.
Если пользователь сомневается в правильности выбора, он может ввести VIN или номер шасси. При звонке менеджеру эти данные помогут быстрее разобраться с заказом и избежать лишних вопросов.
Также предусмотрен тултип с объяснением, что такое VIN и номер шасси — на случай,
если пользователь забыл или не знает.
Также справа разместила фиксированный баннер «Сомневаетесь в выборе?». Он всегда на виду, создает ощущение поддержки и снижает тревогу пользователя.
Заполнение реквизитов компании
Пользователю достаточно ввести ИНН организации — система автоматически подтянет остальные данные.
Если организация не найдена (например, редкий случай при корректном ИНН), данные можно ввести вручную.
При вводе ИНН вручную открываются пустые поля. Если организация нашлась,
то поля открываются заполненными.
Test (тестирование)
Коридорный тест — на понятность интерфейса
Цель
Быстро проверить, насколько пользователи находят и понимают ключевые элементы на странице чекаута:
поле для ввода VIN / шасси
баннер «Сомневаетесь в выборе?»
автозаполнение по ИНН
Как проводился
6 участников — коллеги, не входящих в целевую аудиторию.
каждый выполнял 2 сценария:
оформить заказ как физлицо и как юрлицо
найти способ проверить, подходит ли запчасть
тест проходил без подсказок, с наблюдением за поведением и записью комментариев
Что показал
5 из 6 нашли поле VIN, но 3 не сразу поняли, зачем оно → добавлены пояснение и tooltip
6 из 6 заметили баннер, поняли, что это поддержка
5 из 6 ожидали автозаполнение по ИНН — подтверждение, что это понятная, ожидаемая логика.
Вывод
Коридорный тест показал, что интерфейс в целом понятен, но требует небольших доработок
по объяснению некоторых элементов.
Подготовка к разработке
Поскольку разработку вела сторонняя команда, я подготовила полный пакет материалов для передачи:
чек-лист всех возможных состояний
подробное описание логики переходов между состояниями
комментарии по адаптивной верстке и взаимодействию с чекаутом
примеры UI и поведения элементов при ховере, клике
интерактивный прототип в Figma
Все материалы были переданы разработчикам и подробно обсуждены на передающем созвоне — это позволило минимизировать риски ошибок при реализации.
Результаты
Функционал пока не запущен, но результаты тестирования и интервью показывают, что механики понятны и востребованы, что может позитивно повлиять на ключевые метрики после релиза.
Что важно сделать после запуска
Отслеживать, как пользователи взаимодействуют с новым чекаутом и его элементами
Собрать количественные данные по конверсии, количеству звонков и отказов на этапе оформления
Получить качественную обратную связь для выявления проблем и улучшения UX
Внедрять итеративные доработки на основе реальных данных и поведения пользователей
Ожидается, что новая механика поможет
Повысить доверие и уверенность пользователей за счёт поддержки и автозаполнения
Снизить количество ошибок и возвратов за счёт точного подбора по VIN и автозаполнения реквизитов
Увеличить конверсию оформления заказов и сократить время на заполнение форм
Личные успехи после проекта
Это была и большая задача, которая длилась несколько месяцев. С таким объемом данных и информации я столкнулась впервые, и я очень рада, что смогла выполнить ее от начала до конца.
Также на проекте мне удалось взять еще больше ответственности на себя и начать ревьюить задачи коллег помладше.