Редизайн B2B-магазина Левенгук

Группа компаний Levenhuk — производитель оптической техники мировых брендов: Levenhuk, Discovery, MAGUS, Ermenrich и эксклюзивный дистрибьютер брендов Bresser, Sky-Watcher, Konus, Meade.

Сейчас под управлением компании находится международная сеть магазинов оптической техники «Четыре глаза» (в Европе – «Zoom'n'Joy»). Магазины расположены в России, странах СНГ, Европе, Азии и Северной Америке. Оптическая техника бренда Levenhuk также представлена на крупнейших торговых интернет-площадках.

“Компания Levenhuk обратилась к нам с осознанной потребностью, но без готового макета. На первой планерке с представителями заказчика и студии обсудили формат работы, зоны ответственности и сроки. К верстке неприменимо понятие MVP, нужно выдать новый интерфейс целиком, без итераций. Поэтому особую роль играют предпроектные исследования, которые взяла на себя команда студии Лебедева,” – Максим, менеджер проекта

Задачи, поставленные заказчиком

1.Верстка по макету

Дизайн, созданный студией Лебедева — сложный. Как с точки зрения концепции, так и по реализации в HTML/CSS. Но макеты сделаны чисто, верстать их легко.

2.Добавление функционала элементам дизайна

Когда статичные страницы готовы, их нужно «оживить»: распределить роли при отрисовке элементов между frontend и backend, настроить логику обмена данными, добавить динамику и интерактивность, поправить импорты и др.

Как сделать дизайн живым и уникальным

Уникальный счетчик товаров в корзине

Когда вы добавляете товар в «корзину», он попадает туда «почти физически», даже если «корзина» — виртуальная.

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

Оригинальный способ вывода каталога

В механике перемещений по каталогу ничего не изменилось:

выбираем категорию — подкатегорию — товар.

Что изменили:

 • элементы каталога "свернули" в заголовок, на освободившееся место подтянули фильтры;

 • сделали выпадающее меню визуально более заметным.

Новое представление линейки брендов

Список брендов или партнеров на сайте традиционно представляют в виде шахматной доски или слайдера.

Но видимый нами свет — это волны. Так как вся линейка товаров Levenhuk предназначена для наблюдений (путём сбора электромагнитного излучения — видимого света), то бренды представлены в виде волн из фотонов.

Статичные элементы страницы приобрели объем и анимацию

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

Линза подходит для этой цели идеально!

Детализация когда она нужна

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

Но зачем их делать, если все подробности можно узнать сразу, прямо на странице каталога?

Микровзаимодействия в разделе, который редко читают

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

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

Карточка товара без видимых границ

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

Согласитесь, оно как будто из глянцевого журнала, а не каталога для B2B-клиентов.

Резиновый слайдер

Ассортимент компании широк: в нем есть небольшие предметы — театральные бинокли и огромные телескопы-рефлекторы на треноге. Обрезать и уменьшать большие картинки в слайдере не хотелось, поэтому решили сам слайдер сделать особенным. Он меняет свою высоту в зависимости от размера карточек.

Смешивание слоев и цвета

Чтобы сообщить клиенту о том, что товар в настоящий момент пользуется особым спросом или участвует в акции, прибегают к разным приемам. Иногда такую информацию можно «закодировать» одним символом (∞ — пожизненная гарантия). А вот символа для «bestseller» пока не придумали. Оно длинное, выходит за контур слайдера и сливается с фоном. Менять цвет нужно только у некоторых букв. Здесь важно правильно смешивать слои и цвета.

Мы показали только небольшую часть дизайнерских решений, которые наши разработчики реализовали на новом B2B-сайте. Они видны всем посетителям.

Но есть детали, которые видны только после регистрации.

Они тоже сложные, но красивые и полезные.

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

Нестандартный вывод карточек товара на странице заказа. Представленная компоновка позволяет видеть структуру заказов на одной странице и легко контролировать их визуально.

График поступлений. В личном кабинете легко следить за поступлением базового ассортимента и новинок.

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

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

Трудоемкость проекта

Проект большой и системный, поэтому вложения в него нужно рассматривать как инвестиции.

▶ 550+ часов на верстку макета, созданного дизайнерами студии Артемия Лебедева;

▶ 900+ часов на «переодевание» сайта в новый дизайн;

▶ 5+ месяцев работы специалистов по frontend и backend.

Мнение заказчика

“От лица ОАО «Левенгук» хотим поблагодарить команду ИНТЕРВОЛГИ за добросовестную работу над проектом. Вместе мы разработали и поддерживаем мультиязычный интернет-магазин и личный кабинет дилера.

К старту проекта по редизайну у нас, руководителей компании, уже был опыт общения с ведущими студиями страны. Выбирали подрядчика из топ-10 по рейтингу, портфолио, отзывам в сети. До первой беседы с аналитиком компании ИНТЕРВОЛГА, опыт был негативным, и мы сформировали пул важных для Левенгук критериев.

Учитывая эти критерии мы выбрали интегратора осознанно. Результат нас удовлетворяет на протяжении уже более трех лет, к тому же отсутствует излишняя бюрократия. Радует и профессиональная команда проекта. Отдельно благодарим за предоставление комплексных решений — интеграция с 1С, решение серверных вопросов, стабильность поддержки.” – Антон Епифанов, генеральный директор ОАО "Левенгук"