Почему после роста CR на 55% мы снова меняем интерфейс Intertop

За первый год работы над проектом Intertop конверсия выросла на 55% благодаря поэтапным изменениям дизайна интернет-магазина по эволюционному подходу (ESR).

В 2020 году UX/UI и CRO студия Турум-бурум продолжила развивать интерфейс, и конверсия выросла еще на 10,5%. На примере развития ключевых страниц сайта объясняем новый диджитал-тренд для роста дохода — ESR или почему будущее за дизайном по подписке.

Кратко об изменении интерфейса по ESR подходу

Мы уже писали о новом тренде в развитии eCommerce проектов — эволюционном подходе (ESR). Суть его в том, что благодаря постоянным поэтапным изменениям дизайна сайта можно улучшать KPI проекта, учитывать потребности пользователей, изменения рынка, решать новые задачи бизнеса.

Модель ESR  состоит из нескольких этапов:

1. Аудит юзабилити

Анализируется весь интерфейс и собирается список наиболее критичных для конверсии ошибок юзабилити и точек развития проекта.

2. Этап быстрых перемен

За несколько спринтов в интерфейсе исправляются элементы дизайна или целые страницы, которые наиболее влияют на показатели эффективности сайта.

3. Этап постоянного развития

Чтобы сайт не устаревал, соответствовал новым запросам пользователей и потребностям бизнеса, его интерфейс постоянно поддерживают.

О том, как это работает на практике покажем на примере эволюции карточки товара и поп-ап корзины Intertop.ua

Пример №1 Эволюция карточки товара

Основные проблемы карточки товара до первого редизайна

Изучив поведение пользователей при помощи вебвизора и карт кликов, мы выделили следующие критические ошибки в карточке товара:

• Не кликабельный логотип бренда, в то время как большая часть пользователей кликает на иконку с названием и ожидает какого-то действия.
• С описанием товара пользователи никак не взаимодействуют, но при этом текст отдаляет зону принятия решений на второй экран (цена, кнопка «Купить», и т.д.).
• Слишком маленькие и не интерактивные фото товара — пользователи активно кликают на изображения, но ничего не происходит. Фотография товара занимает значительную часть экрана, но при этом она маленького формата, тяжело рассмотреть детали. Пространство использовано нецелесообразно.
• Пользователь не может найти «Детали» о товаре, так как расположение этого блока было внизу на втором экране.

Пользователь не до конца понимал, как взаимодействовать с карточкой товара и покидал ее.

Первый этап оптимизации

Определив потенциальные зоны роста, мы приступили к оптимизации страницы:

• Сделали акцент на фотографии товара: большие качественные изображения, которые увеличивались при клике, в левой части экрана добавили навигацию по фото.
• Убрали описание товара с первого экрана, что позволило перенести и лучше зонировать область принятия решения.
• Сделали логотип бренда кликабельным с переходом на релевантную выдачу.
• Акцентировали внимание на доступных вариантах цвета конкретного товара.
• Добавили информацию о бонусах.
• Реализовали навигацию в нижней части экрана, чтобы у пользователя был доступ ко всей необходимой информации о товаре.

В результате конверсия с карточки товара увеличилась на 31%.

Новые задачи

В процессе внесения изменений в дизайн карточки товара у представителей компании сформировался новый пул задач, которые они хотели реализовать в интерфейсе интернет-магазина Intertop.ua:

1. Целевая аудитория магазина стала молодеть, в результате чего изменились интересы и поведение основного сегмента посетителей сайта.
2. Стали преобладать мобильные паттерны — пользователи пытались свайпить и таппать, поэтому требовалось нивелировать разницу веб-версии и мобильного приложения.
3. Масштабирование и появление нового раздела Beauty требовало изменений в карточке товаров, так как предыдущая версия не учитывала особенностей товаров данной категории.
4. Обновление контентной политики сайта — стали добавлять фотографии с демонстрацией товара на модели, что также требовало внесения корректировок, чтобы соответствовать новым требованиям.
5. Решение проблем с возвратом товара из-за несоответствия размера.

Мы еще раз проанализировали особенности поведения пользователей на сайте с учетом новых задач и ранее внесенных изменений и приступили ко второму этапу оптимизации карточки товара.

Второй этап оптимизации

Рассмотрим основные изменения, которые мы внесли в карточку товара на десктопной версии:

• Стали выводить сразу по 2 изображения товара с разных ракурсов для наглядности.
• Перенесли лого бренда ближе к товару, непосредственно на фото.
• Нивелировали «хлебные крошки».

В результате внесенных изменений, нам удалось увеличить микро конверсию (CR) с карточки товара в корзину на 12%.

В мобильной версии сайта мы:

• Очистили верхнюю часть карточки товара от «хлебных крошек».
• Добавили стандартную для мобильных приложений навигацию в виде bottom sheet — это нижний экран, который высвайпывается снизу экрана и служит для отображения дополнительной информации.
• Лейблы перенесли под изображение в зону принятия решений, чтобы они не закрывали важные части фотографии товара.
• Для решения проблемы с возвратами из-за неверно выбранного размера, мы задействовали такой тренд, как Expanding Bottom Sheet, на котором отображается вся важная информация о товаре (название, цвет, цена, бонусы, и т.д.). Нажав фиксированную кнопку «Добавить в корзину», Bottom Sheet разворачивается и пользователь может перепроверить выбранные параметры товара еще раз. По итогу, 82% пользователей воспользовались данной функцией для изменения или подтверждения размера.

В итоге CR с карточки товара на mobile увеличился на 38%.

Пример №2 Эволюция pop-up корзины

Аналогичную эволюцию за 2 года прошла и корзина, где в ходе первой итерации сначала исправлялись задачи критичные для конверсии ошибки, а уже в ходе второй – усиливались точки роста и решать задачи бизнеса.

Основные проблемы pop-up корзины до первого редизайна

Вот основные ошибки, которые мы выделили после анализа корзины:

• Дублирующая кнопка «В корзину».
• Неструктурированная информация об оплате, доставке, бонусах.
• Блок cross-sale был не эффективен из-за того, что выводились нерелевантные товары.

Первый этап оптимизации

На первом этапе оптимизации были реализованы следующие изменения:

1. Вынесли всю информацию о товаре в верхнюю часть блока (размер, цвет, количество, бонусы, цена товара).
2. Зону принятия решения выделили и сместили вниз, где еще раз акцентируем внимание на общей стоимости заказа и начисленных бонусах.
3. Проработалиcross-sale блок — сделали его понятным и релевантным заказу.

По результатам А/Б-тестирования коэффициент конверсии увеличился на 54,68% (тестировали данную гипотезу уже в рамках доработки чекаута).

Новые задачи pop-up корзины

После первого этапа оптимизации ключевых страниц проекта, взаимодействие и поведение пользователей с сайтом изменилось:

1. Увеличился средний чек и соответственно количество товаров в корзине — из-за этого сместилась вниз информация о сумме заказа и cross-sale блок, что негативно повлияло на эффективность инструмента.
2. Поменялась бонусная система — стала более выгодной, поэтому нужен был акцент на бонусах.
3. Необходимо было решить проблему с выбором необходимого размера при оптовом заказе одной модели, но разного размера.

Второй этап оптимизации

Для решения новых задач мы внесли следующие изменения.

На десктопе:

• Разместили список товаров в левой части блока и добавили возможность скролла. Благодаря этому cross-sale блок стал доступнее, что повысило эффективность инструмента.
• Зафиксировали область с информацией о сумме заказа, бонусах, скидках и кнопкой «Оформить заказ» в верхней части экрана.

В мобильной версии:

• Зафиксировали кнопку «Оформить заказ» внизу экрана так, чтобы она всегда была у пользователя на виду.
• Акцентировали внимание на бонусах — вынесли их в отдельный блок.
• Добавили кнопку для быстрого перехода к блоку cross-sale для повышения эффективности инструмента.

По результатам второго этапа оптимизации pop-up корзины конверсия на десктопе выросла на 14%, переход из корзины на страницу оформления заказа — на 8%. На mobile — на 27% и 22% соответственно.

Почему будущее за дизайном по подписке?

Сайт должен постоянно развиваться вместе с бизнесом, соответствовать новым задачам и потребностям пользователей. Постоянное улучшение UX/UI можно обеспечить только подключив к работе над проектом специалистов в проектировании, дизайне, оптимизации конверсии и бизнеса анализе.

Иметь такую команду в штате не всегда возможно и рационально, поэтому будущее за subscription business model. Суть такого подхода заключается в том, что вы ищете не подрядчиков, а партнеров, которые постоянно поддерживают ваш проект, улучшая пользовательский опыт и расширяя внутреннюю экспертизу команды.

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

‍