Дизайн для поставщика промышленных станков

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

Создать комплексную платформу для взаимодействия с клиентами, предоставления информации и стимулирования продаж.

Дизайн-задачи

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

Каталог

Проработали 6 уровней e-каталога со специфическими механиками поиска для каждого.

Карточка товара

Сложной продукции - сложная карточка товара.

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

Сборки

Товары заказчика — это конструктор, из которого собирается сложное оборудование.

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

Личный кабинет

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

Коммерческий сайт

Каталог - основной инстурмент поиска и заказа оборудования. Но для продаж нужен отдельный коммерческий сайт.

Сделали его в едином стиле с каталогом, на той же библиотеке компонентов, что обеспечивает консистентность для пользователя и удобство для разработки.

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

И еще один каталог

Коммерческий сайт включает в себя ещё один каталог: оборудование, которое поставляется под заказ. Например — станки с ЧПУ.

Проработали навигацию и сделали особые карточки товаров под такие задачи.

Шаблоны презентаций

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

Шаблоны писем

Не забыли и про почту: в 2026-м году инструмент особо актуален. Проработали дизайн подписи для десктопной и мобильной версий.

Нюансы процесса

Проект выполняли на дизайн-системе Bootstrap 5.3

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

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

Ускорили согласование концептов при помощи ИИ

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

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

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

Решили эту задачу при помощи Figma Make:

• Мы придумывали концепции и словами и схемами описывали их ИИ.

• Figma Make быстро выдавал визуализации.

• Согласовывали с закачиком, выбирали рабочие варианты.

• На их основе создавали полноценные макеты уже силами человека-дизайнера.

Некоторые цифры

Предложили 6 вариантов концептуального решения

Отрисовали в 12 стилях главную страницу

Спроектировали 25 страниц в различных состояниях

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

Всё в одном стиле, консистентно, на общей библиотеке компонентов. Это удобно пользователям, разработке и выгодно бизнесу.

Е-каталог розничной продукции

1. Общая структура и навигация

2. 6 уровней каталога со специфическими механиками

3. Поиск

4. Карточка товара с 6 табами характеристик, галереей, сценариями избранного, байблоком, формой обратной связи.

5. Сборки: сложный конфигуратор-конструктор

6. Корзина

7. Оформление заказа

Корпоративный сайт

1. Общая навигация

2. Каталог оборудования

3. Три уровня каталога

• Страница оборудования

• Таблицы конфигураций

• Заявка на оборудование

4. Шаблон контентной страницы (статья)

5. Шаблон навигационной страницы (карточки)

6. Новости

7. Сертификаты (шаблон страницы-галереи)

8. Каталоги (шаблон страницы с материалами)

9. Контакты

10. Форма обратной связи

Личный кабинет

1. Заказы

2. Поддержка

3. Настройки

4. Подбор Аналогов

5. История просмотров

6. Авторизация и регистрация

Другое

1. Дизайн шаблона подписи для электроных писем (десктопная и мобильная версии)

2. Дизайн шаблона коммерческих презентаций

3. Графический дизайн главной страницы и ключевых изображений корпоративного сайта и каталога продукции.