Интернет-магазин для группы компаний СКМТ

Клиент

Группа компаний СКМТ — один из ведущих поставщиков и производителей металлопродукции в Северо-Западном Федеральном округе. Компания продаёт товары для строительства и ремонта, обустройства участков, выполняет индивидуальные заказы по чертежам клиентов и устанавливает ограждения.

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

Задача

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

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

Решение

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

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

Прототипы

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

После того, как клиент утвердил структуру страниц и логику работы, мы перешли к дизайн-концепции.

Дизайн-концепция

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

Мы показали клиенту, как его сайт будет выглядеть и работать на десктопе и мобильных устройствах:

После согласования дизайн-концепции перешли к дизайну: отрисовали 43 макета под пять разрешений, подготовили изображения для каталога.

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

Адаптивная вёрстка

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

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

Интернет-магазин и интеграция с 1С

Среди клиентов СКМТ есть физические и юридические лица. Однако потребности в расширенном сложном функционале, которым отличаются B2B-магазины, у компании не было. Мы предложили простое решение, которое решило эту бизнес-задачу — один личный кабинет плюс специальных раздел для хранения реквизитов юридических лиц. Также у юрлиц отличается форма регистрации и им доступна оплата только по безналичному расчету. 

Также для работы с компаниями мы интегрировали сайт с сервисом DaData: он позволяет автоматически заполнять адрес и реквизиты по ИНН при оформлении заказа.

Важным моментом была интеграция с 1С. Данные, которые хранятся в базе, не всегда можно использовать на сайте без доработки.

Мы создали внутренний функционал, который после завершения обмена с 1С создает связи товаров друг с другом на основе реквизитов. Например, выявляет похожие товары, сопутствующие, подходящие по цвету. Это позволяет показывать на сайте блоки рекомендаций.

У СКМТ есть весовые товары. Но дело в том, что реальный вес фасовки может немного отличаться от указанного на сайте. Если посетитель добавит в корзину, например, гвозди, он не сможет оплатить заказ до подтверждения менеджером в 1С. Товар взвесят, укажут реальный вес — изменения отобразятся в 1С — и отправятся на сайт. Такая двусторонняя интеграция позволяет вести точный учет товаров.

Бывают ситуации, когда товара на складе остается меньше, чем одна фасовка — тогда он удаляется из корзины. Например, на складе осталось 37 кг гвоздей, в фасовке 25 кг, а покупатель добавил в корзину 50 кг. В этом случае количество автоматически корректируется: в нашем случае с 50 до 25 кг. Когда пользователь зайдёт в корзину, чтобы оформить заказ, он увидит уведомление.

У «Битрикса» есть штатная персонализация — мы доработали ее, чтобы дать клиенту возможность вручную управлять блоком «Похожие товары» в карточке.

SEO

Чтобы вести пользователей из поисковой выдачи на сайт, мы создали псевдоразделы. Это разделы с URL, Title, Description, H1. Их нет в структуре сайта, все поля заполняются автоматически на на основе характеристик товаров.

Например, в разделе «Строительные гвозди» можно увидеть подборку по типу покрытия «Цинк». Фактически это равноценно применению фильтра — но у раздела есть свой постоянный URL-адрес. Он индексируется поисковыми системами и позволяет привлекать трафик по релевантным низкочастотным запросам.

Расчет доставки и интеграция с логистическими сервисами

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

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

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

Результаты

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