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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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