Монобрендовый магазин снеков Bite

На примере сайта российского производителя снэков рассказываем, как с помощью подхода mobile first и UX-дизайна улучшить коммуникацию с покупателем и повысить конверсию.

Клиент

Компания BioFoodLab — российский производитель снэков в нише здорового питания.

Продукция отгружается в крупные федеральные сети продуктовых ритейлеров, а также экспортируется.

Задача

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

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

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

Исходные данные

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

Решение

Мы провели аудит юзабилити сайта, и на основе этих данных разработали прототип.

На первом этапе мы утвердили с клиентом вкладки сайта: «Каталог», «Акции», «Блог», «Оптовые цены», «Сервис» (эта вкладка включает информацию о компании, о доставке и о сотрудничестве с блогерами).

На предшествующем сайте было много «лишней» информации, которая отвлекала аудиторию от покупок. Поэтому мы перенесли все корпоративные разделы в футер сайта, сделав акцент на выборе товаров и оформлении заказа. Упростили процессы выбора и оформления товара.

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

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

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

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

Для компании-заказчика такой подход тоже удобен: отдельно созданные мобильные приложения требуют немалых вложений, но с точки зрения закрытия маркетинговых задач они все же не могут заменить сайт. Зато «универсальный» сайт вполне может заменить приложение.

Акцент на пользователей мобильных устройств

После введения Mobile First Google выпустил руководство по улучшению мобильной индексации. Основным пунктом руководства стало создание адаптивных сайтов. Они используют один и тот же HTML-код независимо от устройства, а значит, контент не будет дублироваться. При этом макет и контент масштабируются, адаптируясь под размер экрана. Администрировать сайт становится проще. По сути, мобильная версия сайта ничем не будет отличаться от десктопной.

Улучшенный поиск и каталог товаров

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

В адаптивной версии разработали удобную навигацию и фильтрацию каталога на смартфоне.

Карточка товара

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

На прежнем сайте карточки товара подразделялись на 3 типа:

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

Чтобы понять, что содержит в себе ассорти, пользователю приходилось тщательно изучать неудобную карточку товара.

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

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

В результате на сайте разместили 2 карточки товара: для монотовара и для наборов с монотоварами.  

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

В визуальную составляющую мы добавили разработанные под разные вкусы иконки. Иными словами, у каждого товара появилось своего рода брендирование.

У каждой категории товара в карточке появился свой логотип.

Разработаны иконки для акций и вкусов.

На каждом наборе предусмотрены выпадающие поп-апы с изображением вкуса.

В категории товара появились хедеры и футеры.

Понятная форма авторизации и заказа

Кастомная форма заказа стала проще, чем в используемой ранее версии Bitrix. В нее мы включили информацию о доставке для пользователя. На смартфоне поля могут заполняться автоматически.

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

Город доставки определяется автоматически и может быть изменен пользователем. Клиент может сразу увидеть стоимость доставки до выбранного города.

Интеграция с CRM и сервисом рассылок

Команда обновила платформу сайта 1С-Bitrix до подходящей версии и интегрировала сайт с CRM-системой.

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

Блог о продукте

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

Результаты

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

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

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

Стек технологий

Webpack
SCSS
Git
Bitrix Framework

Награды

Специальный приз
Золотой сайт

Кейсы

Интернет-магазины
Магазин для бренда FIT KIT
Больше кейсов в портфолио
Все кейсы