Редизайн сайта 100CBD: как продуманный UX уменьшил bounce rate на 17%

Как с помощью интерфейса объяснить новый и сложный продукт, и даже категорию? Как транслировать преимущества компании и повысить доверие аудитории? На примере кейса 100CBD рассказываем и показываем, как редизайн сайта и оптимизация интерфейса не только уменьшили показатель отказов на 17% и увеличили время пребывания на сайте на 198%, но и подготовили бизнес к росту трафика.

О проекте: цели, задачи и запрос владельца

100CBD — это украинский премиальный бренд натуральных БАДов на основе каннабидиола (CBD) и фракционного кокосового масла, которые помогают повысить резильентность, снять мышечные спазмы, улучшить сон и уменьшить эмоциональное напряжение. Благодаря высокой точности концентрации, удобству использования и разнообразию вкуса бренд завоевал доверие клиентов и врачей.

Клиент обратился в Турум-бурум в момент запуска B2C-направления, чтобы усилить собственный e-commerce-канал. До 2023 года бренд преимущественно работал через офлайн-дистрибуцию. Однако из-за блэкаутов, общего роста усталости и проблем со сном среди украинцев компания сделала акцент на онлайн-продажи.

Основные задачи проекта:

• Подготовка сайта к росту трафика. Маркетинг должен был привести новых клиентов, поэтому надо было обеспечить им легкий и понятный путь к покупке.
• Трансляция премиальности бренда через интерфейс. Создание дизайна сайта, где каждый элемент подчеркивает преимущества компании, качество, научный подход и уникальность продукта.
• Повышение доверия и лояльности. Надо было добавить социальное доказательство, то есть отзывы клиентов и врачей для увеличения доверия новых пользователей к компании и продукту в целом.
• Информативность и повышение уровня осведомленности аудитории. Обеспечить легкий доступ ко всей необходимой информации, чтобы пользователи легко находили ответы на свои вопросы о компании и продукте.
• Оптимизация пользовательского пути. Устранение барьеров и сокращение лишних шагов в воронке на пути к покупке.

Как мы работали над 100CBD: подход, анализ и результаты юзабилити аудита

Работа над проектом началась с глубокого анализа ниши бизнеса, его целей, поведения пользователей и исследования конкурентов. Кроме UX-аудита сайта, анализа данных аналитики и тепловых карт, мы также проработали клиентские данные по восприятию товара. Бренд предоставил нам результаты опросов, которые они проводили как среди покупателей, так и среди тех, кто не совершил покупку, что позволило нам лучше понять барьеры на пути к конверсии. Учитывая реальные отзывы и потребности пользователей, мы смогли выявить ключевые проблемы юзабилити и точки роста и предложить решения, которые действительно работают в интересах аудитории:

• 97% посетителей — новые пользователи, однако они часто быстро покидают сайт, поскольку не находят ключевой информации. 
• Главная страница — основная точка входа и стартовая площадка для 50% пользователей, но 48% выходят, так и не поняв, что такое CBD, для чего он им и каковы его преимущества. 
• Страница "О CBD" вторая по популярности как точка входа, но первая как выхода с exit rate 55%. Пользователи проводят на странице не более 2 минут и часто уходят, не найдя ответов на свои вопросы.
• 75% трафика с мобильных устройств, но время пребывания вдвое меньше чем на десктопе, указывая на то, что мобильный интерфейс нуждается в улучшении и большей адаптации под различные девайсы.
• Около 76% пользователей покидают воронку на странице товаров, не найдя достаточной информации для принятия решения.
• Лишь 1,5% пользователей проходят воронку до конца и завершают покупки, а 98,5% сталкиваются с различными препятствиями и выходят с сайта на разных этапах.

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

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

Мы начали работу с 100CBD в ноябре 2023 года, а уже в июле 2024 обновленный сайт запустили, на основе наших прототипов и рекомендаций. 

Главная страница: удерживаем внимание, ведем к покупке

‍Проблема: непродуманная структура страницы

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

Решение: Добавить на первые экраны ключевую информацию о продукте, его ценности и пользе. Внедрить блоки с описанием товара, преимуществами, отзывами, FAQ и рекомендациями.

Реструктуризация главной страницы позволила уменьшить показатель отказов на 27% и привлечь пользователей двигаться дальше по воронке.

‍Проблема: отсутствие информации о преимуществах бренда и места продажи

Блоки типа "Made in Ukraine" и "Пшикай и поддерживай спокойствие" выглядели красиво, но не предоставляли реальных причин выбрать этот бренд. Также отсутствие блока с местами офлайн-продажи заставляло пользователей самостоятельно искать информацию где можно приобрести продукцию кроме как онлайн.

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

‍Проблема: невозможность добавить товары в корзину без перехода на страницу товара

На плитках товара на главной странице не было кнопки "Купить", что заставляло постоянных пользователей делать лишние шаги. На мобильной версии было не очевидно, как просматривать все товары, из-за чего пользователи просто не замечали другие предложения.'

‍Решение: Добавить кнопку "Купить" непосредственно на превью товаров на главной странице. А для мобильной версии реализовать удобную прокрутку, позволяющую легко просмотреть весь ассортимент. 

Дизайн главной страницы сайта: что учесть?

‍Главная страница — это визитная карточка вашего интернет-магазина и первое впечатление о вашем бизнесе. И если за несколько секунд пользователь не поймет, что вы предлагаете и почему ему это нужно, он просто закроет вкладку.

Чтобы этого не произошло, главная страница должна отвечать на три вопроса:

• Что это за магазин и что здесь предлагают? Добавьте яркие баннеры с продукцией и объяснением, какие боли пользователя закрывает.
• Почему это стоит купить? Выделяем главные преимущества компании, добавляем социальное доказательство и отвечаем на часто задаваемые вопросы.
• Что здесь можно приобрести? Обеспечиваем достаточное количество точек входа и пути к покупке.

Главная страница должна не просто знакомить пользователя с брендом, но и привлекать его двигаться дальше по воронке продаж, и закрывать возможные сомнения еще до того, как он пойдет искать альтернативы.

Список товаров: упрощаем выбор и сокращаем путь пользователя

‍Проблема: недостаточная информативность и удобство плиток товаров

‍На этапе просмотра каталога пользователи, особенно новые, не могли быстро найти ответы на ключевые вопросы: "Что это за товар?", "Легален ли он?", "Как его использовать?" или "С какими проблемами поможет?". Это заставляло их покидать страницу или переходить на другие разделы сайта. К тому же отсутствие кнопки "Купить" на превью не давало возможности быстро добавить товар в корзину, что создавало лишние шаги в процессе покупки.

‍Решение:

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

‍Проблема: слишком большие фото товаров в мобильной версии

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

‍Решение:

‍Оптимизировать размер изображений в мобильной версии, чтобы пользователи видели ключевую информацию о товаре на одном экране. 

В результате редизайна показатель выходов со страницы списка товаров уменьшился на 8%, а продолжительность сессии на странице списка товаров увеличилась на 32%.

Дизайн страницы списка товаров: на что обратить внимание?

Список товаров — это витрина, где пользователь изучает ассортимент вашего интернет-магазина и ищет нужный ему товар. Если информация неочевидна, а выбор кажется сложным, пользователь покинет сайт или потратит слишком много времени на поиски.

Чтобы избежать этого, важно:

• Добавлять ключевую информацию прямо на превью товара (качественное фото товара, название, краткое описание, цена, рейтинг);
• Обеспечить возможность быстрой покупки без лишних шагов;
• Оптимизировать отображение товаров в мобильной версии, чтобы пользователи видели все необходимое на одном экране.

Простой и понятный каталог помогает сократить путь пользователя к покупке и сделать процесс выбора легким и приятным.

Страница товара: информативность, удобство, функциональность

‍Проблема: недостаточно информации для принятия решения

50% пользователей доходят до конца страницы, но не переходили к покупке и покидали страницу товара, не найдя нужных деталей: информации о других вкусах, концентрации, а также деталей о доставке, оплате, возврате и сертификации качества. Отзывы выглядели растянутыми, не показаны оценки из которых сформирован рейтинг, что затрудняет их восприятие.

Решение: Реорганизовать структуру страницы и добавить:

• короткий блок с информацией о доставке, оплате и возврате;
• ссылка на сертификацию продукта;
• компактный формат отзывов с рейтингами и горизонтальным скроллом;
• интерактивные блоки с рекомендациями похожих товаров (другая концентрация или вкус) рядом с кнопкой "Купить";
• FAQ, который отвечает на самые распространенные вопросы пользователей.

‍Как результат количество выходов со страницы товара уменьшилось на 45%. 

Дизайн страницы товара: на что обратить внимание?

Страница товара — это место, где пользователь принимает окончательное решение о покупке. Если здесь не хватает ключевой информации, пользователь пойдет искать ее в другом месте, а в худшем случае у вашего конкурента.

Чтобы не потерять пользователя на этом этапе, на странице товара важно:

• Предоставить всю необходимую информацию о товаре и его вариации (фото, характеристики, концентрации, вкусы, форматы как в случае 100CBD);
• Проинформировать о доставке, оплате, возврате и сертификации;
• Добавить социальное доказательство в виде отзывов и оценок других пользователей;
• Добавить рекомендации похожих товаров, чтобы не потерять пользователя и предоставить ему альтернативу выбора.

Оформление заказа: упрощаем и сокращаем

‍Проблема: запутанный и сложный процесс оформления заказа

Около 50% пользователей покидали страницу оформления заказа из-за непонятной структуры формы, сложности полей для разных типов доставки и путаницы с названием страницы ("Корзина" вместо "Оформление заказа"). Кроме того, кнопка "Оплатить заказ" при выборе способа оплаты при доставке сбивала пользователей с толку.

Решение: Упростить структуру формы, сделать ее более компактной (2/3 экрана), адаптировать поля к различным типам доставки, а название страницы изменить на "Оформление заказа". Кроме того, кнопка "Оформить заказ" информирует пользователя о подтверждении заказа, независимо от того, какой способ оплаты выбран.

Дизайн страницы чекаута: что следует учесть?

Если пользователи покидают страницу оформления заказа, это не просто потеря потенциальной покупки — это сигнал о критических ошибках юзабилити. Простота и понятность процесса здесь играют важную роль.

Для того, чтобы не терять потенциальных покупателей на этом этапе, важно:

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

Изменения — это окно возможностей: результаты редизайна сайта 100CBD

Во время работы над проектом мы провели юзабилити аудит сайта, создали прототипы и передали их команде дизайнеров заказчика для реализации. На каждом этапе имплементации изменений обеспечивали авторский надзор, чтобы все UX/UI решения были внедрены корректно для достижения поставленных задач (улучшение юзабилити и оптимизация конверсии).

Главной целью было создание дизайна сайта, который соответствует премиальному позиционированию бренда, удовлетворяет потребности пользователей и выполняет бизнес задачи. И вот, чего мы достигли:

• Количество пользователей выросло в 6 раз;
• Показатель отказов снизился на 17%;
• Продолжительность сессий мобильных пользователей выросла на 32%;
• Выходы со страниц товаров сократились на 45%;
• Сессии со страниц товаров стали длиннее на 198%.

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

Изменения — это окно возможностей. Поэтому не ожидайте конверсий, а создавайте все условия для того, чтобы они росли. Удобный интерфейс — это одна из ступеней к этому.