Обращаемся к свету: редизайн онлайн-каталога в формате «светового ателье» для бренда Световые Технологии

1. Вводная задача от заказчика, проблематика, цели

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

Перед нами стояли следующие задачи:

• Полностью обновить визуальную концепцию бренда в онлайн-пространстве для закрытия потребностей широкой аудитории компании;
• Внедрить продуктовый подход и помочь бренду выстроить продуктовые бизнес-процессы внутри компании;
• Усовершенствовать пользовательский опыт с учетом множества запросов от разных сегмента аудитории;
• Обновить IT-архитектуру сайта и обеспечить вывод информации из учетной системы (НСИ) в режиме реального времени;
• Запустить проект в сжатые сроки к 25-летнему юбилею бренда.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Продуктовая концепция

На сайте Световых Технологий пользователи не совершают прямых покупок, а используют его как рекомендательный ресурс и источник необходимых материалов для проектирования светотехнических решений. При этом базу аудитории составляют представители креативной индустрии – дизайнеры света и проектировщики интерьеров, архитекторы – а значит, важно учитывать, что онлайн-каталог для них во многом служит и источником вдохновения.

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

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

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

• неудобную навигацию по сайту с широким ассортиментом из более чем 9 тысяч осветительных решений;
• сложность подбора схожей по характеристикам продукции, взамен вышедшей из производства;
• отсутствие четкой структуры сайта;
• нехватка 3D-моделей товаров для бесшовного использования в дизайн и светотехническом проектировании.

Дизайн концепция

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

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

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

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

Каталог

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

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

Калькулятор освещенности

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

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

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

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

Архитектура

Поскольку основным запросом клиента было сочетание скорости разработки и оптимального финансового ресурса, мы выстроили IT-ландшафт на монолитной архитектуре. Такая комбинация позволила соблюсти сроки релиза проекта к юбилею компании благодаря скорости развертки на Битрикс, сохранив весь необходимый функционал благодаря точечному использованию микросервисов. Управление контентом осуществляется с помощью коробочной панели администратора Битрикса, а интеграция с клиентской НСИ на RabbitMQ отвечает за интеграцию и связь с шиной данных, дополнительные коннекторы обеспечивают frontend на React с использованием серверного рендеринга (SSR), backend разработан на PHP. Также во время разработки было выполнено 2 интеграции — с НСИ (системой с нормативно-справочной информацией), где содержались все документы по продукции, и с Битрикс24 для управления формами обратной связи.

3. Результаты сотрудничества

Благодаря совместной работе с командой Световых Технологий нам удалось выполнить проект в полном объеме и в рамках заложенного бюджета. От первичной аналитики до запуска MVP ушло 6 месяцев и заказчик смог презентовать обновленный сайт на 25-летии компании.

Что было сделано:

• Структура. Полностью переработали структуру сайта с учетом потребностей ЦА и современных трендов UI/UX, а также привязали каталог к новой структуре;
• IT-стек. Внедрили новый стек технологий, обеспечивающий стабильную и обновляемую систему с доступной поддержкой и базой для дальнейшего развития;
• Настройки. Обеспечили гибкость настроек разделов для наглядного отображения информации без привлечения разработчиков. Сократилась скорость изменения шаблона и стоимость поддержки в части настроек. Настроили 30 шаблонов под каждый тип продукции и 30 шаблонов по фильтрам;
• Дизайн. Разработали новую дизайн-концепцию, отвечающая современным трендам, стандартам корпоративного стиля и отраслевой специфике. Всего 44 макета страниц для desktop и 88 страниц для адаптива. Создали качественную mobile-версию сайта.