Разработка интернет-магазина крупнейшей металлургической группы ЧТПЗ
ЗаказчикЧТПЗ входит в мировую пятерку производителей труб и ежегодно отгружает около 400 тысяч тонн трубной продукции. ЗадачаПерезапустить интернет-магазин, автоматизировать процесс создания заказа; cделать редизайн с учетом адаптива под мобильные устройства; упростить регистрацию онлайн-покупателей; расширить функционал ЛК.
Что может быть интересного в трубах? Кажется, они все одинаковые и отличаются только диаметром и толщиной. Но, разрабатывая сайт для группы ЧТПЗ, мы поняли, что это целая вселенная со своим языком и героями. Оказалось, что из труб делают множество разных вещей, среди которых огнетушители, вертолетные лопасти и иглы для шприцев. Кроме того, их используют на всех стадиях строительства — от фундамента и до забора.
ЧТПЗ входит в мировую пятерку производителей труб и ежегодно отгружает около 400 тысяч тонн трубной продукции. Огромное внимание компания уделяет экологичному и инновационному производству. Например, у группы есть проект «Высота 239» — крупнейший в Европе цех и одно из самых красивых промышленных пространств в мире. С использованием безопасных для природы технологий там изготавливают трубы большого диаметра, которые потом прокладывают, например, по дну моря или в зоне вечной мерзлоты.
Онлайн-магазин, MVP которого мы запустили в конце 2018 года, — один их немногих e-сommerce-продукт такого масштаба в российской трубной промышленности. В 2020 году он получил награду на международном конкурсе Digital Impact Awards за лучшее использование цифровых технологий в машиностроительном и производственном секторе, победил на конкурсе WEBAWARD в номинации «Manufacturing Standard» (категория «Производство») и получил серебро как лучший B2B-проект в конкурсе Tagline Awards.
Как получился такой успешный проект? Какие проблемы мы решили и какие технологии использовали? Как мы сделали сервис сквозной аналитики, где видно абсолютно ВСЁ, и зачем нам пришлось переводить тонны в метры? Рассказываем во всех подробностях.
Дело — труба: проблемы старого сайта и цели проекта
С 2016 года ЧТПЗ продавал продукцию через интернет-магазин, с которым было много проблем. Как это часто бывает в сервисах B2B, отправив заявку на продукцию, клиент не мог увидеть цену и понять, есть ли товар в наличии. Для этого нужно было звонить в колл-центр. Кроме того, на сайте плохо работали фильтры, а навигация была неудобной и слишком запутанной.
Компания решила создать новый удобный сайт, облегчив клиентам жизнь и сделав их покупательский опыт таким же комфортным, как если бы они зашли в любимый онлайн-магазин одежды или продуктов. Кроме того, ЧТПЗ хотел запустить онлайн-продажи для мелкооптовых и розничных покупателей, сократить издержки за счет автоматизации продаж и стать технологическим лидером отрасли.
В 2018 году мы сделали для ЧТПЗ корпоративный сайт с интерактивным конфигуратором вакансий, голосовым поиском и возможностью пройти видеоинтервью при отклике на вакансию. Интернет-магазин стал нашим вторым совместным проектом.
Какие задачи перед нами стояли
Перезапустить интернет-магазин, автоматизировать процесс создания заказа
Сделать редизайн с учетом адаптива под мобильные устройства
Упростить регистрацию онлайн-покупателей
Расширить функционал личного кабинета
Решив создать новый сайт, ЧТПЗ оказался на волне последних тенденций в e-commerce. Важный мировой тренд современного рынка — это D2C (Direct-to-Consumer), то есть прямые продажи производителей конечным покупателям. Промышленные компании все чаще выходят в e-commerce и не боятся коммуницировать с клиентами самостоятельно. Подробнее об этом можно почитать в нашем исследовании «Производитель — это новый ритейлер».
Пока промышленники не успели занять большую долю рынка, но все впереди. По данным АКИТ за 2020 год в топ-5 товарных категорий e-commerce в России входят B2C-товары: электроника и бытовая техника (28,2%), одежда и обувь (21%), продукты питания (10,2%), мебель и товары для дома (9,2%) и товары в сегменте красоты и здоровья (5,6%).
Что мы сделали
Запустили сервис онлайн-продаж. Раньше, чтобы сделать покупку, пользователю приходилось звонить в колл-центр. Теперь заказ можно оформить и оплатить по счету, который выставляется автоматически (до этого счета менеджерам ЧТПЗ приходилось составлять вручную).
Упростили регистрацию. На старой версии сайта все данные нужно было вводить вручную. Мы интегрировали сервис DaData, который подтягивает информацию о юрлице и помогает быстро заполнить форму. Теперь, когда во время регистрации клиент вводит первые три цифры своего ИНН, остальные данные — весь ИНН полностью, КПП и полное название юрлица — заполняются автоматически. Это сильно упрощает работу и спасает от ошибок.
В каталоге
Расширили карточки товаров. В B2B не принято писать открыто, что сколько стоит. Обычно сайт привлекает лидов, а условия заказа клиент узнает у менеджера. ЧТПЗ хотел вести продажи напрямую через сайт, поэтому мы дали пользователю всю доступную информацию о стоимости товара, скидках, условиях и сроках поставки.
Создали сервис для визуализации продукции. Семь тысяч видов труб очень похожи между собой, и фотографировать каждую трубу нет смысла. Мы заменили фото минималистичными чертежами и сделали специальный софт: он автоматически рисует чертеж трубы под заданные параметры — нужного диаметра и толщины стенки.
В навигации и поиске
На старом сайте фильтры и поиск были неудобными, а результаты долго загружались. Чтобы улучшить навигацию, мы:
Разбили интернет-каталог на разделы. Теперь можно выбрать трубы по типу производства, сечению и толщине стенки, а также по диаметру и виду материала. Так поиск работает гораздо быстрее.
Добавили новые фильтры. Чтобы упростить поиск, мы увеличили число фильтров. Среди новых параметров — ГОСТ, диаметр, толщина стенки, марка стали и способ производства.
Собрали словарь для поиска. Во время исследования мы увидели, что клиенты ищут товары, используя специфические наборы слов и цифр. Например, по слову «холодняк» человек искал холодную трубу, по слову «горячка» — горячедеформированную, а по «нерж» — коррозионно-стойкие. Фраза «труба 100 на 10» означала, что покупателю нужна труба с соответствующими диаметром и толщиной стенки.
Чтобы поиск реагировал на подобные запросы, мы составили специальный словарь синонимов. Теперь клиент может найти то, что ищет, используя привычный профессиональный сленг.
Научили сайт обновлять информацию о товарах. В исходной версии покупатель мог заказать товар, а потом оказывалось, что его нет на складе, и заказ приходилось отменять. Это происходило потому, что информацию о наличии товара запрашивали только после оформления заказа. Мы сильно доработали этот блок: после интеграции сайта с »1С» данные об остатках, включающие информацию о продукции, стали обновляться автоматически.
Увеличили скорость поиска. На сайте ЧТПЗ хранится около 95 тысяч SKU. У каждого SKU много характеристик: это очень большой массив данных, и поиск иногда мог тормозить. Чтобы увеличить скорость, мы предложили использовать Elasticsearch — поисковую систему, которая обеспечивает быструю навигацию по отдельным релевантным словам или связкам слов. Во время поиска данные берутся из специального хранилища, а не из общей базы, и это облегчает работу сайта.
В корзине и для оформления заказа
Дали возможность заказывать всё и сразу. Раньше, чтобы купить товары с разных складов или с разным типом доставки, нужно было создавать отдельные заказы. Мы сделали так, что в корзине можно было добавить трубы с разных складов и оформить разные виды доставки (например, что-то самовывозом, а что-то — на объект). Кроме того, у товаров появились разные статусы: «в наличии», «скоро поступит», «резерв» и новая опция оформления под заказ.
«Теперь сайт может принять почти любой заказ на любое количество товаров. Даже если чего-то не окажется на складе, этот товар просто зарезервируется, и клиент получит его, как только он поступит с завода» — Настя Блинова — Системный аналитик
Поменяли тонны на метры. Сначала сайт позволял оформить заказ только в тоннах. А некоторым клиентам нужно было заказывать трубы именно в метрах, потому что они могли не поместиться в стандартный транспорт при перевозке и на складе для хранения. Поэтому в поисковой строке многие вводили длину, а не вес. Мы настроили перерасчет стоимости заказа из тонн в метры и обратно прямо в каталоге.
«Сперва при конвертации цена сильно прыгала и могла различаться на десятки тысяч рублей (это происходило потому, что в разных базах данных различалось количество цифр после запятой, из-за этого цифры плохо стыковались друг с другом). Мы долго над этим бились и в итоге изменили логику пересчета — тогда все заработало нормально. Небольшие расхождения в цене остались, но они уже не были критичными — не более ста рублей» — Артур Гарин — Веб-разработчик
Про технологии
Мы не только использовали готовые технологические решения, но и сами писали программы. В частности, мы создали сервис, который решил проблему с отражением цены доставки. Дело в том, что раньше клиент узнавал стоимость доставки уже на этапе корзины. В этот момент сайт делал запрос в программу »1С», та рассчитывала цену и присылала ответ. Если цена не устраивала клиента, он оставлял заказ в корзине и уходил с сайта. Чтобы на сайте появились тарифы, мы создали собственное решение, которое определяет геолокацию клиента и исходя из этого рассчитывает стоимость доставки.
Сквозная аналитика
В 2019 году была запущена большая рекламная кампания сайта. Чтобы клиент мог оценить ее результаты и эффективность нового сайта, мы внедрили сервис сквозной аналитики.
Как он работает? Сервис функционирует on-premise, то есть все данные находятся в контуре клиента. 10 коннекторов вытягивают из рекламных кабинетов и других источников нужную информацию и направляют ее в базу данных ClickHouse. Туда же подтягиваются данные из »1С» о совершенных на сайте покупках и информация о клиентских путях из Google Analytics. В ClickHouse все это соединяется, передается в BI-систему и визуализируется в дашбордах — так мы видим, окупаются ли инвестиции и анализируем воронку, SEO и другие метрики.
«Так как коннекторы подключались постепенно, нужно было полностью продумать архитектуру данных в самом начале проекта, чтобы каждый раз не перестраивать систему связей таблиц с нуля. Когда коннекторов три, особенных трудностей не возникает, а вот если их шесть и половина формирует сложные по своей структуре запросы для агрегации данных, невозможно удержать в голове все тонкости, не имея четкого плана. Отдельным требованием была визуализация на дашбордах таблицы с рекламными кампаниями и такими метриками, как сумма рекламной кампании, количество реализаций, доход с реализаций, тоннаж, реальный доход и так далее. Кроме того, все они должны были фильтроваться по целому списку показателей. Для этой задачи использовались 6 коннекторов, 4 итоговых таблицы и еще около 6–7 промежуточных» — Таня Дидова — Веб-аналитик
Кроме того, мы интегрировали в систему информацию о клиентах, которые пишут в чаты поддержки или звонят в кол-центр ЧТПЗ. Для этого мы разработали конвектор для импорта данных из чата JivoSite и колл-трекинга Calltouch и Mindbox, автоматизирующего маркетинговые коммуникации.
«В итоге у ЧТПЗ появилась система дашбордов, на которых есть около ста метрик для анализа. Там видно все, что нужно: сколько потрачено на рекламу, сколько заработали, что люди делают внутри сайта, как выглядит воронка и так далее. То есть это оцифровка самых важных данных в рамках продукта. В промышленности таких решений почти нет, так что компания оценила эту работу как прорыв» — Слава Жуков — Руководитель вертикали аналитики данных
Вот как в сервисе соединяются потоки данных:
Результаты проекта
Что мы в итоге сделали? Автоматизировали процесс оформления заказа, создали адаптивный интерфейс интернет-магазина, улучшили клиентский опыт, разработали и внедрили функционал онлайн-продаж и автоматизировали процесс оформления заказа.
Вслед за созданием интернет-магазина изменились и бизнес-процессы компании — например, перестроились работа кол-центра и система обработки заказов. В результате время на обработку заказа сократилось на 10–15%, а количество новых клиентов выросло на 15%. Число авторизованных пользователей за год увеличилось на 44%, число обращений в онлайн-канале — на 21%, а выставленных счетов — на 30%.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
