О проекте
КТ-Сталь — интернет-магазин металлопроката с более чем 14-летним опытом, работающий в Харькове, Киеве и Полтаве. Компания обслуживает как B2B (прорабы, закупщики, архитекторы), так и B2C сегмент.
Цель проекта: сделать покупку арматуры, металла или металлочерепицы такой же простой, как онлайн-шопинг обычных товаров: с актуальными ценами, прозрачными условиями и минимальной необходимостью общения с менеджером.
Главным вызовом было перевести офлайн-паттерны поведения (звонки менеджерам для расчета веса, порезки или доставки) в автоматизированный онлайн-флоу.
Задачи
- Редизайн сайта для масштабирования бизнеса
- Перевод продаж в онлайн и снижение роли менеджеров
- Создание удобного каталога для большой и сложной номенклатуры (2000+ позиций)
- Разработка информативных страниц товаров для разных типов продукции
- Учет специфики и паттернов поведения как B2B-, так и B2C-клиентов
- Объединение сложной логики металлопроката с простым и понятным интерфейсом.
Главная страница и навигация
Главную страницу спроектировали как полноценный инструмент продаж. Пользователь сразу видит УТП компании и ключевые категории каталога, а также может перейти к выбору товара без лишних шагов.
Кнопку загрузки прайса с актуальными ценами вынесли на первый экран и в основное меню. Отдельно подсветили сервисы: бесплатную порезку, быструю отгрузку, доставку, хранение и обмен продукции. Также добавили блоки с популярными товарами и категориями.
Каталог и поиск
Проработали каталог и его архитектуру, чтобы упростить поиск среди большого количества категорий и разных типов товаров. Для десктопа оставили открытую навигацию со всеми категориями для быстрого поиска и добавления товаров из разных категорий.
Фильтры и превью товаров в выдаче разработаны с учетом разных типов продукции, с возможностью переключения и сортировки по единицам измерения (кг, м.п., м², шт.) и характеристикам. Поиск работает как отдельный сценарий с подсказками товаров и категорий, а также возможностью сразу добавить товар в корзину.
Кастомные страницы товаров со всеми деталями
Разработали кастомные шаблоны страниц товаров для разных номенклатурных групп с индивидуальными характеристиками и опциями.
Добавили возможность заказать порезку (болгаркой или плазмой), указав размеры прямо на странице товара.
Также интегрировали калькуляторы расчета стоимости для более сложных категорий, таких как профнастил.
Информативная корзина
Корзина реализована в формате pop-up без перезагрузки страницы, чтобы пользователь мог быстро редактировать заказ. Здесь сразу отображаются актуальные цены для выбранного города, а также общий вес и длина продукции.
Цены автоматически обновляются при изменениях с уведомлением для пользователя. Товары разделены на отдельные блоки: «в наличии» и «под заказ». Также предусмотрена возможность зарезервировать продукцию на 3 дня без оплаты.
Оформление заказа
Чекаут разбили на простые и понятные шаги, которые адаптируются под тип клиента (физическое или юридическое лицо). Реализовали функционал, который автоматически анализирует вес и объем товаров, подбирает оптимальный транспорт и показывает процент загрузки автомобиля.
Пользователь может выбрать удобное временное окно доставки (утро, день, вечер) и подходящий способ оплаты: онлайн (ФОП), наличными на складе или безналичный расчет с НДС или без него.
Функциональный личный кабинет
Пользователь может просматривать историю покупок с возможностью сортировки, отслеживать статус заказов и повторять их в несколько кликов, а также редактировать и оплачивать заказы напрямую из личного кабинета.
Дизайн-система для дальнейшего масштабирования
Разработали комплексную дизайн-систему (UI кит), которая включает все необходимые UI-элементы, компоненты, их состояния и типографику. Это обеспечивает визуальную целостность интерфейса и позволяет быстро и легко масштабировать проект в будущем.
Результаты
Благодаря проработке user flow удалось создать платформу, где сложные промышленные процессы стали понятными как для B2B-, так и для B2C-аудитории.
- Автоматизация продаж: снизили нагрузку на персонал благодаря динамическому обновлению цен, калькуляторам и прозрачному чекауту.
- Mobile-friendly UX: оптимизировали мобильный опыт с «прилипающей» нижней навигацией для удобного управления одной рукой.
- Бесшовный клиентский путь: удобный поиск, кастомные страницы товаров для разных типов продукции и функциональный личный кабинет упростили процесс покупки.
- Платформа для роста: подготовили дизайн-систему, которая стала основой для масштабирования проекта без потери стилистики.
Кейс КТ-Сталь — пример того, как UX/UI-дизайн и понимание бизнес-процессов способны оцифровать такую сложную индустрию, как металлопрокат, и повысить доверие к бренду.
