«Строительный БУМ» — перезапуск интернет-магазина для сети с 3 млн + покупателей в месяц

«Строительный БУМ» — крупнейшая сеть гипермаркетов строительных и отделочных материалов. Компания развивает сеть в регионах Урала и Приволжья: сегодня открыто 18 магазинов в четырех регионах страны.

- 3 млн + покупателей ежемесячно

- 100 тыс + товаров

- 26 лет на рынке

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

Если коротко, мы:

- провели предпроектную аналитику и четко сформулировали запросы клиента;

- провели конкурентный анализ и выделили лучшие UX-решения в e-commerce;

- создали новый, современный дизайн сервиса с нуля;

- пересобрали сайт на легко масштабируемом фреймворке;

- провели ручное тестирование для оперативного выявления и устранения ошибок; 

- настроили обмен с 1С;

- реализовали множество интеграций — PayKeeper, SMS.ru, Яндекс Карты, Yandex SmartCaptcha, DaData. 

А теперь обо всем по порядку.  

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

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

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

Выписали интересные решения и составили фич-лист (ниже скрин с частью анализа). 

И небольшая часть фич-листа. 

Дополнили фич-лист своими наработками, согласовали с клиентом и собрали новую информационную архитектуру сайта. 

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

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

В «СтройБУМе» 100 000+ товаров, поэтому дизайн должен был не отвлекать от главного, а помогать выбирать. При этом важно было сохранить ДНК бренда: перенести айдентику офлайн-магазинов в диджитал и собрать современный, понятный интерфейс.

Мы предложили сдержанную концепцию в фирменных цветах бренда и согласовали её уже со второй итерации.

Организовали UI-kit. 

И вот как теперь выглядят основные экраны. 

Мы выбрали RESTful-архитектуру: 1С-Битрикс использовали как API, а фронтенд собрали на Vue/Nuxt. Это позволило снять ограничения платформы, повысить безопасность, обеспечить масштабируемость и реализовать PWA, чтобы сайт работал быстро, стабильно и выдерживал рост нагрузки. 

Дополнительно подключили инструменты, которые делают проект управляемым и прозрачным:

- storybook — чтобы изолированно разрабатывать и тестировать интерфейсные компоненты. Это ускоряет работу и снижает количество визуальных ошибок*

- swagger — для понятной и актуальной документации API. Удобно и для текущей команды, и для тех, кто подключится позже*

- grafana — для мониторинга состояния системы и быстрого реагирования на возможные сбои.

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

1С выступает мастер-системой — все изменения товаров идут именно из неё и автоматически появляются на сайте. Например, так формируется каталог сезонных товаров. 

А ещё через 1С синхронизируются дисконтные карты и типовые цены для городов. У каждого города свой каталог: номенклатура разная, всего 18 каталогов, и при переключении города сайт мгновенно пересобирает каталог, показывая актуальные товары и цены для конкретного региона.

У «СтройБУМа» в b2b-направлении за каждым городом закреплён свой представитель. Он работает «в полях» — приезжает к партнёру и заключает сделку на месте.

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

Мы настроили CRM так, чтобы представители могли действовать автономно:

 — формировать заказ прямо на встрече;

 — видеть актуальные остатки;

 — автоматически применять свои цены;

 — собирать и отправлять КП клиенту в моменте.

Ожидаемый результат — быстрее обработка заказов, меньше операционной рутины и выше конверсия за счёт скорости и точности работы с клиентами.

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

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

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

А ещё: 

- интегрировали Yandex SmartCaptcha, чтобы защитить сайт от спама и ботов. Это повысило безопасность сервиса;

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

Доработали поиск — добавили удобную фильтрацию и сортировку. Теперь пользователю удобнее ориентироваться в большом ассортименте товаров. 

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

На сайте используется множество номенклатур и единиц измерения, которые подтягиваются из 1С. Мы настроили логику пересчёта: система умеет конвертировать значения и упрощает расчеты. Например, зная квадратуру помещения, можно быстро понять, сколько потребуется погонных метров материала. Получилась MVP-версия умного калькулятора, который помогает покупателям правильно рассчитывать кратность упаковки строительных материалов. 

Добавили модуль отзывов с модерацией через административную панель. Теперь по всем товарам на основе этих отзывов автоматически формируется рейтинг. А ещё напрямую через 1С на сайт подтягиваются сертификаты качества товара. Так информация всегда остается актуальной и не занимает время сотрудников на ручное обновление. 

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

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

Мы только закончили основные работы по сайту, но уже строим большие планы на будущее вместе с клиентом. Из ближайшего — хотим реализовать приложение и полноценный B2B-кабинет. 

Мы разобрали процессы, навели порядок в архитектуре, автоматизировали b2b-направление, подружили сайт с 1С и собрали современный, быстрый и масштабируемый сервис. Теперь интернет-магазин не тормозит бизнес, а помогает ему расти.

1. Перезапустили интернет-магазин с нуля на современной масштабируемой архитектуре.

2. Автоматизировали обработку заказов и снизили нагрузку на сотрудников.

3. Интегрировали сайт с 1С (товары, цены, остатки, каталоги по регионам).

4. Ускорили работу B2B-направления за счёт внедрения CRM и мобильного сценария продаж.

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

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

7. Улучшили качество данных и сократили ошибки через интеграции (DaData, SMS, карты).

8. Повысили безопасность и стабильность системы.

9. Подготовили платформу к масштабированию (PWA, B2B-кабинет, дальнейшая автоматизация).