Яркий и понятный интернет-магазин снэков с адаптивом
На примере сайта российского производителя снэков рассказываем, как с помощью подхода mobile first и UX-дизайна улучшить коммуникацию с покупателем и повысить конверсию.
Компания BioFoodLab — российский производитель снэков в нише здорового питания.
Продукция отгружается в крупные федеральные сети продуктовых ритейлеров, а также экспортируется.
Необходимо было создать удобную и понятную площадку. Разработать интернет-магазин, в котором конечный потребитель может найти все линейки продукции и заказать товар с доставкой на дом.
Несмотря на то, что покупатели могут найти товар на полках гипермаркетов, в ряде случаев им удобнее заказать продукцию напрямую. Производитель устраивает акции и распродажи, предлагает снэки в наборах и другие удобные решения.
Такая коммуникация удобна и покупателю, и производителю: первым не приходится тратить время в маркетплейсах или офлайновых гипермаркетах, а последние могут общаться с пользователями напрямую, получая обратную связь.
Изначально компания использовала свой ранее разработанный сайт и планировала создать
новый для выделенной коммуникации с розничными покупателями в онлайне. Однако по итогам
обсуждения было решено доработать для этой цели текущий сайт с учетом новых трендов и
стандартов.
Так, из двух сайтов, созданных в 2018 году, был создан один — с каталогом для
розничных клиентов и с личным кабинетом для оптовиков. Проведя анализ, мы предложили
внести значительные изменения в визуальный стиль и структуру.
Мы провели аудит юзабилити сайта, и на основе этих данных разработали прототип.
На первом этапе мы утвердили с клиентом вкладки сайта: “Каталог”, “Акции”, “Блог”, “Оптовые цены”, “Сервис” (эта вкладка включает информацию о компании, о доставке и о сотрудничестве с блогерами).
На предшествующем сайте было много “лишней” информации, которая отвлекала аудиторию от покупок. Поэтому мы перенесли все корпоративные разделы в футер сайта, сделав акцент на выборе товаров и оформлении заказа. Упростили процессы выбора и оформления товара.
Согласно общерыночным трендам и статистике по данной компании, процент пользователей десктопной версии постоянно уменьшается. На момент выхода статьи, по данным на октябрь 2020 года, он составляет 60%.
К слову, наши разработчики учли один из новых трендов: сейчас сайты создают похожими на приложения, чтобы пользователь, привыкший к мобильным решениям, не ощущал принципиальную разницу и не испытывал дискомфорта.
Для компании-заказчика такой подход тоже удобен: отдельно созданные мобильные приложения требуют немалых вложений, но с точки зрения закрытия маркетинговых задач они все же не могут заменить сайт. Зато «универсальный» сайт вполне может заменить приложение.
Мobile first: акцент на пользователей мобильных устройств
После введения Mobile First Google выпустил руководство по улучшению мобильной индексации. Основным пунктом руководства стало создание адаптивных сайтов. Они используют один и тот же HTML-код независимо от устройства, а значит, контент не будет дублироваться. При этом макет и контент масштабируются, адаптируясь под размер экрана. Администрировать сайт становится проще. По сути, мобильная версия сайта ничем не будет отличаться от десктопной.
При каждом действии пользователя интерфейс выдавал определенную
реакцию — обратную связь в виде микроанимации.
“Отзывчивость” интерфейса — важный шаг в коммуникации с потенциальным
клиентом по ту сторону экрана.
UX и UI-подход в дизайне
Напомним: UX — это User Experience (дословно: «опыт пользователя»). Это понятие связано с опытом, который получает пользователь от работы с вашим интерфейсом, и с впечатлением от взаимодействия. А UI — это User Interface (дословно «пользовательский интерфейс») — то есть то, как выглядит интерфейс (цвета, дизайн, удобное расположение кнопок, понятный текст и так далее). Согласно принципам UX и UI-дизайна, удобство интерфейса так же важно, как и внешний вид.На прежнем сайте товары сортировались по категориям, но на нем отсутствовали фильтры и теги для поиска. Теперь на сайте можно быстро найти продукцию с конкретным вкусом и определенного вида, например, безглютеновые снэки.
В адаптивной версии разработали удобную навигацию и фильтрацию каталога на смартфоне.
На этапе анализа мы выяснили, что карточка товара малоинформативна и нуждается в доработке. В карточке был ранее размещен текст, который сложно воспринимался визуально. Кроме того, пользователю было неудобно искать другие вкусы и дополнительную информацию о товаре.
На прежнем сайте карточки товара подразделялись на 3 типа:
карточка монотовара — это карточка с товаром одного вкуса (например, бокс батончиков определенного вида со вкусом малины);
карточка ассорти — в такой карточке комбинируются разные вкусы одного товара в одной коробке (например, батончики с 5 разными вкусами);
карточка бокса — наборы содержат разные категории товаров с разными вкусами (печенье, конфеты, крекеры, батончики с 10 разными вкусами).
Чтобы понять, что содержит в себе ассорти, пользователю приходилось тщательно изучать
неудобную карточку товара.
В худшем случае эта информация оставалась незамеченной пользователем, и он быстро
покидал страницу.
Поэтому мы предложили разработать для ассорти и боксов отдельную карточку товара с блоком вкусов и типов батончиков. Все эти сведения удобно просматривать и с десктопа, и с мобильного устройства. У пользователя есть возможность легко и быстро переключаться с одного вкуса в карточке на другой.
В результате на сайте разместили 2 карточки товара: для монотовара и для наборов с монотоварами.
У каждой категории товара в карточке появился свой логотип.
Разработаны иконки для акций и вкусов.
На каждом наборе предусмотрены выпадающие поп-апы с изображением вкуса.
В категории товара появились хедеры и футеры.
Кастомная форма заказа стала проще, чем в используемой ранее версии Bitrix. В нее мы включили информацию о доставке для пользователя. На смартфоне поля могут заполняться автоматически.
Чтобы пользователь не покинул форму заказа для авторизации или регистрации, мы предусмотрели эти опции прямо в корзине.
Город доставки определяется автоматически и может быть изменен пользователем. Клиент может сразу увидеть стоимость доставки до выбранного города.
Команда обновила платформу сайта 1С-Bitrix до подходящей версии, интегрируя сайт с CRM-системой.
Заказы попадают напрямую в CRM.
При заказе и других действиях зарегистрированного пользователя активируются цепочки
триггерных и транзакционных писем благодаря проведенной интеграции с сервисом
еmail-рассылок Unisender.
На сайте появился раздел в виде блога с полезными статьями. https://bite.ru/blog/
Подытожим: в рамках UX- и UI-подхода наша команда изменила структуру и визуальную составляющую исходного сайта. Кардинально изменилась карточка товара, форма заказа и оплаты. На сайте появился удобный каталог для пользователей смартфонов. Для оптовиков предусмотрен понятный и функциональный личный кабинет.
Если говорить об основной цели, то на старте мы определили ее как увеличение конверсии. Этот показатель будут более информативным через несколько месяцев, но первые результаты заметны уже сейчас. На иллюстрации показана динамика.
До редизайна сайта страницы загружались достаточно долго из-за тяжелых картинок, что затрудняло взаимодействие с интерфейсом. По завершении проекта время загрузки сайта заметно сократилось. Путь клиента стал четким и понятным за счет эргономичности и функциональности.
Изначально компания планировала разработку нового сайта на базе старого для розничных покупателей в онлайне. Однако в результате совместных обсуждения команды пришли к выводу, что необходимо создать отдельный поддомен для оптовиков. В ближайшее время он станет доступным для пользователей.
В личном кабинете оптовика пользователь сможет увидеть специальные оптовые цены и сделать заказ. Автоматизированные решения упростят процесс разделения и обработки лидов и разгрузят менеджеров, работающих по входящим заявкам.
Следующими этапами после разработки является техподдержка сайта, а также доработка некоторых элементов и SEO-оптимизация.
105318, Москва,
ул. Ткацкая, дом 5, cтроение 2
Работаем по будням с 9:00 до 19:00
420111, Казань,
ул. Островского, дом 57Б
Работаем по будням с 9:00 до 19:00