Все работы
+7 (495) 740 61 10 Связаться с нами

Яркий и понятный интернет-магазин снэков с адаптивом

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

Кейс BioFoodLab

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

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

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

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

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

Кейс BioFoodLab
Исходные данные

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

Этап проектирования

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

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

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

Интернет-магазины Bite | Портфолио - Фото 2
Интернет-магазины Bite | Портфолио - Фото 3
Интернет-магазины Bite | Портфолио - Фото 4
Интернет-магазины Bite | Портфолио - Фото 5
Интернет-магазины Bite | Портфолио - Фото 6
Интернет-магазины Bite | Портфолио - Фото 7
Интернет-магазины Bite | Портфолио - Фото 8
Интернет-магазины Bite | Портфолио - Фото 9
Интернет-магазины Bite | Портфолио - Фото 10
Интернет-магазины Bite | Портфолио - Фото 11
Адаптив для пользователей гаджетов

Согласно общерыночным трендам и статистике по данной компании, процент пользователей десктопной версии постоянно уменьшается. На момент выхода статьи, по данным на октябрь 2020 года, он составляет 60%.

Вместо разработки специальной мобильной версии сайта мы создали адаптивную верстку под смартфоны и планшеты. Поскольку сайт создан с учетом принципов UX и UI, необходимости разрабатывать дополнительную версию не было. На выходе получился интуитивно понятный интерфейс.
Адаптивная версия для смартфонов была разработана специально под потребности пользователей. Это не стандартный адаптив «для галочки»: в данном случае мы учитывали каждый шаг мобильного взаимодействия.
Например, увеличивали размеры иконок там, где это было необходимо или передвигали элементы так, чтобы можно было тапнуть на кнопку, держа смартфон в одной руке.
Кейс BioFoodLab

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

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

Кейс BioFoodLab

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

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

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

Кейс BioFoodLab
Кейс BioFoodLab
Кейс BioFoodLab
Кейс BioFoodLab
Кейс BioFoodLab
Кейс BioFoodLab

UX и UI-подход в дизайне

Напомним: UX — это User Experience (дословно: «опыт пользователя»). Это понятие связано с опытом, который получает пользователь от работы с вашим интерфейсом, и с впечатлением от взаимодействия. А UI — это User Interface (дословно «пользовательский интерфейс») — то есть то, как выглядит интерфейс (цвета, дизайн, удобное расположение кнопок, понятный текст и так далее). Согласно принципам UX и UI-дизайна, удобство интерфейса так же важно, как и внешний вид.
Улучшенный поиск и каталог товаров

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

Интернет-магазины Bite | Портфолио - Фото 20
Интернет-магазины Bite | Портфолио - Фото 21

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

Интернет-магазины Bite | Портфолио - Фото 22 Интернет-магазины Bite | Портфолио - Фото 23
Интернет-магазины Bite | Портфолио - Фото 24 Интернет-магазины Bite | Портфолио - Фото 25
Интернет-магазины Bite | Портфолио - Фото 26 Интернет-магазины Bite | Портфолио - Фото 27
Интернет-магазины Bite | Портфолио - Фото 28 Интернет-магазины Bite | Портфолио - Фото 29
Интернет-магазины Bite | Портфолио - Фото 30
Интернет-магазины Bite | Портфолио - Фото 31
Интернет-магазины Bite | Портфолио - Фото 32
Интернет-магазины Bite | Портфолио - Фото 33
Интернет-магазины Bite | Портфолио - Фото 34
Интернет-магазины Bite | Портфолио - Фото 35
Интернет-магазины Bite | Портфолио - Фото 36
Интернет-магазины Bite | Портфолио - Фото 37
Карточка товара

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

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

карточка монотовара — это карточка с товаром одного вкуса (например, бокс батончиков определенного вида со вкусом малины);

карточка ассорти — в такой карточке комбинируются разные вкусы одного товара в одной коробке (например, батончики с 5 разными вкусами);

карточка бокса — наборы содержат разные категории товаров с разными вкусами (печенье, конфеты, крекеры, батончики с 10 разными вкусами).

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

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

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

Интернет-магазины Bite | Портфолио - Фото 38
Интернет-магазины Bite | Портфолио - Фото 39
В карточке товара также появилась информация о способах, сроках и стоимости доставки в зависимости от нахождения клиента. Кроме того, при покупке на определенную сумму пользователь может получить бесплатную доставку, и эта информация также отображается в карточке.
Интернет-магазины Bite | Портфолио - Фото 40
Интернет-магазины Bite | Портфолио - Фото 41
Интернет-магазины Bite | Портфолио - Фото 42
Интернет-магазины Bite | Портфолио - Фото 43
В визуальную составляющую мы добавили разработанные под разные вкусы иконки. Иными словами, у каждого товара появилось своего рода брендирование.

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

Интернет-магазины Bite | Портфолио - Фото 44

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

Интернет-магазины Bite | Портфолио - Фото 45

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

Интернет-магазины Bite | Портфолио - Фото 46
Интернет-магазины Bite | Портфолио - Фото 47

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

Интернет-магазины Bite | Портфолио - Фото 48
Интернет-магазины Bite | Портфолио - Фото 49
Интернет-магазины Bite | Портфолио - Фото 50
Интернет-магазины Bite | Портфолио - Фото 51
Интернет-магазины Bite | Портфолио - Фото 52
Понятная форма авторизации и заказа

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

Интернет-магазины Bite | Портфолио - Фото 53

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

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

Интернет-магазины Bite | Портфолио - Фото 54
Интернет-магазины Bite | Портфолио - Фото 55
Интеграция с CRM и сервисом рассылок

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

Интернет-магазины Bite | Портфолио - Фото 56

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

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

На сайте появился раздел в виде блога с полезными статьями. https://bite.ru/blog/

Интернет-магазины Bite | Портфолио - Фото 57
Интернет-магазины Bite | Портфолио - Фото 58
Интернет-магазины Bite | Портфолио - Фото 59
Интернет-магазины Bite | Портфолио - Фото 60

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

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

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

Интернет-магазины Bite | Портфолио - Фото 61
Что дальше

Изначально компания планировала разработку нового сайта на базе старого для розничных покупателей в онлайне. Однако в результате совместных обсуждения команды пришли к выводу, что необходимо создать отдельный поддомен для оптовиков. В ближайшее время он станет доступным для пользователей.

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

Следующими этапами после разработки является техподдержка сайта, а также доработка некоторых элементов и SEO-оптимизация.

Над проектом работали

  • Никита Платонов Верстка
  • Андрей Рунов Руководитель проекта
  • Андрей Прохоренко Дизайнер, аналитик, проектировщик
  • Алексей Понарин Back-end разработка
  • Дмитрий Коротков Back-end разработка
  • Тимур Бахадиров Контент-менеджер
  • Юлия Петросян Руководитель проекта
Nissa Centre Корпоративный сайт компании с каталогом продукции Netris Сайт разработчика интеллектуальных решений для операторов связи и государственных структур

Ждем вас

Москва
Казань

105318, Москва,
ул. Ткацкая, дом 5, cтроение 2
Работаем по будням с 9:00 до 19:00

+7 (495) 740 61 10

420111, Казань,
ул. Островского, дом 57Б
Работаем по будням с 9:00 до 19:00

+7 (843) 245 69 25

Написать сообщение

Защита от автоматического заполнения

CAPTCHA

Введите слово с картинки*:

Отправить

Или написать на е-mail: mail@fishlab.su


Я даю согласие на обработку персональных данных и соглашаюсь с политикой конфиденциальности

Сообщение успешно отправлено

Оставьте заявку на разработку

Отправить заявку

Я даю согласие на обработку персональных данных и соглашаюсь с политикой конфиденциальности

Сообщение успешно отправлено