Перезапуск интернет-магазина бренда «Сплав»: реализовали омниканальность для 60+ магазинов и вдвое сократили время загрузки сайта

Главное о кейсе

— Запустили новый омниканальный интернет-магазин Сплава с headless-архитектурой, устойчивый к атакам и высоким нагрузкам.
— Реализовали омниканальность для розничной сети из 60+ магазинов, в том числе франчайзинговых, чтобы пользователи могли бесшовно заказывать товары из разных городов и торговых точек, а также пользоваться программой лояльности на одинаковых условиях.
— На 38% сократили количество пользователей, побывавших на странице корзины и не оформивших заказ, благодаря детально проработанному UX чекаута.
— На 30% снизили нагрузку на колл-центр, благодаря новым сервисам и уведомлениям.
— На 80% уменьшили количество неоплаченных «забытых» заказов, автоматизировав напоминания.
— Оптимизировали скорость загрузки: время до отрисовки контента сократилось в 2 раза, то есть страницы открываются вдвое быстрее.
— Обеспечили быструю работу интернет-магазина при доступе с низкопроизводительных устройств и телефонов, которыми чаще всего пользуются туристы.
— Автоматизировали выбор способа доставки из множества предложений транспортных компаний: сервис сам выбирает самый быстрый и дешевый для пользователя способ.
— Добавили UGC-сервисы: фото пользователей с отмеченными на изображениях товарами Сплава и возможностью покупки в один клик, отзывы на товары с указанием рейтинга.

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

----------------

English text: https://docs.google.com/document/d/1s5U0cvbryn4uiKLCYSv22nSUngKAjCE_yi_IHtCMMjE/edit#heading=h.gwb3ji2heveb

Как проект изменил жизнь пользователей

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

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

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

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

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

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

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

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

----------------

English text: https://docs.google.com/document/d/1s5U0cvbryn4uiKLCYSv22nSUngKAjCE_yi_IHtCMMjE/edit#heading=h.ummahroueats

Бизнес-задача и ее решение

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

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

--------------------------------------------------------------------

Решение

Спроектировали для нового сайта headless-архитектуру, готовую к масштабированию.

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

--------------------------------------------------------------------

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

У бренда три варианта продаж: со склада интернет-магазина, из розничных магазинов своего города с доставкой курьером, в ПВЗ или Click&Collect, из магазинов в другом городе с курьерской доставкой. Покупатель мог захотеть добавить в корзину один товар со склада интернет-магазина, а второй — из франчайзингового магазина в другом регионе. Мог захотеть самовывоз из розничной точки, в то время как фактически для какого-то из товаров была доступна только курьерская доставка.
Мы переработали систему так, чтобы процесс заказа и выбора доставки был понятен, а сложностей не возникало ни на стороне Сплава, ни у покупателя.

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

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

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

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

--------------------------------------------------------------------

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

На колл-центр Сплава шла огромная нагрузка. Причем 80% ситуаций относились к четырем категориям:
1) «Где мой заказ?» — хотели узнать статус покупки.
2) «Как позвонить в магазин в Воронеж?» — пользователь искал способ связаться с конкретной точкой.
3) «Почему такой-то магазин закрыт?» — разные технические вопросы о графике работы и закрытиях.
4) «Пожалуйста, оплатите заказ» — исходящие звонки покупателям, которые забыли провести оплату.

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

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

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

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

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

----------------

English text: https://docs.google.com/document/d/1s5U0cvbryn4uiKLCYSv22nSUngKAjCE_yi_IHtCMMjE/edit#heading=h.hdtf7vu1d7ex

Крафт (мастерство), реализация, технические детали

Технологии: 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 и смогли повысить производительность всей системы.

----------------

English text: https://docs.google.com/document/d/1s5U0cvbryn4uiKLCYSv22nSUngKAjCE_yi_IHtCMMjE/edit#heading=h.ubo1uc23dtee

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

1. Сделали интернет-магазин без товаров на главной странице.

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

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

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

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

3. Сгруппировали размерную сетку.

У Сплава собственное производство и очень подробная размерная сетка. Кроме стандартного размера, есть размеры, в которых указывают еще и рост, причем для одних товаров его пишут через дефис, а для других — через пробел. Скажем, 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% товаров на сайте — для них все размеры видно сразу.

4. Запустили сервис #SPLAVLOOK.

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

5. Продумали работу с отзывами.

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

----------------

English text: https://docs.google.com/document/d/1s5U0cvbryn4uiKLCYSv22nSUngKAjCE_yi_IHtCMMjE/edit#heading=h.6h6sh51zvaeo

Скриншоты

Комментарий заказчика

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

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

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

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