Интернет-магазин «умного» света Lustrella
Сияющий сайт для производителя светодиодных светильников, которые мановением пульта превращают день в ночь и обратно
Lustrella — история про то, до чего техника дошла. Светодиодная техника, конечно. Компания производит крутые осветительные приборы с нетривиальным дизайном, практичной начинкой (светодиоды долговечны и съедают мало электроэнергии), прагматичными материалами (хрупкое и тяжелое стекло производитель заменил на пластик) и — внимание — дистанционным управлением.
Это особенно удобно, когда вы уже легли в тёплую постельку, а свет не выключили. Или когда начался фильм, но лениво вставать с дивана, чтобы сделать темноту. Или когда захотелось тёплого лампового света — просто возьмите пульт и отрегулируйте яркость и теплоту спектра или включите ночник (если без света совсем страшно).
Это особенно удобно, когда вы уже легли в тёплую постельку, а свет не выключили. Или когда начался фильм, но лениво вставать с дивана, чтобы сделать темноту. Или когда захотелось тёплого лампового света — просто возьмите пульт и отрегулируйте яркость и теплоту спектра или включите ночник (если без света совсем страшно).
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild6433-3866-4730-a436-643166313434__-__empty____.png)
Задачи
Завод-производитель на рынке с 2003 года, и за 14 лет работы в сфере В2В компания развила широкую дилерскую сеть. Собственный e-commerce проект стал логичным продолжением — компании хотелось освоить новые горизонты и завоевать рынок конечных потребителей, объединив сразу несколько своих брендов в одном интернет-магазине. Да таком, чтобы можно было не только выбрать светильник по душе, но и увидеть, как он смотрится в интерьере.
Задачи проекта:
1. Сделать удобный и продуманный интернет-магазин под брендом Lustrella, заточенный под конечных потребителей.
2. Отразить преимущества продукции, сделав акцент на дизайне и интерьерных фотографиях.
3. Разработать грамотную структуру каталога, удобную навигацию и поиск.
4. Подробно рассказать о характеристиках товаров, учитывая потребности конечных покупателей.
Задачи проекта:
1. Сделать удобный и продуманный интернет-магазин под брендом Lustrella, заточенный под конечных потребителей.
2. Отразить преимущества продукции, сделав акцент на дизайне и интерьерных фотографиях.
3. Разработать грамотную структуру каталога, удобную навигацию и поиск.
4. Подробно рассказать о характеристиках товаров, учитывая потребности конечных покупателей.
Дизайн
Клиенту нравился формат магазинов товаров для дома Икея — по сути, лидера во всем, что касается идей для дома. И дело тут не только в интересных технологических решениях и продуманном дизайне, но еще и в интересном пользовательском опыте: можно прийти в магазин и, скажем, поваляться на кровати — UX в действии.
Люди привыкли к тому, что товар можно потрогать и изучить поближе, и мы решили дать такую возможность посетителям интернет-магазина: и продукт в действии посмотреть, и идей для интерьера почерпнуть. За это отвечают бегунки для регулировки тона «холоднее — теплее» и яркости «светлее — темнее», а ещё кнопка с режимом «ночник».
Люди привыкли к тому, что товар можно потрогать и изучить поближе, и мы решили дать такую возможность посетителям интернет-магазина: и продукт в действии посмотреть, и идей для интерьера почерпнуть. За это отвечают бегунки для регулировки тона «холоднее — теплее» и яркости «светлее — темнее», а ещё кнопка с режимом «ночник».
прототип и скетч
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3034-3631-4839-b535-616664386564__-__empty__proto1.png)
Клиент пришёл к нам с пониманием того, что ему нужно, поэтому работа над дизайном шла легко и с минимумом правок. Мы предложили три варианта, схожих по идее: много воздуха, спокойные цвета с добавлением ярких деталей и геометричные формы в духе европейского минимализма, который очень импонировал заказчику. В итоге он выбрал первый вариант с оранжевыми акцентами.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3863-6439-4363-b731-356338326165__-__empty__akulov.png)
Евгений
Арт-директор
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3139-3636-4938-a432-306261666436__-__empty__compare1.png)
Наш заказчик проделал огромную работу, фотографируя каждый товар в разных режимах работы — это было нужно для промо-блока. Так, для демонстрации управления яркостью на картинках в слайдере требовалось больше 10 фотографий для одного светильника.
Ещё на визуальном брифе мы с Юлией и Антоном, представителями заказчика, определились с направлением дизайна. Лёгкий, стильный проект в европейском духе с нестандарной сеткой. На таком сайте хочется что-то купить — на это покупателя толкают и фото светильников в интерьерах, и фишечки с товарами в каталоге, которые светятся по наведению, и чёткая и строгая карточка товара, где каждый элемент на своём месте. За интерьеры особое спасибо нашему заказчику — это колоссальная работа над контентом.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild6333-6636-4134-b338-646431643831__-__empty__ira.jpg)
Ирина
Руководитель проекта
Конечно, не обошлось без неочевидных дизайнерских штук, которые открываются для пользователя случайно. Например, заблудившийся покупатель, искавший светильник, попадает на 404 страницу, где света вообще нет:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3066-3962-4661-a130-666236343032__-__empty__lustrella_404.jpg)
Нам хотелось придумать какую-то фишку для страницы с пустой корзиной. В итоге появилась идея с драматичными ретро-гифками, которые бы показывались рандомно. Мы подобрали несколько с разными эмоциями, но в итоге на страницы корзины прижилась только одна. А ещё одна гифка с рьяно аплодирующим джентельменом появляется, когда пользователь оформил заказ.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3230-6136-4633-b836-316163396133__-__empty__Dasha.png)
Дарья
дизайнер
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild6335-3734-4464-a630-653736666437__-__empty___.gif)
Страница оформленного заказа
Разработка
Дополнительно к промо-блоку на главной мы добавили слайдер с фотографиями продукции в интерьере: по желанию заказчик может менять изображения и ставить на них метки различных товаров — при нажатии на пин нужный товар автоматически подтягивается в блок справа вместе с ценой и кнопкой «заказать».
Чтобы получилось так, как мы задумали, пришлось допиливать в админке функционал: внутри элемента мы добавили поля, куда можно вносить товары, и метки, которые к ним привязываются. А чтобы заказчику не пришлось сидеть с линейкой у экрана, мы сделали интерактивный инструмент, в котором легко ставить метки в любой точке картинки, не высчитывая расстояние от каждого края изображения.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3136-3337-4936-b730-656431363866__-__empty__fecc07d32c69b092262d.png)
Андрей
Разработчик
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild6138-6133-4332-b833-613331376234__-__empty___1.gif)
Для удобства выбора мы сделали фильтрацию сразу по нескольким критериям: можно выбрать тип комнаты, место установки (потолок, стена или даже пол), способ установки и отметить галочками дополнительные функции вроде дистанционного управления или звукового сопровождения. Фильтры спрятаны в раскрывающемся списке и не мешают просмотру контента, когда они не нужны.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild6232-3733-4933-a663-373237343336__-__empty___.gif)
Сейчас у клиента несколько точек продаж в Москве, и при выборе товара на сайте предлагается два сценария: самовывоз или курьерская доставка. Поскольку доставка в регионы на этапе развития, мы предусмотрели интеграцию с двумя курьерскими службами сразу — чтобы покупатель сам выбирал, что ему выгоднее по цене и срокам.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild3231-6530-4235-b433-666164343561__-__empty__noroot.gif)
Сайт получился таким, как хотел заказчик: по-европейски лаконичным по дизайну и с интерактивными фишками, которые отражают преимущества продукции и выделяют на фоне конкурентов. Сейчас мы выпустили проект в свет и вместе с нашим заказчиком активно строим планы на дальнейшее развитие проекта. Смотрим в сторону интеграции с Яндекс.Маркетом, подключения Retail Rocket, интеграции с CRM — планов миллион. И светильник я себе уже присмотрела :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1508470535/tild6432-6136-4936-b136-383031366532__-__empty__ira.jpg)
Ирина
Руководитель проекта
Готовый сайт