Разработка уникального функционала для Интернет-магазина премиального бренда бытовой техники: наша работа с Evelux

“Ничего лишнего” — один из главных слоганов бренда

Рассказываем о том, как мы в Зионек создали уникальный функционал и UI/UX для Интернет-магазина премиального бренда. В числе прочего - рекламные баннеры среди товаров в каталоге магазина на Битрикс, сложные акционные механики и анимация сайта с учётом законов физики.

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

Интернет-сайт компании Evelux (программирование: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fzionec.ru%2F&postId=566535" rel="nofollow noreferrer noopener" target="_blank">Зионек</a>)
Интернет-сайт компании Evelux (программирование: Зионек)

Компания Evelux обратилась в Зионек за помощью в реализации полного ребрендинга сайта своего Интернет-магазина. Предыдущий Интернет-магазин компании был древний, не дружественный к пользователю, неудобный. Там не было никаких фильтров, не было сравнений, не было хорошего раздела “избранного”, не было возможности рассчитать в корзине стоимость доставки. В целом, сайт никак не соответствовал современным ожиданиям от удобного Интернет-магазина.

И самое главное — предыдущий Интернет-магазин никак не подчёркивал премиальность бренда и ценности, которые являются главными для компании и её продуктов. Новый сайт, созданный нами — специально сделан, чтобы вывести именно их на первый план.

Анимированный баннер на первой странице

Первое, с чего начинается опыт пользователя, заходящего на новый сайт Интернет-магазина Evelux — это анимированные баннеры. Желая приблизить ощущения пользователя на сайте к ощущениям от качественных бытовых приборов, которые предлагает Evelux, мы постарались как можно точнее симулировать поведение анимации на баннере с точки зрения поведения реальных физических объектов. Анимация у баннера обладает инерцией, зависит от скорости движения мышки, и с точки зрения юзабилити, дизайна, анимации сразу погружает пользователя в ощущение премиум-качества бренда. Запрограммировать всё это поведение баннера было совсем непросто, но это было важно для нашего клиента, и несмотря на сложности, мы это, разумеется, реализовали.

Анимированный баннер со сложным поведением на первой странице сайта Evelux.ru (программирование: Зионек)

Особая “премиум”-пагинация.

Для каталога мы разработали особенную, очень удобную, и очень интересную пагинацию, которую можно использовать двояко: выбирать “показать ещё” или двигаться постранично. Вот что это значит. Например, на странице у нас 12 позиций (12 товаров). Можно нажимать “показать ещё” несколько раз, и как и ожидается, как уже давно традиционно ведут себя сайты — страница будет расти за счет дополнительных позиций. Но затем пользователь может решить снова посмотреть на то, что он видел вначале, и просто перейти, например, на вторую страницу (не проматывая заново всю эту простыню с товарами) — и вот тут-то сайт покажет только эту вторую страницу (то есть, содержание страницы «схлопнется» до 12 позиций этой второй страницы). Таким образом, нам удалось реализовать важное пожелание заказчика о том, чтобы пользователи, с одной стороны, не утонули в разнообразии позиций при просмотре большого каталога (тот самый слоган «Ничего лишнего»), и в то же самое время могли бы просмотреть всё настолько широко, насколько захотят. При этом оба способа просмотра каталога совершенно знакомы и привычны пользователям, а их комбинация, весьма удобная, но неожиданная для большинства пользователей, предлагает такие возможности, которые мало на каких сайтах можно наблюдать.

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

Карточки-баннеры среди товаров в каталоге магазина на Битрикс.

Обычно, когда пользователь сайта просматривает товары в каталоге, среди карточек нет баннеров, и у администратора Интернет-магазина нет никакой возможности их показать. Наш заказчик, однако, хотел иметь у себя в каталоге “карточки”, которые на самом деле не карточки, а рекламные баннеры (для каждой категории, баннер — свой). Для этого нам пришлось разработать наши собственные компоненты для Битрикс, и это оказалось технически очень сложно. Цель этого баннера — настройка рекламы в торговый каталог, чтобы человек мог что-то купить ещё, дополнительно к основной покупке. Прямо среди товаров ему показываются дополнительные предложения. Всё их содержание настраивается, разумеется, через админ-панель.

Каталог с карточкой-баннером среди товаров на сайте Evelux.ru (магазин на платформе Битрикс, программирование: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fzionec.ru%2F&postId=566535" rel="nofollow noreferrer noopener" target="_blank">Зионек</a>)
Каталог с карточкой-баннером среди товаров на сайте Evelux.ru (магазин на платформе Битрикс, программирование: Зионек)

Удобная корзина для заказов и интеграция со службой доставки.

Мы сделали очень удобную корзину и оформление заказа. Можно сразу увидеть пользовательскую скидку (но только если пользователь этого хочет — сам по себе, сайт не считает их главным предметом, на котором следует заострять внимание)

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

Сложные акционные механики

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

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

Комплекты из нескольких товаров с независимыми ценами и акционными механиками.

Ещё одним важным функционалом, который мы реализовали, был фунционал “комплектов”, также очень важный для нашего заказчика. Комплект — это набор из нескольких бытовых приборов, который характеризуется совсем другими ценами и акционными механиками, нежели отдельные составляющие его приборы-компоненты. Благодаря нашей работе, теперь компания может с легкостью настраивать цену комплекта, делать на комплекты специфические акции, и при этом не учитывать акции, действующие на отдельные товары, находящиеся внутри комплекта. Это тоже было очень сложно в реализации, но мы это сделали и теперь эти акционные механики, которые важны для Evelux, полностью интегрированы в их интернет-магазин.

Заключение

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

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

И в то же время, мы умеем работать и с небольшими компаниями, и помогаем им расти. В отличие от некоторых других интеграторов, мы внедряем только то, что действительно полезно для бизнеса и принесёт предприятию немедленную выгоду. Вот наш сайт: https://zionec.ru/. Пишите, звоните — мы вас поймём, проконсультируем, поможем!

Разработка уникального функционала для Интернет-магазина премиального бренда бытовой техники: наша работа с Evelux
33
18 комментариев

Особая “премиум”-пагинация. Выбирать “показать ещё” или двигаться постраничноЕба премиум конечно, во всех шаблонах Аспро уже лет 5 как существует

2
Ответить

А где посмотреть такой пример на Аспро? Пока не видел похожего, только на М Видео, но там точно не Аспро =)

Ответить

«Премиум» — это в т.ч. про детали и типографику. А она тут слабенькая

2
Ответить

+1, типографика как в прототипе, не доведена до вкуса.

Ответить

Эта колбаска - это элемент управления шторкой, а он у вас для красоты сделан и не работает)

2
Ответить

У меня работает это модальное окно

Ответить

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

1
Ответить