Сайт украинского ритейлера Intertop посещают до 3,5 млн посетителей в месяц. Доля онлайн-продаж составляет 15% и за последний год выросла на 80%.
О том, как проводить редизайн и оптимизировать опыт покупателя для такого проекта рассказал Дмитрий Кукуруза, исполнительный директор студии «Турум-бурум».
Задача
Intertop — уже не просто кирпичные магазины обуви с мировыми брендами. После хороших показателей в онлайн и старта внедрения омниканальной модели в 2017 году стало ясно, что именно этот путь будет приоритетным.
Вместе с ростом трафика и развитием омниканальных сценариев пришла необходимость изменения юзабилити на сайте. Тогда мы и начали думать, как сделать Customer Journey более удобным и простым.
Что такое ESR
ESR (Evolution site redesign) — это поэтапное улучшение интерфейса с использованием принципов СRO (conversion rate optimization) с целью увеличения дохода.
Главное преимущество подхода — все изменения базируются на данных аналитики и подтверждаются А/В тестами. Поэтому риски минимальны, инвестиции в интерфейс незначительны и быстро окупаются.
Почему выбрали ESR и в чем его преимущества?
Первоочередной задачей было правильно подобрать методологию, потому что проект Intertop — это большой работающий механизм и важно было ничего не поломать. Именно этого опасаются все крупные проекты.
После изучения бизнеса и общения с собственниками, мы выделили главные требования:
- Фокусировка на увеличении дохода;
- Быстрота внедрения изменений;
- Тестирование и проверка решений;
- Минимизация рисков;
- Постоянное развитие проекта.
Поэтому выбор пал на ESR подход к редизайну сайта.
Как эволюционный подход выглядит изнутри?
Если упростить все стадии процесса ESR, то его можно представить в таком виде:
Подготовительный этап. Включает в себя определение целей и задач проекта, исследование ниши, анализ целевой аудитории, экспресс-аналитику сайта, настройку инструментов для сбора данных и отслеживания событий.
Анализ UX. На этом этапе осуществляют:
- Анализ показателей Google Analytics, разметку событий с помощью Google Tag Manager и др.
- Изучение тепловых карт, записей вебвизора, карт скролла и кликов.
- Сбор и анализ обратной связи.
- Экспертный анализ юзабилити, основанный на опыте UX-специалиста и best practices ниши.
Построение гипотез. На основании данных UX-аудита выдвигается максимальное количество гипотез. Затем их приоритизируют. При работе над проектом Intertop было построено более 30 гипотез, из которых выбрали ключевые и продолжили с ними работу.
Проектирование и тестирование UX/UI решения. Согласно расставленным приоритетам, UX-проектировщик предлагает новые решения и варианты устранения ошибок в интерфейсе, двигаясь итерационно. Каждое решение тестируют или оценивают его эффективность, сравнивая показатели аналитики до и после внедрения.
Замер результатов. По результатам тестирования наиболее эффективный вариант внедряют в интерфейс под авторским надзором UX-проектировщика и снова делают замер микро- и макро-показателей аналитики до и после его внедрения.
Таким образом интерфейс меняется поэтапно, без рисков, связанных с кардинальными изменениями.
ESR подход в действии на примере Intertop
Главный приоритет большинства магазинов — процесс оформления заказа. Мы нашли массу критических ошибок не только на странице чекаута, но и переосмыслили путь пользователя по воронке к целевому действию.
Увеличение ARPU на 11,46% после изменений в чекауте.
В ходе UX анализа, мы собрали обратную связь с помощью exit-intent pop-up, который при закрытии пользователем вкладки браузера выводил на экран вопрос: «Почему вы покидаете оформление заказа?». Из опрошенных 444 человек, 48,6% ответили, что покидают страницу, т.к. не могут завершить заказ.
Мы проанализировали воронку, которая состояла из 5 этапов и обнаружили узкие места.
Страница корзины была обязательным шагом, который пользователю нельзя было пропустить
Мы проработали каждый этап воронки и максимально сократили путь пользователя по ней.
Теперь для зарегистрированного пользователя она состояла всего из двух шагов, а для нового — из трех.
Кроме этого, мы проработали каждый шаг воронки. Наибольший отток пользователей был на этапе регистрации/авторизации. Форма регистрации выглядела громоздкой и состояла из большого количество полей, что, согласно нашей гипотезе, заставляло пользователей уходить со страницы, не завершив покупку.
Но согласно бизнес-процессам, этот этап был обязательным условием покупки в интернет-магазине Intertop. Поэтому мы сократили количество полей до трех и сделали авторизацию и регистрацию более понятной для пользователя.
Страницу оформления заказа мы разбили на смысловые блоки, отдельно вынесли поле с товарами. Теперь все расчеты находятся в одном месте, чтобы покупатель не путался и получил всю необходимую информацию перед тем, как нажать кнопку «Оформить заказ».
Кроме этого, мы добавили функцию автозаполнения полей для авторизированных пользователей, чтобы сделать процесс оформления заказа максимально быстрым и комфортным.
По результатам А/Б-тестирования, коэффициент конверсии с новой версии чекаута был на 54,68% больше.
Средний доход на пользователя (ARPU) увеличился на 11,46%, показатель отказов снизился на 13,35%.
Увеличение ARPU на 13,3% после редизайна карточки товара и страницы выдачи.
Основываясь на анализе и опросах, мы нашли еще одно слабое звено — фильтры.
При анализе фильтров UX-эксперты выявили не только проблемы с юзабилити, но и технические баги. Например, при выборе фильтра «42 размер» в выдаче появлялись модели обуви с нерелевантными размерами 43 и 44.
На записях вебвизоров было видно, что пользователи просматривали огромное количество страниц в поисках нужного размера обуви, так как отсортировать товар в соответствии со своим запросом не могли.
Система фильтров не была структурирована. Чтобы найти «размер», нужно было проскроллить несколько экранов. Фильтры не были приоритезированы, согласно критериям выбора пользователей.
В новом дизайне мы четко выделили товарные категории, которые в сегменте fashion являются важными элементами навигации.
Активное использование фильтров — это стандарт поведения пользователя в интернет-магазине этой тематики. Поэтому важно было предоставить покупателю такую возможность на первом экране.
Для этого мы вынесли все фильтры в верхнюю панель, чтобы пользователь мог с первого экрана понять возможности сортировки и фильтрации. Для фильтров с большим количеством параметров мы добавили поиск и скролл, чтобы удобнее было находить нужный бренд, размер или другой параметр.
Анализ карточки товара показал, что на устройствах со стандартным разрешением, например, 1366 на 768, основной призыв к действию — кнопка «Купить» — располагалась на втором развороте экрана т.е. пользователь до нее мог даже не доскроллить. При этом ключевое место занимал текст. Согласно гипотезе, это было неоправданно, т.к. там должна располагаться наиболее продающая информация о товаре.
Не было возможности увеличить изображение товара и рассмотреть детали. Значок бренда был не кликабельным, хотя, согласно анализу карт кликов и данных аналитики, бренд — очень популярный поисковый запрос на сайте:
Кроме грубых ошибок в карточке товара, были и курьезные находки в интерфейсе. Например, так выглядел блок сопутствующих товаров к мужской паре обуви:
Мы создали новую удобную карточку товара, которая не перегружена элементами и позволяет спокойно выбрать товар и добавить его в корзину:
После внедрения новых страниц выдачи и карточки товара мы получили такие результаты:
- конверсия с карточки товара в корзину увеличилась на 31%;
- конверсия из корзины в чекаут увеличилась на 36,6 %;
- ARPU увеличился на 13,3%.
Результаты
Но за 1 год совместной работы, устранив лишь те проблемы, которые лежали на поверхности, мы получили хорошие результаты:
Нам удалось устранить большинство критических ошибок как в интерфейсе, так и в логике работы некоторых функций сайта. Это позволило получить нам рост по всем основным KPI: конверсия выросла на 55,4%, средний доход на пользователя (ARPU) увеличился на 71,43%, а конверсия со страницы чекаута — на 128%.
Начните применять ESR-подход и вносить изменения на своем сайте. Правильно настройте аналитику и сделайте разметку событий, посмотрите узкие места в воронке, подключите тепловые карты и сервисы по сбору обратной связи. Станьте онлайн-покупателем в собственном магазине и сами пройдите этот путь. Даже эти простые действия могут открыть вам массу инсайтов о пользователях и обнаружить проблемы в интерфейсе.
И еще. Найдите надежных партнеров, потому что внедрение поэтапных изменений — это постоянный процесс, который требует качественной работы всех команд.
Источник: ain.ua
Самые актуальные новости - в 
