Заголовок bresler — MEDIA WORKS
Саранск

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

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

Клиент

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

Задача

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

Аналитика

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

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

Добавили отдельный раздел «Решения», где продукция Заказчика отсортирована по отраслям промышленности. Это ускорило поиск нужных продуктов для специалистов из разных отраслей. Например: специалист, работающий в химической промышленности может зайти в раздел со своей отраслью и сразу увидеть подборку продуктов, подходящих для его задач.
Отраслевые решения
Меню-каталог
Наиболее важно было структурировать все продукты компании, создав понятный каталог с удобной навигацией. Каталог мы расположили в верхнем меню, чтобы сделать его максимально удобным: так к нему можно получить доступ с любой страницы.
Преимущества меню-каталога
  • Большой объем информации удобно структурирован. Структура многоуровневого каталога выглядит так: раздел > подраздел 1 > подраздел 2 > товар.
  • Пользователю не нужно скролить страницу с товарами — он видит все продукты на одном экране.
  • К товару можно перейти в один клик, так как разделы и подразделы раскрываются при наведении мыши.
Фон
Фон
Карточка товара
Мы добавили в карточку максимум структурированной информации, продумали все возможные контексты, в которых специалисты взаимодействуют с продуктом, и убрали лишнее.
  • Сделали карточки товаров, которые содержат полную информацию об отраслях применения и модификациях технических устройств.
  • Каждая карточка содержит информацию о том, в какой отрасли продукт может использоваться. Визуально информация представлена в виде иконок, но для простоты понимания, текст всплывает при наведении курсора.
Таблица
Пользователь видит все модификации/типоисполнения устройства в одной карточке, что сокращает количество товаров в каталоге. Пользователь может сравнить разные модификации с помощью удобной таблицы с техническими характеристиками моделей.
технические характеристики
функциональный состав
Мобильная версия
Отдельно доработали таблицы для мобильных телефонов: в левом столбце закреплены параметры устройства, а с помощью правого можно переключаться между модификациями. Пользователь может сравнивать модели с большим числом модификаций и получает информацию без лишних переходов. В отдельной вкладке пользователь может найти документы для каждой модели.
Загружаемые материалы
В этом разделе можно найти техническую документацию для любого продукта. Чтобы упростить поиск нужной информации, мы предусмотрели несколько вариантов:
  • Поисковая строка: удобно для тех, кто точно знает, к какой модели нужны документы;
  • Пошаговая система: пользователь выбирает раздел и находит документ к нужному продукту.
Также можно перейти на страницу с любым документом и поделиться ссылкой, что упрощает работу технических специалистов.

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

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

Таймлайн

Особенно важно было показать 30-летнюю историю компании. Вместе с заказчиком мы рассматривали разные варианты: инфографика, история в цифрах, вступительная информация с фотографией. В результате выбрали таймлайн, который может наглядно и динамично отобразить многолетний опыт предприятия «Бреслер».
Результат
Заказчик получил современный сайт с удобной навигацией и понятным каталогом, в котором пользователю проще ориентироваться и находить важную для него информацию.
  • Вся необходимая целевой аудитории информация удобно структурирована и легко находится
  • Документация по оборудованию доступна для скачивания и обмена с коллегами
C помощью UX решений мы не только полностью пересобрали сложный каталог, но и сделали так, чтобы пользователям было удобно в нем ориентироваться. Мы не оставили без внимания важные для заказчика пункты, касающиеся идентичности НПП «Бреслер» и коммуникации компании с партнерами, при этом осовременив и улучшив сайт.
Заставка
Услуги
Настройка сквозной аналитики
Интеграция, внедрение, визуализация и обучение
Внедрение CRM
Автоматизация бизнеса и рост эффективности
Разработка интернет-магазинов
Разработка лендингов
Сайты, контент и дизайн
Расскажите нам о вашем проекте
Свяжемся с вами в течение 20 минут, расскажем о продуктах, ценах и этапах работы
Спасибо за обращение!
В течение рабочего дня мы свяжемся с вами для обсуждения вашего проекта
Заказать услугу