«Спецавтоматика»: UX/UI корпоративного сайта с каталогом товаров и услуг

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

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

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

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

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

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