Задача
Создать понятную и информативную страницу «Доставка и услуги», чтобы повысить прозрачность условий для пользователей и снизить количество обращений в поддержку.
Откуда взялась задача
В рамках общего редизайна сайта была выявлена необходимость улучшить страницу «Доставка
и услуги», задача была приоритизирована проект менеджером и дизайн-лидом. У нас было несколько встреч, чтобы правильно сформулировать задачу и глубже вникнуть в ее контекст.
Discovery (исследование)
Качественные интервью
Провела интервью с клиентом, проект-менеджером и дизайн-лидом, чтобы собрать недостающую информацию: какие услуги есть, как работает доставка и почему старая страница неэффективна.
Вот что удалось выяснить по итогам интервью:
пользователи часто не понимают, как работает доставка в разные регионы
компания предлагает несколько типов доставки и услуг (подъём, сборка), но они описаны неструктурированно
сейчас информация на странице перегружена текстом и плохо читается
поддержка регулярно получает однотипные вопросы, которые могли бы решаться через страницу
важно сохранить весь текущий контент, но подать его более удобно и понятно
Анализ конкурентов
Я проанализировала прямых/косвенных конкурентов продукта, у которых есть схожий механизм (калькулятор) расчета доставки и услуг.
Сервис
Формат страницы
Особенности
UX-оценка
ВсеИнструменты
Статичный (таблицы)
Нет калькулятора, нет выбора адреса/зоны, пользователь сам ищет
Сложно быстро оценить стоимость доставки
Бауцентр
Статичный + карта
Есть карта зоны доставки, но без интерактива, нет адаптации
Фокус на зонах, мало удобства
Лемана Про
Динамичный калькулятор
Выбор адреса и веса, расчёт итоговой стоимости, опции услуг
Удобный и понятный сценарий
Петрович
Калькулятор с этапами
Адрес → способ → параметры, интерфейс адаптируется
Гибкая логика, заточена под пользователя
Яндекс.Доставка
Многошаговый, интерактивный
Шаги выбора зоны, способа, параметров, постоянная карта
Контекстный, адаптивный, не перегружает
Основные выводы
у большинства крупных игроков есть интерактивные сценарии, которые позволяют пользователю рассчитать доставку в контексте своего адреса и условий
статичные страницы (как у ВсеИнструменты и Бауцентра) менее удобны, требуют больше усилий от пользователя
лучшие примеры (Петрович, Яндекс.Доставка) — динамические интерфейсы с пошаговым вводом и фокусом на простоте
Анализ текущей страницы
Текущая страница информирует о зонах доставки, стоимости и способах оплаты. Однако её визуальная и информационная подача затрудняет восприятие.
Проблемы
избыточный текст — большой объём информации без визуальных акцентов и группировки
слабая структура — плохо выражена иерархия, нет навигации по блокам
неудобный интерфейс — неинтерактивная карта, невозможно быстро сориентироваться по региону
устаревший UI — визуально и технически страница требует полной переработки
невысокая польза — несмотря на полноту контента, он не помогает быстро найти нужное
Сбор обратной связи от службы поддержки
«Мы регулярно получаем однотипные вопросы от клиентов. Люди не могут разобраться, какие именно услуги доступны, сколько стоит доставка в их регион и какие условия действуют для разных типов товаров.»
Чаще всего спрашивают
«Сколько будет стоить доставка до моего города/области?»
«Почему доставка стоит дороже, чем написано на сайте?»
«Что входит в услугу "подъем на этаж"?»
«Как понять, входит ли мой адрес в зону доставки?»
Вывод
Страницу необходимо переработать — сделать ее структурированной, наглядной и интерактивной, чтобы снизить нагрузку на поддержку и повысить доверие пользователей.
Define (анализ)
Основные боли пользователей
После синтеза данных совместно с PM и дизайн-лидом, мы выделили ключевые проблемы,
с которыми сталкиваются пользователи на текущей странице:
пользователи не могут быстро рассчитать стоимость доставки до своего региона — отсутствует удобный инструмент
страница перегружена текстом и слабо структурирована — сложно найти важную информацию
калькулятор доставки непонятен в использовании
условия дополнительных услуг (подъем, сборка) изложены разрозненно и вызывают недоверие
информация по оплате и доставке разбросана по странице, нет четкой иерархии
часто итоговая стоимость отличается от ожиданий, что вызывает раздражение и обращения
в поддержку
пользователи не могут однозначно определить, входит ли их адрес в зону доставки, так как карта не интерактивна и отсутствуют подсказки
повторяющиеся вопросы увеличивают нагрузку на службу поддержки
Формулировка гипотез и их проверка
Исходя из выявленных болей, я сформулировала ключевую гипотезу:
Когда пользователь планирует доставку, и хочет быстро узнать точную стоимость с учетом всех условий (адрес, тип услуги и т.д.), он хочет сделать это самостоятельно, без необходимости обращаться в поддержку, поэтому он будет использовать удобный и понятный интерактивный калькулятор доставки.
Целевая метрика
Снижение количества обращений по вопросам доставки (На текущем сайте 30-100 обращений
по вопросам доставки)
Проверка гипотезы
Чтобы подтвердить гипотезу, я провела 6 юзабилити-тестов текущего сайта с пользователями.
Результаты
4 из 6 участников интервью затруднились назвать стоимость доставки в свой регион
5 из 6 респондентов в опросе оценили удобство понимания стоимости доставки в 3 балла
или ниже
6 из 6 респондентов сказали, что карта воспринимается как «не кликабельная картинка»
Частая реакция пользователей: «Я просто звоню, чтобы спросить, иначе запутаться можно»
Вывод
Гипотеза подтверждена — пользователи действительно испытывают сложности, которые можно решить с помощью интерактивных инструментов. Есть потенциал сократить обращения
в поддержку и повысить прозрачность условий доставки.
Приоритизация контента
Вместе с менеджером и дизайн-лидом мы приоритезировали контент по методике MoSCoW — чтобы показать, какие блоки критически важны, какие — желательны, а какие можно отложить
или убрать.
Критически важные блоки:
Калькулятор доставки
Интерактивный инструмент с расчетом по адресу, весу и типу услуг
Интерактивная карта зон доставки
Помогает быстро понять, входит ли адрес в зону обслуживания
Условия доставки и сроки
Четкое описание способов доставки, сроков и возможных ограничений.
Дополнительные услуги
Пояснение, что входит в «подъем», «сборку» и другие опции.
Убрали блок про Возврат и Оплату, так как для этой информации будет отдельная страница.
Клиент настаивал на сохранении текущего контента, поэтому при проектировании мы акцентировали внимание на структуре и удобной подаче, а не переписывании текстов.
Design (проектирование)
Создание wireframes
После проработки пользовательских сценариев у меня была четкая структура, поэтому я начала
с детализированных вайрфреймов. Это упростило обсуждение на раннем этапе и сэкономило время на правки. Остальные состояния (ошибки, загрузка, edge cases) я прорабатывала
на следующем этапе.
В структуре учтено различие по регионам:
для Москвы отображается калькулятор с курьерской доставкой
для регионов — выдача через ПВЗ
Клиент одобрил вайрфреймы, и я перешла к UI-дизайну.
Картинка карты на текущем макете использована в качестве референса. При реализации карта будет иметь другой вид.
При активации тоггла «Дополнительные услуги» отображаются опции: разгрузка и подъем
на этаж
Стоимость обновляется в реальном времени в зависимости от введённых данных
Подъем на этаж зависит от того на лифте это будет или по лестнице. Стоимость подъема
на лифте фиксирована
Для Москвы доступна экспресс доставка за 1 час
Если адрес — частный дом, можно отметить чекбокс. В этом случае не учитывается лифт,
только лестница
Если тоггл «Дополнительные услуги» выключен, то мы показываем только доставку. Если тоггл включен, но услуги недоступны, то показываем соответствующее состояние
Доставка для регионов
Для регионов не отображаются тогглы «Дополнительные услуги» и «Показать зоны доставки
на карте». Чекбокс «Частный дом» также отсутствует
Пользователь может выбрать способ отображения ПВЗ — списком или на карте
При клике на пин на карте открывается шторка с информацией о пункте и стоимостью
Также я проработала:
всевозможные пользовательские состояния (загрузка, ошибки, отсутствующие зоны)
десктопные версии и адаптив
поведение элементов при заполнении и взаимодействии
Test (тестирование)
Юзабилити-тестирование
Провела удалённое юзабилити-тестирование с 7 респондентами, соответствующими целевой аудитории (возраст 25–44 года, преимущественно мобильные пользователи).
Методика
Участники выполняли задачи: рассчитать стоимость доставки через калькулятор, проверить зону доставки на карте, ознакомиться с условиями дополнительных услуг.
После каждого сценария проводилось короткое интервью для сбора обратной связи.
Результаты
Калькулятор: 7 из 7 участников быстро и без помощи рассчитали стоимость доставки, отметив удобство и понятность интерфейса.
Карта зон доставки: все легко определили, входит ли их адрес в зону, оценили карту как наглядный инструмент. Поступили предложения добавить текстовые подсказки — учтем
в доработках.
Структура и визуал: участники отметили улучшение восприятия информации, отсутствие перегруженности текста.
Итог
Юзабилити-тестирование подтвердило, что новая страница стала более понятной и удобной
для пользователей. Это, вероятно, приведёт к снижению количества обращений в службу поддержки и улучшению общего пользовательского опыта.
Подготовка к разработке
Общий вид UI Kitа проекта
Разработкой занималась не наша команда, поэтому я подготовила для передачи:
чек-лист всех возможных состояний
подробные описания логики переключения состояний
комментарии к адаптивам и взаимодействию
поведения элементов
прототип с интерактивом в Figma
Все материалы были переданы в разработку и обсуждены на передающем созвоне, чтобы минимизировать возможные ошибки при реализации.
Результаты
Страница еще не зарелизилась, но по результатам пользовательских тестов и предварительной обратной связи от команды клиента новая версия страницы воспринимается как более понятная, структурированная и удобная.
После релиза планируем отслеживать:
количество обращений в поддержку по вопросам доставки
поведение пользователей на странице
влияние на CR
По итогам релиза планируется провести повторную серию исследований — как количественных, так и качественных — чтобы доработать механику, если это потребуется.
Экономстрой
Экономстрой — розничная сеть строительных материалов, работает с 1995 года. Включает более 18 офлайн-точек по России. При редизайне компания ставит цель трансформироваться
в маркетплейс строительных товаров
Целевая аудитория
Основная аудитория сайта — пользователи от 25 до 44 лет (57,1%). Аудитория старше 45 лет составляет 36,9%. Большинство (59,3%) заходят с мобильных устройств, поэтому проект реализуется по принципу mobile first
Статус проекта
Разработка в процессе, текущий сайт по ссылке
Моя роль
Одна из ведущих дизайнеров проекта. Работала в связке с тремя представителями клиента, проект-менеджером и дизайн-лидом. Регулярно проводили созвоны с другими дизайнерами для обсуждения решений. Обращалась за техническими консультациями к разработчикам нашей команды.
Что делала на проекте
Спроектировала и отдала в разработку: главную страницу, информационные страницы, навигацию и поиск, личный кабинет
Работа велась итерационно. На каждом этапе я согласовывала решения с дизайн-лидом, получала фидбэк и дорабатывала. После этого показывала результат клиенту. Регулярно созванивалась с заказчиками, чтобы избежать недопониманий и учесть все нюансы.
Как решала задачу
Создание UI-дизайна страницы
После согласования структуры я приступила к визуальной проработке. Параллельно с другими дизайнерами для проекта мы создавали UI Kit, поэтому часть компонентов взяла из общего набора, остальное — доработала под задачу.
После создания wireframes я приступила к UI-части. UI Kit проекта уже был готов — часть элементов я взяла из него, часть добавила самостоятельно.
Доставка для Москвы и МО
Основной сценарий — рассчитать доставку по адресу и весу заказа. Дополнительные услуги (подъём, разгрузка) — по выбору пользователя.
Упрощен текстовый блок: оставлены только основные тезисы, убраны повторы
При клике на таб происходит автоскролл к соответствующему разделу, таб остается фиксированным при прокрутке
Карта по умолчанию показывает зоны доставки. По тогглу можно отключить раскраску зон. Разделение на зоны нужны для того, чтобы пользователь смог понять для каких зон доставка бесплатна. Такая информация размещена в отдельном блоке «Бесплатная доставка». Карта зон доставки будет реализована на стороннем API — Яндекс.Карты или 2ГИС
Пользователь может найти адрес вручную, либо с помощью определения местоположения.
При поиске через инпут выводятся только адреса в указанном выше городе