«Бреслер»: создали сайт и каталог с удобной навигацией для технических специалистов

Аналитика UX/UI дизайн Frontend Backend

Обсудить проект

bresler.ru

Клиент

Научно-производственное предприятие «Бреслер» создает высокотехнологичное оборудование для автоматизации и защиты энергетических объектов. Компания входит в топ-3 предприятий в своей отрасли по Чувашской Республике и работает с крупными госконтрактами. Например, компания поставляла оборудование для безопасности и автоматизации подстанций на объектах чемпионата мира по футболу FIFA 2018.

Задача

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

У старого интернет-ресурса было несколько проблем

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

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

Аналитика

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

Этапы	Появление потребности	Изучение рынка, сбор информации	Выбор услуги, расчет проекта	Заключение договора, оплата счета
Потребности	На объекте существует потребность в защите или автоматизации энергосистем	Выбор надежного подрядчика по разумной цене	Поиск наиболее эффективного и безопасного оборудования в рамках бюджета, в том числе с монтажом	Фиксация обязательств и гарантий безопасности
Действия	Поиск решения для обеспечения объекта необходимой инфраструктурой	Изучение предложений компаний, опыта и условий	Изучение каталогов, получение консультаций, документации, чертежей и схем	Проверка договора юристами, подписание документов, предоплата
Чувства	🧐	🧐	😖	😌
Возможности для взаимодействия	Тендерные площадки, интернет, рассылки, коммуникация со специалистами	Информирование об истории компании, демонстрация отраслевых решений, демонстрация техвозможностей продуктов, отправка документации, помощь в создании проекта или технического решения	Возможность скачать документацию, получить каталог, фото оборудования, изучить характеристики оборудования в понятной форме, узнать о техподдержке, шефмонтаже и пусконаладке оборудования	Профессиональный шефмонтаж, пусконаладка, проверка системы

Решение задачи

Добавили отдельный раздел «Решения», где продукция заказчика отсортирована по отраслям промышленности. Это ускорило поиск нужных продуктов для специалистов из разных отраслей. Например, специалист, который работает в химической промышленности, может зайти в нужный раздел и сразу увидеть подборку продуктов для его задач.

Меню-каталог

Важно было структурировать все продукты компании и создать понятный каталог с удобной навигацией. Мы расположили его в верхнем меню: так к каталогу можно получить доступ с любой страницы.

Преимущества меню-каталога

Большой объем информации удобно структурирован. Структура многоуровневого каталога выглядит так: раздел > подраздел 1 > подраздел 2 > товар
Пользователю не нужно скроллить страницу с товарами. Он видит все продукты на одном экране
К товару можно перейти в один клик, так как разделы и подразделы раскрываются при наведении мыши

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

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

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

Таблица

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

Мобильная версия

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

Загружаемые материалы

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

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

Также можно перейти на страницу с любым документом и поделиться ссылкой — это упрощает работу технических специалистов.

Контент на сайте

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

Таймлайн

Особенно важно было показать 30-летнюю историю компании. Вместе с заказчиком мы рассматривали разные варианты: инфографику, историю в цифрах, вступительную информацию с фотографией. В результате выбрали таймлайн, который может наглядно и динамично отобразить многолетний опыт предприятия «Бреслер».

Результат

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

Вся нужная целевой аудитории информация удобно структурирована, ее легко найти
Документация по оборудованию доступна для скачивания и обмена с коллегами

C помощью UX-решений мы полностью пересобрали сложный каталог и сделали так, чтобы пользователям было удобно в нем ориентироваться. Мы не оставили без внимания важные для заказчика пункты, которые касаются идентичности НПП «Бреслер» и коммуникации предприятия с партнерами, при этом улучшили сайт и сделали его современным.

Услуги

Разработка лендингов

Самый быстрый путь к продажам в интернете

Настройка сквозной аналитики

Полный путь клиента от первого контакта с рекламой до покупки

Внедрение CRM

Автоматизация бизнеса и рост эффективности

Разработка интернет-магазинов

Расскажите нам о вашем проекте

Свяжемся с вами в течение 20 минут, расскажем о продуктах, ценах и этапах работы

Загрузить файл

Даю согласие на обработку моих персональных данных в соответствии с политикой конфиденциальности

Спасибо за обращение!

В течение рабочего дня мы свяжемся с вами для обсуждения вашего проекта

Заказать услугу

«Бреслер»: создали сайт и каталог с удобной навигацией для технических специалистов

«Бреслер»: создали сайт и каталог с удобной навигацией для технических специалистов

Клиент

Задача

Аналитика

Решение задачи

Контент на сайте

Таймлайн

Спасибо!