Корзина 1-2

Почему мы отказались
от идеального one-step checkout

Как мы починили интерфейс, который хотел быть удобным, но стал медленным

О компании

«ВсёСмарт» — технологическая платформа для покупки умной электроники и цифровых решений для дома и бизнеса.
Платформа предлагает клиентам экосистему «умных» устройств: от смартфонов и ноутбуков до IoT-систем. Главная цель — сделать технологии доступными и надёжными, сохранив высокий стандарт UX на всём пути пользователя.

Посмотреть сайт

Контекст проекта

Изначально checkout был «всё-в-одном»: адрес/доставка/оплата/промокод/согласия — на одном экране. С ростом ассортимента и появлением составных заказов (разные склады, разные магазины, разные условия доставки) страница начала: долго считать условия (наличие, сроки/стоимость, комбинации способов доставки), перезагружаться, выдавать ошибки валидации в неожиданные моменты.

Параллельно сложился устойчивый пользовательский паттерн: WB/Ozon/Маркет приучили к двухшаговой модели (1 — адрес/доставка, 2 — оплата/подтверждение).

Цель

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

снижает время загрузки

упрощает логику расчётов и проверок

соответствует привычному UX маркетплейсов

Команда

Веб-аналитик

формулировал цели, бизнес-гипотезы и ключевые метрики (конверсия, отток, CTR)
Арт-директор (я)

участвовала в проработке UX-логики,
спроектировала новую двухшаговую структуру оформления, создала дизайн-макеты, прототипы и UI-решения для тестирования
Старший дизайнер

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

реализовывал тестовые версии интерфейсов и внедряли решения на продакшн

Исследование и методология

Разделение оформления заказа на два шага (1 — адрес и доставка, 2 — оплата и подтверждение) выглядело спорным и рискованным решением. С одной стороны, это шло вразрез с классической UX-теорией «чем меньше кликов — тем выше конверсия». С другой — технически такая перестройка требовала существенных ресурсов команды: редизайн фронта и бэка, пересборка аналитики, изменение бизнес-логики заказов и синхронизации с CRM. Мы понимали, что внедрение без подтверждённых данных может обернуться потерей конверсии и ростом ошибок. Поэтому прежде чем двигаться в этом направлении, мы провели серию исследований — от анализа воронки и обращений пользователей до интервью и UX-тестов, чтобы убедиться, что именно структура, а не скорость кликов, мешает людям завершить покупку.

Брейншторм

Мы собрали команду (аналитик, дизайн, продакт) и набрасывали потенциальные проблемы, способные влиять на целевую метрику (завершение оформления):

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

Проверили, что проблемы реальные

Данные воронки (Метрика): узкое горлышко на «оформлении» и резкий отток при первом пересчёте доставки/адреса.
Запросы к аналитику:
сегментации по типам заказов: составные vs. обычные; мобильные vs. десктоп.
Обращения в поддержку и опросы:
жалобы на «зависания», «ничего не происходит после ввода адреса», «сбросилось после обновления».

Изучение фидбэка

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

UX-тест текущей версии

Гипотезы: перегрузка одной страницы, отсутствие явного прогресса, запоздалая валидация.
Задания: оформить заказ с разными товарами; применить промокод; сменить способ доставки.
Респонденты: 6
Вопросы:

Где и сколько ждёте?
Когда теряете контроль?
Что непонятно в доставке/условиях?
Какой «правильный порядок» шагов ожидаете?

Что увидели:

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

Проектирование

Я построила user-flow оформления заказа — от клика «Перейти в корзину» до экрана подтверждения, включая все ответвления, состояния и исключения:

Основной сценарий — оформление заказа с одним товаром и стандартной доставкой.
Ответвления для составных заказов с разными складами и магазинами.
Обратные переходы (изменение адреса, способа доставки, возврат к оплате).
Пограничные состояния — ошибки расчёта, отсутствие доставки в регион, таймауты API, отказ банка.
Промежуточные подтверждения и уведомления для пользователя (адрес сохранён, условия пересчитаны, промокод не применим).
Разделение на шаги — визуальное и логическое разграничение между вводом данных и финальной оплатой.

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

На его основе я собрала структурную карту экранов, которая стала основой для прототипов и дизайн-макетов.

Разделение на два шага

Товары и калькуляция

Здесь пользователь видит всё, что влияет на решение о покупке:

список товаров с возможностью отметить галочкой часть из них;
статусы («последний экземпляр», «товар с витрины», «не доставляется в ваш регион»);
подарки и бонусы, если пользователь авторизован;
расчёт выгоды: скидки, бонусные списания, итоговая сумма.

Доставка и оплата

После подтверждения выбранных товаров пользователь выбирает:

вариант доставки — доставить частями быстрее или всё сразу;
адрес доставки;
способ оплаты, включая рассрочку.

При выборе «Рассрочка» открывается детализированный сценарий:

Пользователь выбирает рассрочку как способ оплаты.
Выпадает список банков с вариантами условий.
Для некоторых банков показывается pop-up с уточнениями.

UX-тестирование новой версии

После проектирования мы провели UX-тест новой логики (6 участников).

Респонденты отмечали:

оформление стало понятнее и спокойнее,
«приятно, что всё нормально грузится»,
«второй шаг логичный — сначала выбрать товары, потом доставку и оплату».

После финальных корректировок макеты передали в разработку.

Результаты работы

Мы адаптировали checkout под новое пользовательское поведение, сформированное маркетплейсами.
К тому же разделение шагов снизило когнитивную нагрузку и ускорило загрузку. Новая логика дала возможность гибко тестировать и улучшать каждый шаг отдельно.

Скорость загрузки checkout выросла в среднем на 40%.

что вывело платформу на среднерыночный уровень выкупа корзины для e-commerce-категории электроники
Ошибки при оформлении сократились на 22%.

после внедрения триггерных элементов: шильдов рассрочки, сроков доставки и наличия

Давайте работать вместе