Редизайн оформление заказа
Pilotmoto
/
E-commerce
/
Web
Задача
Переработать страницу полностью: убрать ошибки и шум, снизить когнитивную нагрузку, добавить нужный функционал.
Решение
этап первый
– Провёл бенчмаркинг.
– Провел 5 интервью с клиентами компании, которые уже оформили заказ, интервью с командой.
– Протестировал несколько гипотез и скетчей
Этап второй
– Спрототипировал линейный пошаговый флоу
– Переработал сайдбар корзины.
– Проработал алерты, виджеты, тултипы.
– Разделил доставку на подробные варианты
– Изменил структуру выбора оплаты
– Добавил форму комментариев для пользователей
– Оптимизировал авторизацию пользователя
Этап третий
– Проверил решение через опросы и модерируемые UX-тесты на прототипах.
– Защитил дизайн перед собственниками бизнеса.
– Подготовил макет к передаче разработчикам - документирование, ui-kit, стили и состояния
Результат
– Визуальное упрощение снизило тревогу. 8 из 10 клиентов, проходящих тесты, сказали что пользоваться интерфейсом стало удобно и приятней
– Промокод в сайдбаре закрыл сценарий, который раньше приводил к брошенным заказам.
– Cycle Time уменьшился приблизительно на 1.5 минуты
– Исправлены все ux-ошибки + интегрированы новые виджиты
– SUS поднялся с 51 до 72 баллов.
Вывод
Линейный флоу убрал класс ошибок, который годами генерировал обращения в поддержку. Визуальное упрощение снизило тревогу.
Работы в pilotmoto
Оформление заказа
Было
— Из-за визуального шума пользователь тратил ресурс на ориентацию вместо заполнения формы
— «Доставка» появлялась дважды. Пользователь не понимал, в чём разница, и либо выбирал наугад, либо уходил
— Старая форма была единым полотном без чёткого деления на шаги.
— Пользователь мог перепрыгивать по форме в любом порядке — это приводило к ошибкам, незаполненным полям и сломанным заказам.
— В сайдбаре была только итоговая сумма и кнопка. Пользователь не видел, что именно оформляет
— Промокод находился в самом внизу, и не все реферальные клиенты находили его и покидкали страницу сбрасывая заполненные данные
Оформлелние заказа
Стало
— Убрана возможность перепрыгивать — исключает класс ошибок, который стабильно генерировал обращения в поддержку.
— Теперь пользователь сразу видит добавленный товар+ появилась возможность на любом этапе ввести промокод (окно корзины спускается вместе со скролом клиента)
— Самовывоз, доставка, СДЭК — три отдельных сценария с кратким описанием условий под каждым. Дублирование убрано, пользователь делает выбор один раз и осознанно.
— Для авторизованного пользователя данные подтягиваются автоматически которые можно проверить и изменить, тем самым сокращает время заполнения и снижает число ошибок в данных получателя.
Шаги оформления заказа
Шаг 1 - оформление заказа
Стало
Для не авторизированного пользователя подгружается форма, чтобы клиенту не пришлось прыгать по сайту, тратить время и стрессовать
Ключевые плюсы
— Упрощено взаимодействие
— Уменьшается Bounce Rate
Шаг 2 - оформление заказа
Стало
После шага 1 / авторизированный пользователь - попадает на способ получения, где может выбрать наиболее удобный вариант доставки. Одновременно с этим, подгружаются его данные из личного кабинета, а также его статус - где он сможет сверить данные, и в случае чего сменить аккаунт или актуализировать данные
Ключевые плюсы
— Убрана запутанность в способах получения
— Дана возможность перепроверить себя не выходя с чекаута
Шаг 3 - оформление заказа
Стало
При выборе доставки появилась возможность выбрать ту, которая наиболее удобна для пользователя, ранее при выборе способа, менеджеру приходилось звонить и уточнять
Ключевые плюсы
— упор на CES
— На ux-тестах сильно снизился Time on Task и Error Rate
Шаг 4 - оформление заказа
Стало
Появляется возможность подтянуть уже введенный ранее адрес из БД либо вести адрес по автозаполнению. Доработана форма “данных получателя, можно сразу поставить галочку “совпадает с покупателем”
Ключевые плюсы
— На тестах SUS показал себя достаточно хорошо и поднялся на несколько пунктах.
— ER снизился примерно на 17%
Шаг 5 - оформление заказа
Стало
Появилась форма подтверждения заполненных данных
Ключевые плюсы
— Фокус на уменьшение ошибок при оформлении заказа
Шаг 6 - оформление заказа
Стало
После аналитики и интервью изменен шаг способа оплаты. Для физиков убирается возможность оплаты по расчет счету, а для юриков возможность оплатить картой ( 99% оплачивают по счету, и это удобней при работе для бизнеса). Выбор даже для одного варианта спроектирован на будущее, тк планируется внедрение альтернативных способов оплаты.
Ключевые плюсы
— Убрали ошибки при оплате, снизилась дополнительная работа для менеджеров компании
Шаг 7 - оформление заказа
Стало
Добавлен блок подтверждение заказа. Клиент сразу понимает куда придет подтверждение, а также заранее подготовлен дизайн макет для выбора подтверждения через радио-батоны. Появилась возможность оставить комментарии, так как после интервью выяснилось, что у клиентов есть пул вопросов, или просьб, которые они хотят сказать менеджеру и из-за чего могут уйти с формы оформления на последнем этапе.
Ключевые плюсы
— сильно увеличился SUS после внедрения этого шага.
— Frustration Rate снизился ( проверка через интервью и модерируемые ux-тесты)
сдэк - оформление заказа
Стало
При выборе сдэка появляется кнопка с предложением выбрать удобный для клиента пункт выдачи, далее открывается виджет сдэка ( работа с ограниченным бюджетом без возможности отрисовать свои модальные окна)
Самовывоз - оформление заказа
Стало
Подтверждения адреса магазина при самовывозе.
Самовывоз - оформление заказа
Стало
Дизайн завершенного способа получения при самовывозе или сдэке.
