Сайт для производителя котлов Инверсия

Проблематика и UX-аналитика

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

Что мы предложили сделать:

— расширить функционал главной страницы, внедрить интерактивную полку меню, показать сферы применения

— классифицировать оборудование не только по виду, но и по сфере применения

— создать страницы, которые будут больше рассказывать о производстве: услуги, о заводе, выполненные проекты

— реализовать «базу знаний», вся нужная информация по сфере у пользователя под рукой

Новый визуальный стиль

UX-wireframe. Провели несколько встреч и собрали данные. Работу начали с исследования прошлого пользовательского опыта, согласования структуры и построения прототипа. В прототипе проработали функционал каждой страницы — это позволило проверить удобство пользования интерфейсом и оценить понятность структуры. В проверке задействовали фокус-группу.

UI-дизайн. Основой стиля компании стала округлая графика, символизирующая обтекаемое оборудование и сам пар. Такая графическая метафора поможет стать бренду притягательней для своей ЦА. Подробнее о ходе работы над визуальным стилем можно узнать в кейсе айдентика.

А еще в дизайне мы использовали набор иконок, игривый паттерн и иллюстрации, все в том же скругленном стиле.

Инфографика для
карточек преимуществ

В новом дизайне мы нагляднее вывели важную информацию по ключевым преимуществам оборудования на сайте. Создали крупные плашки и снабдили их «говорящей» графикой для лучшего понимания особенностей и преимуществ тех или иных продуктов компании.

Например, здесь можно почитать:

- о ценообразовании на оборудование;

- узнать про техническое обслуживание;

- найти информацию о том, из чего складывается КПД.

Смарт-подбор котла в несколько кликов

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

Меню второго уровня

Мы совместили преимущество выпадающего меню и стандартной шапки. Стандартное меню в открытой шапке всегда «под рукой», а второй уровень позволяет делать эффектную навигацию для пользователя.

Анимация, способная удерживать и удивлять

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

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

База знаний для клиентов и сотрудников

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

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

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

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

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

UI-kit

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

Так мы экономим время дизайнеров и верстальщиков. Все страницы теперь в едином стиле.