Студия Турум-бурум

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эволюция карточки товара

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

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

Так выглядела карточка товара интернет-магазина Интертоп до ее оптимизации по ESR подходу

Так выглядела карточка товара интернет-магазина Интертоп до ее оптимизации по ESR подходу

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

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

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

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

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

Дизайн карточки товара после первого этапа оптимизации
Дизайн карточки товара после первого этапа оптимизации

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

Новые задачи

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

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

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

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

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

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

Карточка товара в desktop версии интернет-магазина Intertop после второго этапа оптимизации
Карточка товара в desktop версии интернет-магазина Intertop после второго этапа оптимизации

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

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

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

Карточка товара в mobile версии интернет-магазина Intertop после второго этапа оптимизации

Карточка товара в mobile версии интернет-магазина Intertop после второго этапа оптимизации

Карточка товара в mobile версии интернет-магазина Intertop после второго этапа оптимизации

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

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

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

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

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

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

Так выглядела pop-up корзина до процесса оптимизации
Так выглядела pop-up корзина до процесса оптимизации

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

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

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

Pop-корзина после первого этапа изменений

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

Результаты А/Б-тестирования
Результаты А/Б-тестирования 

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

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

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

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

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

На десктопе:

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

Pop-корзина на десктопе после второго этапа изменений
Pop-корзина на десктопе после второго этапа изменений

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

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

image 461 (4).png

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

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

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

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

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




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.