BigData, Bitrix, магазин: как мы разработали интернет-магазин для одной из южных розничных сетей

BigData, Bitrix, магазин:  как мы разработали интернет-магазин для одной из южных розничных сетей

Интернет-магазином сегодня никого не удивишь — инструмент полезный, особенно после пандемии COVID-19. Поэтому и разработать нечто, что будет выгодно отличаться на фоне конкурентов — сложно. Но в этом кейсе описали процесс разработки проекта на Битрикс «Золотая Нива». И BigData в заголовке не случайна — о роли этой технологии в разработке проекта напишем ниже.

Цели, которые ставили при разработке проекта

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

Потому что сайт, особенно интернет-магазин — это комплексный маркетинговый инструмент, который требует постоянного контроля и развития, уточнения бизнес-процессов. Такой подход мы в Coalla Agency и применяем в проектах для своих клиентов.

Например, в 2021 году закончили разработку интернет-магазина «Золотая нива» для холдинга «Алко-Профи». Поставленные цели были амбициозными:

  • отстроиться от конкурентов,
  • укрепить позиции бренда,
  • увеличить LTV клиентов.

Но подходы к UX/UI-дизайну сегодня качественно отличаются от тех, которые работали 5 или 10 лет назад. Недостаточно выбрать цветовую схему, отличающуюся от интернет-магазина конкурента. Для того, чтобы выйти на новый уровень, нужно создавать ценность и пользу для пользователей, помогать им на каждом шаге. Так и позиции бренда укрепляются: через формирование доверия клиентов к товарам и понятные интерфейсы, способствующие желанию совершить покупку. И остаться клиентом в будущем — это как раз способствует увеличению LTV клиента.

Идеи и их реализация

Стандартные для интернет-магазинов каталоги продукции не должны запутывать пользователя и погружать его в исследование глубин списков. Наоборот, все важное стоит размещать на виду. Поэтому у списка товаров на проекте «Золотая нива» реализована древовидная структура: для того, чтобы посмотреть вложенные категории, достаточно нажать на кнопку «+».

BigData, Bitrix, магазин:  как мы разработали интернет-магазин для одной из южных розничных сетей

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

Для удобства работы с сайтом и обслуживания заказов, для сотрудников заведены несколько ролей. Они не конфликтуют друг с другом, позволяя параллелить работу, вести отчетность, что в итоге приводит к увеличению производительности труда. Момент автоматизации заключается также в реализации импорта данных из 1С, который происходит три раза в сутки.

Особенности проекта

BigData, Bitrix, магазин:  как мы разработали интернет-магазин для одной из южных розничных сетей

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

Этапы работы над проектом

Каждый проект начинается с анализа потребностей бизнеса и портрета его аудитории. С помощью этих данных выстраиваем направление в продвижении проекта, ведь услуга сервисного обслуживания после сдачи работ — одно из преимуществ нашего агентства. При проектировании «Золотой Нивы» дизайнеры Coalla Agency вдохновлялись сайтом службой доставки «Азбуки Вкуса» — акцент в макетах сделан на функциональности и минимальном следовании различным трендам веб-дизайна.

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

BigData, Bitrix, магазин:  как мы разработали интернет-магазин для одной из южных розничных сетей

Дизайн-макеты страниц создали на основе прототипов с учетом фирменного стиля бренда, но внесли некоторые изменения: активные элементы, такие как кнопки и ссылки сделали зелеными, а фон — белым. Основным референсом при этом послужил дизайн сайта доставки «Азбуки Вкуса» — воздушный и легкий дизайн способствует отсечению ненужных действий на сайте, концентрирует внимание на достижении ключевых бизнес-показателей, а зеленый цвет, согласно исследованиям, повышает аппетит, что повышает шанс конверсии. После завершения этого этапа вместе с заказчиком приняли решение о том, что некоторый функционал требует доработок. И необходимость их внедрения была выведена путем анализа результатов UX-тестирования прототипов.

Третий этап — верстка и кодинг. Так как проект построен на Битриксе, основной функционал реализован на нем. Для сборки фронтенда в этом проекте использовался Webpack. С его помощью получилось минимизировать файлы скриптов, сократив время загрузки страницы и ее объем, что критично для мобильного трафика. Этому способствует и библиотека Ammina Optimizer, которую купили в маркетплейсе Битрикса. А сами скрипты фронтенда написаны с использованием библиотеки jquery и на чистом javascript.

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

Что еще было сделано в технической части:

  • Нетиповая интеграция с 1С. Все параметры по товарам подгружаются из 1С.
  • Персональные рекомендации построены на основе данных модуля «1C-Битрикс BigData», а похожие товары и рецепты подбираются по алгоритму.

Битрикс ввел в эксплуатацию облачный сервис персонализации «1C-Битрикс BigData» в 2014 году. Его особенность в том, что при формировании персональных подборок товаров используется статистика интереса пользователей к товарам в других интернет-магазинах с подключенным модулем.

BigData, Bitrix, магазин:  как мы разработали интернет-магазин для одной из южных розничных сетей
  • Удобные фильтры с поиском значения, сужения списка и скроллом
  • Повтор заказов из истории, проверка наличия товаров при добавлении
  • Нетиповой модуль оформления заказа, выбор пунктов самовывоза на карте
  • Избранные товары. Любой понравившийся товар можно запомнить, чтобы вернуться к решению о его покупке позже. Этот механизм позволяет формировать списки востребованных товаров.

Результат

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

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

1 комментарий

Здравствуйте!
Тоже внедрили, смотрим какой эффект. Можете ответить на несколько вопросов:
Какой технической документацией пользовались по BigData Bitrix?
Был ли смысл во внедрении? Результаты себя оправдывают?

Ответить