Омниканальный
eCommerce для Сплава

1. Вводная задача от заказчика, проблематика, цели

Сплав — производитель одежды и снаряжения для туризма с розничной сетью из 30+ собственных и 30+ франчайзинговых магазинов.

Две категории клиентов Сплава — туристы и любители тактического снаряжения. Всё это люди, которые интересуются походной экипировкой и одеждой. Осенью 2022 года случился большой наплыв посетителей, магазины и сайт с трудом справлялись с нагрузкой. Кроме того, из-за внешнеполитической обстановки участились попытки взлома и проведения DDoS-атак.

❇️ Задача

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

🔥 Решения

• Спроектировали для нового сайта headless-архитектуру, готовую к масштабированию.
• Реализовали омниканальность для розничной сети из 60+ магазинов, в том числе франчайзинговых, чтобы пользователи могли бесшовно заказывать товары из разных городов и торговых точек, а также пользоваться программой лояльности на одинаковых условиях.
• Обеспечили быструю работу интернет-магазина на низкопроизводительных устройствах и телефонах, которыми чаще всего пользуются туристы.

🔸🔸🔸🔸🔸

🔥 Вместе с командой Сплава перезапустили процессы продаж и сделали упор на омниканальность.

У бренда три варианта продаж:

• 1️⃣ со склада интернет-магазина;
• 2️⃣ из розничных магазинов в другом городе с курьерской доставкой;
• 3️⃣ из магазинов своего города с доставкой курьером, в ПВЗ или Click&Collect.

Покупатель мог захотеть добавить в корзину один товар со склада интернет-магазина, а второй — из франчайзингового магазина в другом регионе. Мог захотеть самовывоз из розничной точки, в то время как фактически для какого-то из товаров была доступна только курьерская доставка.

Мы переработали систему так, чтобы процесс заказа и выбора доставки был понятен, а сложностей не возникало ни на стороне Сплава, ни у покупателя.

В интерфейсе пользователь выбирает только способ доставки — курьером или самовывозом. С технической точки зрения реализована сложная логика и проработаны все возможные сценарии:

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

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

❇️ Стали выбирать службу доставки за пользователя автоматически

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

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

❇️ Упростили выбор пунктов самовывоза

С самовывозом поступили иначе. Ранее адреса и другие данные по ПВЗ показывались в нескольких разных интерфейсах, относящихся к разным службам доставки. Т.е. пользователь мог наглядно (единовременно) сравнить на карте лишь ПВЗ одной курьерской службы. Чтобы сравнить все ПВЗ, приходилось открывать интерфейсы курьерских служб по отдельности и пытаться запомнить условия. Если служб доставки много, как у Сплава, то сравнивать условия по ПВЗ таким образом неудобно и долго.

Мы объединили все ПВЗ в один вариант доставки «Самовывоз». После выбора этого варианта открывается интерфейс с картой, на которой отображаются все ПВЗ всех подключенных служб доставки с ценами, сроками, графиком работы и фильтром по названию службы. Это позволяет выбрать подходящий вариант быстрее и удобнее.

❇️ Упростили оформление заказа для постоянных клиентов

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

🔸🔸🔸🔸🔸

🔥 Разработали сервис обмена данными с учетными системами франчайзи.

Часть магазинов Сплава работает по франшизе, а в ERP головной компании нет информации о наличии товаров на складах франчайзи. Мы разработали сервис, через который на сайт поступают данные об остатках во франчайзинговых магазинах. Сведения из ERP-систем франчайзи обрабатываются, стандартизируются и попадают на сайт, минуя основную систему учета.

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

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

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

🔸🔸🔸🔸🔸

🔥 Снизили нагрузку на колл-центр, автоматизировав ответы на популярные запросы.

На колл-центр Сплава шла огромная нагрузка. Причем 80% ситуаций относились к четырем категориям:

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

❇️ Где мой заказ?

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

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

Также для отслеживания статуса заказа мы внедрили СМС-рассылку и телеграм-бота. Пользователям даже не обязательно заходить на сайт, чтобы узнать, где находится их заказ. Бота можно подключить на странице «Спасибо за заказ», через него идет около 10% уведомлений и он позволяет сэкономить на оплате СМС-шлюза.

❇️ Как позвонить в магазин?

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

❇️ До скольки работает?

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

❇️ Заказ подтвержден, можно оплачивать

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

⚠️ Внедрение всех этих мер помогло снизить нагрузку на колл-центр на 30%: четыре самых популярных сценария разрешаются с помощью автоматизации, пользователям не приходится звонить, а менеджерам — обрабатывать большое количество звонков с одними и теми же запросами.

🔸🔸🔸🔸🔸

🔥 Увеличили эффективность работы с пользовательским контентом

❇️ Запустили сервис #SPLAVLOOK

Туристы — сплоченное и общительное комьюнити. Раньше они делились отчетами и фотографиями на форуме Сплава, но потом форум закрылся, и площадки не осталось. На смену форуму мы разработали и внедрили на сайт Сплава сервис #SPLAVLOOK с фотографиями пользователей. Любой турист может оставить там фотографии и показать, как он ездил на Алтай или сплавлялся по Кеми, а администраторы Сплава отмечают, какие товары есть на фотографиях. Все отмеченные товары можно купить в один клик. Для пользователей это возможность поделиться опытом и впечатлениями. Для Сплава — маркетинговый инструмент, который объединяет людей вокруг бренда и дополнительно продвигает товары.

❇️ Увеличили частоту публикации отзывов на товарных страницах

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

🔸🔸🔸🔸🔸

🔥 Упростили отображение сложной размерной сетки

У Сплава собственное производство и очень подробная размерная сетка. Кроме стандартного размера, на товарах есть размеры, где указывают еще и рост, причем для одних товаров его пишут через дефис, а для других — через пробел. Скажем, 56-58/182 или 50/182-188. С точки зрения фильтрации товаров на сайте и поиска подходящего размера это неудобно: в фильтре отображалось более 15 похожих друг на друга размеров.

Для решения этой проблемы мы разработали справочник синонимов размеров. В фильтре пользователь видит «стандартный» размер, скажем, 50/180. Если пользователь отфильтрует товары по этому параметру, ему покажут товары с синонимичными размерами, например, 50/180-182, 50-52/180, 50-52/176-182, 50-52/176-180, 48-50/180 и другие. Все они подходят под фактические параметры, которые выбрал пользователь, хотя названия у них могут сильно различаться. А уже при просмотре товара человек сможет увидеть и выбрать конкретный размер и ростовку.

Мы проанализировали все варианты размерной сетки для товаров сайта и вычислили оптимальное количество размеров, которое будет показываться на странице товара без скрытия под спойлер. В результате на странице выводится не больше трех строк с вариантами размеров, а остальные скрываются под кнопкой «Еще». Таким образом, мы и не перегружаем интерфейс, и покрываем размерную сетку 80% товаров на сайте — для них все размеры видно сразу.

🔸🔸🔸🔸🔸

🔥 Радикально пересмотрели структуру главной страницы

Карточки товаров на главной странице — классическое решение в e-commerce, и на старом сайте Сплава они присутствовали.

Мы изучили данные о поведении пользователей на сайте и выяснили, что блок с товарами на главной — максимально «холодный», конверсия у него была нулевой. Трафик главной страницы был в основном брендовым, и пользователи переходили с нее в меню или в блог. Поэтому в новой версии сайта мы применили нестандартное решение, убрав карточки товаров с главной. При этом много внимания уделили удобной навигации по категориям и подкатегориям.

Также уделили внимание комьюнити и включили на главную UGC-блоки: ссылки на бренд-медиа, отзывы и в сервис #SPLAVLOOK — фото пользователей с отмеченными на них товарами Сплава.

🔸🔸🔸🔸🔸

🔥 Спроектировали личный кабинет

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

🔸🔸🔸🔸🔸

🔥 Перезапустили бренд-медиа

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

Разработали разные виды блоков, которые можно использовать в статьях. Это абзац текста, заголовок, список, разные виды представления фотографий. А еще слайдеры, группы товаров, цитаты и многое другое. Всего мы создали более 20 типов блоков.

Реализовали для редакции no-code-решение, которое позволяет изнутри административной панели «собирать» из этих блоков статьи. Для этого не нужны навыки программирования и верстки, поэтому редакция публикует материалы без нашего участия.

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

🔸🔸🔸🔸🔸

🔥 Технические особенности

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

MongoDB, MySQL, PM2, Nuxt, Vue, Node.js, Laravel, Bitrix, RabbitMQ, Redis

❇️ Архитектура

Проект работает на микросервисной архитектуре (headless commerce). 

Фронтенд-приложение вынесено в отдельный сервис. Средствами PM2 и Nuxt реализован балансировщик нагрузки и несколько инстансов приложения для распределения нагрузки между ними. 

Backend проекта вынесен в отдельный сервис. Сервис находится в демилитаризованной зоне (DMZ) и изолирован от любых внешних подключений, доступ имеет только ограниченный набор сервисов. Работа с бэк-офисом организуется только по белому списку IP-адресов.

Проект давно продвигается и пережил несколько перезапусков, на разных этапах жизни менялись URL страниц товаров и разделов каталога. Необходимо было поддержать возможность переходить по старым URL, оставленным покупателями на сторонних ресурсах (форумы, соцсети). Для этого был реализован механизм сопоставления старых и новых URL. Всего в системе срабатывает порядка 3 миллионов редиректов, для работы с таким количеством данных используется MongoDB.

❇️ Оптимизация

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

Для повышения производительности фронтенд-приложения провели следующие работы:

• Оптимизация изображений (WebP)
• Деление кода проекта на чанки с асинхронной подгрузкой
• Освобождение основного потока браузера за счет исполнения кода блоков
при непосредственном взаимодействии с ними или появлении на экране
• Использование Tailwind.css для минимального выходного размера CSS
• Отложенная гидратация динамических элементов и ее отсутствие для статичных
• Кеширование запросов к API на Redis
• Оптимизация подключения third-party-скриптов для освобождения основного
потока браузера

❇️ Механизм обмена

Интернет-магазин обменивается большим количеством информации с ERP на базе 1С, в том числе данными, которые невозможно передавать асинхронно. В частности, передаются сведения о товарах в корзине, бонусах, акциях и т. д.

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

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

3. Результаты сотрудничества

🔥 Общее

• Реализовали омниканальность для розничной сети из 60+ магазинов, в том числе франчайзинговых.
• Автоматизировали выбор способа доставки из множества предложений транспортных компаний: сервис сам выбирает самый быстрый и дешевый для пользователя способ.
• Добавили UGC-сервисы: фото пользователей с отмеченными на изображениях товарами Сплава и возможностью покупки в один клик, отзывы на товары с указанием рейтинга.

🔥 Бизнес-показатели

• На 38% сократили количество пользователей, побывавших на странице корзины и не оформивших заказ, благодаря детально проработанному UX чекаута.
• На 80% уменьшили количество неоплаченных «забытых» заказов, автоматизировав напоминания.
• На 30% снизили нагрузку на колл-центр, благодаря новым сервисам и уведомлениям.

🔥 Скорость работы

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

4. Заключение

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

Уже после окончания подготовки кейса на сайте была запущена возможность покупки подарочных сертификатов с возможностью кастомизации (от суммы до персонального поздравления) и другие сервисы. Мы продолжаем активно развивать проект.

Алексей Ревенко

руководитель отдела маркетинга и рекламы, Сплав

Компания Сплав сотрудничает с агентством Брэйнд более 3-х лет. За это время запустили совместно и поддерживали силами агентства интернет-магазин на Bitrix. Спустя 2 года в связи с высокой нагрузкой и для повышения уровня защищенности перезапустили на headless архитектуре.

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

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

Приятно наблюдать за взаимодействием агентства со смежными подрядчиками, в частности разработчиками CDP и учетной системы на 1С, SEO-оптимизаторами. Агентство инициативно, способно четко формулировать картину желаемого результата, ставить задачи при необходимости. В такого рода коммуникациях при обсуждении приоритетов занимает сторону бизнеса, проявляет заботу о финансовых результатах и комфорте пользователей.Резюмируя, можем смело рекомендовать агентство «Брэйнд», как сильного эксперта в веб-разработке и UX, открытого для общения с бизнесом и настроенного на создание пользы, при этом инициативного профессионального