Еcom-платформа производителя товаров для экстремального туризма Bask, куртку от которого носит Путин

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

Разработали единую ecommerce-платформу, объединяющую интернет-магазин и корпоративный портал, что позволяет разным ЦА бренда быстро и удобно решать свои задачи на одном сайте.

— Обеспечена миграция и нормализация данных из разных источников: все эталонные данные хранятся в PIM.

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

— Реализован дизайн, одновременно транслирующий ценности бренда и обеспечивающий визуальную маркировку разделов сайта для каждой ЦА.

— Обеспечена высокая производительность и отказоустойчивость в периоды пиковой нагрузки.

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

Вне зависимости от принадлежности к одной из очень разных ЦА (розничные клиенты / дилеры / спортсмены-энтузиасты / фанаты бренда), любой пользователь попадает в нужный раздел и решает свои задачи в удобном интерфейсе.

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

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

Компания Bask — российский производитель одежды и снаряжения для туризма, в том числе экстремального. Бренд Bask на рынке уже более 30 лет и имеет репутацию одного из самых надёжных, технологичных и дорогих. У компании собственная лаборатория при производстве и стек запатентованных технологий.

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

1) Разные ЦА периодически путались и попадали «не на свой сайт».
2) Каждый сайт имел свой технологический стек (в обоих случаях устаревший), функционировал на собственной CMS и управлялся отдельной командой.
3) Не существовало источника эталонных данных об ассортименте, а работающие обмены данными были неоптимальными с точки зрения технологического ландшафта.

Кроме того, интернет-магазин не выдерживал высоких нагрузок в пиковые периоды.

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

Особые требования предъявлялись к дизайну: каждая страница должна была транслировать ценности и характер бренда через визуальную коммуникацию; также требовалось обеспечить визуальное кодирование страниц для разных ЦА.

—----------------------------------------------

Решение

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

В результате мы разделили работу на ключевые блоки, каждый из которых решал свою часть общей задачи.

Понятный дизайн с сильным характером

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

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

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


Всегда актуальный каталог для каждой ЦА

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

— Мы реализовали PIM-систему, обеспечив миграцию и нормализацию данных из нескольких источников. Благодаря этому все эталонные данные теперь хранятся в одном месте: номенклатура, характеристики, остатки, описания, технологии, фото и т.д. Благодаря работающим обменам с PIM данные в любом из каталогов всегда актуальны.

— В процессе миграции данных сохранили не только основные характеристики, но и социальные доказательства: отзывы, вопросы пользователей и ответы на них. При этом не только сохранили старые соц доки, но и реализовали единую систему модерации новых отзывов и вопросов из админ-панели.

— В разделе «Каталог» реализовали возможность переключения между каталогом интернет-магазина и каталогом для дилеров. Благодаря этому частный покупатель видит актуальные товары в наличии, а дилер — в том числе товары новых и будущих коллекций, которых пока нет в продаже.

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

— Поскольку товары Bask дороже большинства аналогов, их цена должна быть аргументирована. Поэтому, помимо описаний и характеристик, для каждого товара реализован блок с используемыми технологиями: каждая технология в списке раскрывается и подробно описана/проиллюстрирована. Вся информация об используемых технологиях также хранится в PIM.

— Для большого числа товаров реализован блок «История модели», где покупатель может ознакомиться с тем, как товар развивался и совершенствовался с каждой новой версией (некоторые товары товары представлены в восьмом поколении). Это решение также позволяет аргументировать цену и хорошо иллюстрирует качество.

Скорость, безопасность и отказоустойчивость

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

Благодаря использованию микросервисной архитектуры платформы, развернутой в Yandex Cloud на управляемом Kubernetes-кластере была обеспечена высокая скорость и отказоустойчивость платформы даже в условиях большого трафика. Также был предусмотрен ряд мер безопасности, ограничивающий несанкционированный доступ извне и исключающий потерю данных.

Спецразделы, транслирующие ценность компании и товаров

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

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

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

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

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

— Проект представляет собой ecom-платформу, построенную на микросервисной архитектуре (более 20 сервисов) с использованием платформы Ensi, обеспечивающей стандартизацию и ускорение разработки. Все компоненты развернуты в Yandex Cloud на управляемом Kubernetes-кластере.

— Инфраструктура описана через Terraform и Ansible (Infrastructure as Code) и управляется через GitLab CI/CD с использованием GitLab Auto DevOps для автоматического деплоя. В качестве СУБД используется PostgreSQL, для поиска — Elasticsearch, а асинхронное взаимодействие между сервисами организовано через Apache Kafka.

— Доступ извне строго ограничен: весь трафик проходит через изолированные шлюзы, прямого доступа в инфраструктуру нет, исходящий трафик маршрутизируется через NAT-instance. Для обработки изображений применяется imgproxy, а резервное копирование реализовано с помощью K8up (на базе Restic).

— Система включает публичную часть и бэк-офис для управления контентом, товарами, скидками и SEO. Интеграции с внешними системами (Mindbox, Planfix, ERP клиента) вынесены в отдельные сервисы-коннекторы: через них осуществляется двусторонний обмен заказами, синхронизация цен и остатков, а также передача данных о новых заказах, созданных в ERP.

Скриншоты