Обращаемся к свету: как мы сделали онлайн-каталог в формате «светового ателье» для бренда Световые Технологии
Световые Технологии — крупнейший производитель и поставщик современных светотехнических решений с 25-летней историей, лидер на рынке профессионального освещения в России и странах СНГ.
С момента запуска первого производства в 1998 году компания разрабатывает комфортное освещение и светотехнические решения для городской инфраструктуры (автомагистрали, больницы, парки), образовательных и спортивных учреждений (школы и детские сады, университеты, стадионы, ледовые арены и горнолыжные трассы), промышленных предприятий (склады, производственные помещения в аграрной, энергетической, лесной и тяжелой промышленности), отелей и гостиниц, АЗС и судостроительной отрасли.
К 25-летнему юбилею бренда Световые Технологии обратились к АЭРО за редизайном онлайн-каталога и обновлению визуальной концепции компании. Девиз Световых Технологий – уверенность в решении. Это транслирует и обновленное цифровое пространство компании – комфортные решения, удобство использования, ответственность и профессионализм в каждом взаимодействии с брендом.
Задачи
Перед АЭРО стояли следующие задачи:
- Полностью обновить визуальную концепцию бренда в онлайн-пространстве для закрытия потребностей широкой аудитории компании;
- Внедрить продуктовый подход и помочь бренду выстроить продуктовые бизнес-процессы внутри компании;
- Усовершенствовать пользовательский опыт с учетом множества запросов от разных сегмента аудитории;
- Обновить IT-архитектуру сайта и обеспечить вывод информации из учетной системы (НСИ) в режиме реального времени;
- Запустить проект в сжатые сроки к 25-летнему юбилею бренда.
Продуктовая концепция
Онлайн-каталог Световых Технологий, в некотором роде, необычный проект для АЭРО. На сайте пользователи не совершают прямых покупок, а используют его как рекомендательный ресурс и источник необходимых материалов для проектирования светотехнических решений. При этом базу аудитории составляют представители креативной индустрии – дизайнеры света и проектировщики интерьеров, архитекторы – а значит, важно учитывать, что онлайн-каталог для них во многом служит и источником вдохновения.
Изучив потребности пользователей и мировые практики, команда АЭРО пришла к концепции «бутик-ателье» световых решений, где несмотря на большое количество технологических деталей фокус делается на свет и его восприятие в разрезе каждого конкретного светильника. Особенность бренда в том, что Световые Технологии не просто продают световые приборы, а проектируют полноценные решения для крупных компаний в разных сферах с учетом дизайна, расчета освещенности и моделирования помещений с пересечением зон освещенности, нормативных и эстетических требований.
Представленное АЭРО видение сайта не просто как цифрового каталога, а как самостоятельного пространства, закрывающего комплексные потребности всех групп пользователей, нашло отклик во всех бизнес-юнитах бренда. Если раньше сайт воспринимался, скорее, как сопутствующий продукт компании, вместе с АЭРО Световые Технологии пришли к осознанию неразрывной связи продуктового процесса и бизнес-эффективности бренда. Запуск нового сайта зародил необходимость осознанного отношения к онлайн-присутствию компании и выстраиванию бизнес-процессов его развития и улучшения, а также стал импульсом для развития внутренних процессов по управлению продуктом.
Разработка продуктовой концепции бренда выстроена на глубоких предпроектных исследованиях и опыте использования сайта самими пользователями. В ходе глубинных интервью АЭРО выделили основные болевые точки аудитории Световых Технологий:
– неудобная навигация по сайту с широким ассортиментом из более чем 9 тысяч осветительных решений;
– сложность подбора схожей по характеристикам продукции, взамен вышедшей из производства;
– отсутствие четкой структуры сайта;
– нехватка 3D-моделей товаров для бесшовного использования в дизайн и светотехническом проектировании.
Дизайн концепция
Свет – это то, с чем мы постоянно сталкиваемся, но практически никогда этого не замечаем.
Мы всегда тянемся к свету, будь то наполненная теплом и энергией комната или солнечное пространство парка или школьного двора.
Бренд, производящий светотехнические решения, должен так же создавать ассоциации с безграничностью пространства, которые мы можем наблюдать при свете дня с вершины горы.
АЭРО разработало дизайн нового цифрового каталога Световых Технологий, который позволяет пользователям почувствовать пространство и глубину, важность света для архитектурных решений и личных ощущений тех, кто ими пользуется.
Карточки товаров иллюстрированы крупными безрамочными изображениями, чтобы отражать то, как светильники смотрятся в интерьере. Отступы между товарами сокращены, а все пространство каталога функционально. Расширенное пространство сайта дает более глубокое и чистое восприятие товаров бренда, что отвечает запросам креативной группы пользователей.
Сегментировать светотехнические решения для разных сфер использования было решено благодаря цветовому кодированию. Товары для промышленных предприятий, образовательных или спортивных учреждений и городской инфраструктуры выделены своим цветом, что упрощает навигацию и выделяет спектр решений для индустрии в самостоятельный мини-каталог.
Для каждого раздела появилось сквозное решение — боковое меню (сайдбар) с дополнительной информацией о серии товара и смежными разделами. Все продукты, необходимые в рамках одной задачи, мы постарались сделать на расстоянии 1-2 кликов, чтобы пользователю не приходилось каждый раз обращаться к поиску и работа с сайтом происходила нативно.
Каталог
В ходе UX-исследования пользователи отмечали неудобство каталога — при просмотре товаров по каждому сегменту приходилось скроллить вниз. Теперь же продукция и категории отображаются плиткой, что позволяет охватить одновременно больше товаров на странице.
В карточке товара пользователь видит информацию о всех товарах серии и ее характеристику. Каждая серия имеет свою цветовую индикацию по области применения товара — например, бирюзовая карточка товара сообщает пользователю о том, что данный светильник предназначен для освещения объектов судостроения. Описание товара подкрепляется фото и видео высокого качества и во всех ракурсах.
Калькулятор освещенности
Проектирование световой среды – безусловно, глубоко творческий процесс. Светодизайнеры воздействуют на эмоции и настроение людей при помощи тщательно скомбинированных световых решений. Однако освещение несет и сугубо утилитарную функцию, требуя грамотного светотехнического проектирования и расчета с учетом синтеза нормативных, технических и эстетических аспектов.
Калькулятор освещенности закрывает запросы пользователей по светотехническому расчету на основе множества параметров: размеров помещения, его назначения, расположения окон, цвета стен и потолков, функционала.
В результате светотехнического расчёта разрабатываются рекомендации по выбору светильников и их расположению для достижения комфортного и эффективного освещения.
Учитывая сложность светового проектирования, АЭРО принял решение сделать дизайн калькулятора освещенности более минималистичным, а также упростить сам продукт — теперь расчет необходимого количества светильников допускает только сочетаемые параметры. Например, если цвет потолка темный, то выбрать светлые или белые стены и пол невозможно. Это упрощает процесс подбора световых решений и дает пользователю возможность сфокусироваться на эстетике и функционале продукта.
Архитектура
Поскольку основным запросом клиента было сочетание скорости разработки и оптимального финансового ресурса, АЭРО приняли решение выстроить IT-ландшафт на монолитной архитектуре. Такая комбинация позволила соблюсти сроки релиза проекта к юбилею компании благодаря скорости развертки на Битрикс, сохранив весь необходимый функционал благодаря точечному использованию микросервисов. Управление контентом осуществляется с помощью коробочной панели администратора Битрикса, а интеграция с клиентской НСИ на RabbitMQ отвечает за интеграцию и связь с шиной данных, дополнительные коннекторы обеспечивают frontend на React с использованием серверного рендеринга (SSR), backend разработан на PHP. Также во время разработки было выполнено 2 интеграции — с НСИ (системой с нормативно-справочной информацией), где содержались все документы по продукции, и с Битрикс24 для управления формами обратной связи.
Результаты
Благодаря слаженной работе команд АЭРО и Световых Технологий нам удалось выполнить проект в полном объеме и в рамках заложенного бюджета. От первичной аналитики до запуска MVP ушло 6 месяцев и заказчик смог презентовать обновленный сайт на 25-летии компании.
«Одним из этапов реализации стратегии цифрового развития нашей компании стало внедрение нового корпоративного веб-сайта. Учитывая сложность интеграции с внутренними системами хранения данных, специфические запросы целевой аудитории продукта и уже имеющийся опыт неудачного внедрения, этот процесс представлял собой непростую задачу. Отдавая себе отчет в важности данного проекта, мы подошли к выбору команды разработчиков со всей ответственностью, тщательно изучив рекомендации и портфолио потенциальных партнеров. Команда АЭРО нас не подвела!»
Что было сделано
- Структура. Полностью переработали структуру сайта с учетом потребностей ЦА и современных трендов UI/UX, а также привязали каталог к новой структуре;
- IT-стек. Внедрили новый стек технологий, обеспечивающий стабильную и обновляемую систему с доступной поддержкой и базой для дальнейшего развития;
- Настройки. Обеспечили гибкость настроек разделов для наглядного отображения информации без привлечения разработчиков. Сократилась скорость изменения шаблона и стоимость поддержки в части настроек. Настроили 30 шаблонов под каждый тип продукции и 30 шаблонов по фильтрам;
- Дизайн. Разработали новую дизайн-концепцию, отвечающая современным трендам, стандартам корпоративного стиля и отраслевой специфике. Всего 44 макета страниц для desktop и 88 страниц для адаптива. Создали качественную mobile-версию сайта.