Почему после роста CR на 55% мы снова меняем интерфейс Intertop
За первый год работы над проектом Intertop конверсия выросла на 55% благодаря поэтапным изменениям дизайна интернет-магазина по эволюционному подходу (ESR).
В 2020 году UX/UI и CRO студия Турум-бурум продолжила развивать интерфейс, и конверсия выросла еще на 10,5%. На примере развития ключевых страниц сайта объясняем новый диджитал-тренд для роста дохода — ESR или почему будущее за дизайном по подписке.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b525d65e4392dc4d8f3034_65b3f2ee12eedfa7e77abea3_image%20461%20(1).webp)
Кратко об изменении интерфейса по ESR подходу
Мы уже писали о новом тренде в развитии eCommerce проектов — эволюционном подходе (ESR). Суть его в том, что благодаря постоянным поэтапным изменениям дизайна сайта можно улучшать KPI проекта, учитывать потребности пользователей, изменения рынка, решать новые задачи бизнеса.
Модель ESR состоит из нескольких этапов:
1. Аудит юзабилити
Анализируется весь интерфейс и собирается список наиболее критичных для конверсии ошибок юзабилити и точек развития проекта.
2. Этап быстрых перемен
За несколько спринтов в интерфейсе исправляются элементы дизайна или целые страницы, которые наиболее влияют на показатели эффективности сайта.
3. Этап постоянного развития
Чтобы сайт не устаревал, соответствовал новым запросам пользователей и потребностям бизнеса, его интерфейс постоянно поддерживают.
О том, как это работает на практике покажем на примере эволюции карточки товара и поп-ап корзины Intertop.ua
Пример №1 Эволюция карточки товара
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b52622adb6ccb2a49e5e00_65b3f2f6737c7b538ca7de1c_image%20461.webp)
Основные проблемы карточки товара до первого редизайна
Изучив поведение пользователей при помощи вебвизора и карт кликов, мы выделили следующие критические ошибки в карточке товара:
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b526511579c132531430eb_65b3f2ee380b8958044d7656_image%20461%20(3).webp)
- Не кликабельный логотип бренда, в то время как большая часть пользователей кликает на иконку с названием и ожидает какого-то действия.
- С описанием товара пользователи никак не взаимодействуют, но при этом текст отдаляет зону принятия решений на второй экран (цена, кнопка «Купить», и т.д.).
- Слишком маленькие и не интерактивные фото товара — пользователи активно кликают на изображения, но ничего не происходит. Фотография товара занимает значительную часть экрана, но при этом она маленького формата, тяжело рассмотреть детали. Пространство использовано нецелесообразно.
- Пользователь не может найти «Детали» о товаре, так как расположение этого блока было внизу на втором экране.
Пользователь не до конца понимал, как взаимодействовать с карточкой товара и покидал ее.
Первый этап оптимизации
Определив потенциальные зоны роста, мы приступили к оптимизации страницы:
- Сделали акцент на фотографии товара: большие качественные изображения, которые увеличивались при клике, в левой части экрана добавили навигацию по фото.
- Убрали описание товара с первого экрана, что позволило перенести и лучше зонировать область принятия решения.
- Сделали логотип бренда кликабельным с переходом на релевантную выдачу.
- Акцентировали внимание на доступных вариантах цвета конкретного товара.
- Добавили информацию о бонусах.
- Реализовали навигацию в нижней части экрана, чтобы у пользователя был доступ ко всей необходимой информации о товаре.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b526af37c11edf4b0b66aa_65b3f2f3ccf0315d19e89f42_image%20461%20(7).webp)
В результате конверсия с карточки товара увеличилась на 31%.
Новые задачи
В процессе внесения изменений в дизайн карточки товара у представителей компании сформировался новый пул задач, которые они хотели реализовать в интерфейсе интернет-магазина Intertop.ua:
- Целевая аудитория магазина стала молодеть, в результате чего изменились интересы и поведение основного сегмента посетителей сайта.
- Стали преобладать мобильные паттерны — пользователи пытались свайпить и таппать, поэтому требовалось нивелировать разницу веб-версии и мобильного приложения.
- Масштабирование и появление нового раздела Beauty требовало изменений в карточке товаров, так как предыдущая версия не учитывала особенностей товаров данной категории.
- Обновление контентной политики сайта — стали добавлять фотографии с демонстрацией товара на модели, что также требовало внесения корректировок, чтобы соответствовать новым требованиям.
- Решение проблем с возвратом товара из-за несоответствия размера.
Мы еще раз проанализировали особенности поведения пользователей на сайте с учетом новых задач и ранее внесенных изменений и приступили ко второму этапу оптимизации карточки товара.
Второй этап оптимизации
Рассмотрим основные изменения, которые мы внесли в карточку товара на десктопной версии:
- Стали выводить сразу по 2 изображения товара с разных ракурсов для наглядности.
- Перенесли лого бренда ближе к товару, непосредственно на фото.
- Нивелировали «хлебные крошки».
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b528ab1b79f7b4ef3126e2_65b3f2f5fd6a5aa0bbabf0b4_image%20461%20(8).webp)
В результате внесенных изменений, нам удалось увеличить микро конверсию (CR) с карточки товара в корзину на 12%.
В мобильной версии сайта мы:
- Очистили верхнюю часть карточки товара от «хлебных крошек».
- Добавили стандартную для мобильных приложений навигацию в виде bottom sheet — это нижний экран, который высвайпывается снизу экрана и служит для отображения дополнительной информации.
- Лейблы перенесли под изображение в зону принятия решений, чтобы они не закрывали важные части фотографии товара.
- Для решения проблемы с возвратами из-за неверно выбранного размера, мы задействовали такой тренд, как Expanding Bottom Sheet, на котором отображается вся важная информация о товаре (название, цвет, цена, бонусы, и т.д.). Нажав фиксированную кнопку «Добавить в корзину», Bottom Sheet разворачивается и пользователь может перепроверить выбранные параметры товара еще раз. По итогу, 82% пользователей воспользовались данной функцией для изменения или подтверждения размера.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b5290917ac3c7ca9af3632_65b3f2ef6c38d19a234f9d2c_Frame%20312%20(1).webp)
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b5293a27a5927a210f1bdb_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0%20%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%B0%20mobile.gif)
В итоге CR с карточки товара на mobile увеличился на 38%.
Пример №2 Эволюция pop-up корзины
Аналогичную эволюцию за 2 года прошла и корзина, где в ходе первой итерации сначала исправлялись задачи критичные для конверсии ошибки, а уже в ходе второй – усиливались точки роста и решать задачи бизнеса.
Основные проблемы pop-up корзины до первого редизайна
Вот основные ошибки, которые мы выделили после анализа корзины:
- Дублирующая кнопка «В корзину».
- Неструктурированная информация об оплате, доставке, бонусах.
- Блок cross-sale был не эффективен из-за того, что выводились нерелевантные товары.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b52982c00320d55bbb170a_65b3f2f44b77c9c6b99353dd_image%20461%20(9).webp)
Первый этап оптимизации
На первом этапе оптимизации были реализованы следующие изменения:
- Вынесли всю информацию о товаре в верхнюю часть блока (размер, цвет, количество, бонусы, цена товара).
- Зону принятия решения выделили и сместили вниз, где еще раз акцентируем внимание на общей стоимости заказа и начисленных бонусах.
- Проработалиcross-sale блок — сделали его понятным и релевантным заказу.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b529c696ec80afe5d453cd_65b3f2f585671bb22aeed4b1_image%20461%20(10).webp)
По результатам А/Б-тестирования коэффициент конверсии увеличился на 54,68% (тестировали данную гипотезу уже в рамках доработки чекаута).
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b52a51ef42d944ba2ac524_65b3f2f32af03e7edcff94a1_image%20461%20(6).webp)
Новые задачи pop-up корзины
После первого этапа оптимизации ключевых страниц проекта, взаимодействие и поведение пользователей с сайтом изменилось:
- Увеличился средний чек и соответственно количество товаров в корзине — из-за этого сместилась вниз информация о сумме заказа и cross-sale блок, что негативно повлияло на эффективность инструмента.
- Поменялась бонусная система — стала более выгодной, поэтому нужен был акцент на бонусах.
- Необходимо было решить проблему с выбором необходимого размера при оптовом заказе одной модели, но разного размера.
Второй этап оптимизации
Для решения новых задач мы внесли следующие изменения.
На десктопе:
- Разместили список товаров в левой части блока и добавили возможность скролла. Благодаря этому cross-sale блок стал доступнее, что повысило эффективность инструмента.
- Зафиксировали область с информацией о сумме заказа, бонусах, скидках и кнопкой «Оформить заказ» в верхней части экрана.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b52a9a493be278893c5459_65b3f5988c15e2615f9eddcd_2.webp)
В мобильной версии:
- Зафиксировали кнопку «Оформить заказ» внизу экрана так, чтобы она всегда была у пользователя на виду.
- Акцентировали внимание на бонусах — вынесли их в отдельный блок.
- Добавили кнопку для быстрого перехода к блоку cross-sale для повышения эффективности инструмента.
![](https://cdn.prod.website-files.com/6597b2c82a3c9d887f55823c/65b52b1ce3f60de94bde5261_65b3f2f08d783b17bff4bcc8_image%20461%20(4).webp)
По результатам второго этапа оптимизации pop-up корзины конверсия на десктопе выросла на 14%, переход из корзины на страницу оформления заказа — на 8%. На mobile — на 27% и 22% соответственно.
Почему будущее за дизайном по подписке?
Сайт должен постоянно развиваться вместе с бизнесом, соответствовать новым задачам и потребностям пользователей. Постоянное улучшение UX/UI можно обеспечить только подключив к работе над проектом специалистов в проектировании, дизайне, оптимизации конверсии и бизнеса анализе.
Иметь такую команду в штате не всегда возможно и рационально, поэтому будущее за subscription business model. Суть такого подхода заключается в том, что вы ищете не подрядчиков, а партнеров, которые постоянно поддерживают ваш проект, улучшая пользовательский опыт и расширяя внутреннюю экспертизу команды.
Начните изменения своего сайта с анализа его текущего состояния, устраните все критичные для конверсии ошибки и переходите на дизайн по подписке. Только такая гибкая модель поможет вашему бизнесу всегда держаться на плаву, быстро адаптироваться к изменениям рынка, трансформации бизнеса и появлению новых тенденций.
Поделиться постом в:
Больше кейсов от турум-бурум?
Ознакомьтесь с нашим портфолио из различных сфер бизнеса.
Смотреть портфолио