Сплав. Реализовали омниканальность для 60+ магазинов и вдвое сократили время загрузки сайта

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

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

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

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

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

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

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

   •  со склада интернет-магазина;

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

   •  из магазинов в другом городе с курьерской доставкой. 

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

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

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

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

   •  Когда что-то есть только в рознице у франчайзи в другом городе, что-то — на складе интернет-магазина, а что-то — в розничной сети в городе заказа.

   •  Когда один товар можно забрать через 10 минут в магазине у дома, а второй нужно ждать неделю из другого города.

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

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

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

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

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

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

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

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

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

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

На колл-центр Сплава шла большая нагрузка. Причем 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% товаров на сайте — для них все размеры видно сразу.

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

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

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

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

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

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

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

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

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

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

На 30% снизили нагрузку на колл-центр, благодаря новым сервисам и уведомлениям.

На 80% уменьшили количество неоплаченных «забытых» заказов, автоматизировав напоминания.

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

Автоматизировали выбор способа доставки из множества предложений транспортных компаний: сервис сам выбирает самый быстрый и дешевый для пользователя способ.

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

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

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