О проекте
«Лемакс» — специализированное предприятие в сфере отопительного оборудования. Компания производит газовые, электрические, твердотопливные котлы, газовые проточные водонагреватели, а также стальные панельные радиаторы, которые соответствуют европейским и российским стандартам в области качества.
Предприятие «Лемакс» входит в топ-30 быстроразвивающихся компаний юга России.
Предыстория
Изначально наша компания разработала для клиента 3 сайта-каталога на шаблонных решениях. Каждый из сайтов имел свой несложный функционал и “отвечал” за свое направление.
Со временем, завод решил расширить каналы продаж и из сайта-каталога Лемакс вырос в полноценный интернет-магазин.
Чуть позже выявилась потребность в дополнительном функционале, который был реализован. Потом еще, а потом еще несколько раз.
В итоге получился нормально работающий сайт, вполне красивый, но Франкенштейн :)
Вдобавок, у заказчика появился новый фирменный стиль и желание сделать полноценную интеграцию с 1С-системами. К нам поступил запрос на “адаптацию” имеющихся сайтов.
Совместно с заказчиком мы провели несколько сессий, на которых разобрали все пожелания к новому проекту, собрали все технические данные, построили полноценный документ агрегации требований с учетом нескольких групп внешних и внутренних стейкхолдеров данного проекта, а также обсудили тот функционал, которого нет, но который нужно будет сделать в следующих итерациях.
После примерного разбиения на этапы и создания смет на каждый из них стало очевидно, что выгоднее и лучше с технической точки зрения будет полностью перезапустить данный проект, попутно сделать некоторые компоненты сайта заново и добавить новых.
Задачи (кратко)
- Переработка дизайна всех страниц сайта с учетом нового фирменного стиля компании.
- Оптимизация кода старых компонентов и ускорение сайта.
- Создание нового функционала.
- Переработка личных кабинетов для пяти типов пользователей:
- розничных покупателей,
- оптовиков,
- монтажников,
- специалистов газовых служб,
- розничных продавцов.
- Полноценная двусторонняя интеграция с 1С УТ.
Реализованные задачи
Полностью перерисовали дизайн, от начала и до конца, с учетом всех особенностей фирменного стиля компании Лемакс и сделав его более строгим. Все мобильные версии страниц были отрисованы отдельно.
Добавили дополнительный функционал для монтажников, розничных сетей, оптовиков. В итоге, мы смогли увеличить объем функционала в несколько раз. При этом мы ускорили сайт более чем в 40 раз.
Автоматически определяется местоположение. Есть раздел “Где купить”, карта с расположением магазинов и сервисных центров, на которой можно отсортировать только авторизованные сервисные центры.
Отзывы можно посмотреть как в карточках товаров, так и в разделе “Отзывы”. Есть раздел “FAQ” с ответами на вопросы реальных пользователей.
Функционал "Где купить"
Регистрация котла покупателем для получения доп.гарантии
Личные кабинеты
Страницы авторизации и регистрации разделили для разных типов пользователей со своим набором полей.
Для каждого типа пользователей проработали интерфейсы личного кабинета.
Личный кабинет оптовика
У оптовиков есть вкладка “Компания-грузополучатель”, потому что один оптовик может поставлять оборудование сразу нескольким магазинам. Есть вкладка со статистикой общих данных, где оптовик может посмотреть рекламации по заказам. Есть возможность скачать техническую документацию. Стоимость товаров для авторизованного оптовика отличается от розничной цены.
Также у оптовиков отличается принцип заказа. Оптовик заказывает сотни и тысячи товаров за один раз, поэтому заказ через обычный каталог, в котором нужно заходить в разные разделы каталога или в отдельные карточки товара заменили на отдельную страницу для быстрого заказа, где номенклатура представлена в режиме “одного окна”. Причем на этой странице заказ можно сделать несколькими способами. Есть поиск по артикулу. Сразу же в каталоге оптовик видит индивидуальную скидку. Также он видит вес и объем заказа, поскольку это удобно для формирования отгрузки “фурами”.
Для некоторых товаров автоматически предлагаются сопутствующие товары, которые покупаются почти в 100% случаев. Например, для некоторых радиаторов автоматически предлагаются крепления. Такой подход позволил существенно увеличить продажи сопутствующих товаров.
Объемный каталог на одной странице — не самая простая вещь, пришлось полностью переделывать интерфейс. Новый интерфейс позволяет выбрать нужные товары и заказать их на одной странице.
Отдельно реализован функционал “Заказ из файла” — импорт заказа, сформированного в 1С оптовика. Достаточно загрузить файл в форматах xls, csv или commerceML/xml на сайт и нужные товары автоматически окажутся в корзине. Этот файл будет прочитан сайтом. Если в заказе содержится информация о нескольких заказах для нескольких компаний (разбор по ИНН) или нескольким подразделениям (разбор по КПП), то автоматически будет создано несколько заказов с необходимыми данным для доставки.
Также мы заметили, что некоторые оптовики не делают заказ сразу, а в течение нескольких дней. А еще со стороны клиента заказ могут формировать несколько специалистов, а после чего его утверждает и отправляет главный по закупкам. Поэтому мы добавили для них функционал черновиков.
Процесс чекаута автоматизирован, так как вся необходимая информация о пункте доставки, счете для оплаты и т. д. у продавца уже есть. Этим мы облегчили и ускорили процесс оформления оптового заказа для клиентов компании Лемакс.
В личном кабинете оптовика есть история заказов, можно скачать документы: счет, акт и т. д. Есть документы по оплатам и отгрузкам.
Раздел рекламаций
У клиента и менеджера есть возможность двусторонней связи и загрузки документов, картинок и других файлов, если это необходимо.
В личном кабинете можно отслеживать статус заказа. Каждый статус выводится автоматически, есть история изменений.
Если у компании-оптовика несколько грузополучателей, можно отслеживать заказ по каждому грузополучателю отдельно, добавить нового, посмотреть текущий заказ, изменить тип доставки и т. д. При добавлении новой компании-грузополучателя клиенту нужно ввести только ИНН грузополучателя, остальные поля заполняются автоматически.
Личный кабинет монтажника
У компании Лемакс по России и СНГ есть сеть сертифицированных монтажников, которые занимаются установкой и починкой оборудования.
Реализован функционал с помощью которого можно отслеживать, кто сколько делает ремонтов и обслуживаний, премировать специалистов. Монтажники регистрируют в личном кабинете каждую установку или ремонт оборудования, заявки проверяются специалистами Лемакс и за корректно закрытые заявки начисляются бонусные баллы, которые можно потратить при следующих покупках в интернет-магазине.
Это помогает компании отследить, какое оборудование чаще ломается, по каким причинам, в каких регионах монтажники более активны, более квалифицированы.
У монтажников и сервисников расширенный каталог запчастей (они видят больше товаров, чем обычные пользователя), индивидуальные цены и условия покупки.
Отдельный раздел подбора запчастей
У завода отопительного оборудования Лемакс есть отдельная группа покупателей — сервисные инженеры, которые занимаются обслуживанием производимой отопительной техники на территории России и других стран.
У них была потребность в удобном подборе и покупке запасных частей для оборудования. Специально для них был разработан функционал, позволяющий быстрее и удобнее находить необходимые запасные части и расходные материалы для котлов.
Теперь вместо того, чтобы искать запчасти в общем списке, мастера могут выбрать модель котла, затем отдельный функциональный блок котла, и далее, на удобной и наглядной картинке картинке выбрать уже нужную запасную часть.
Визуальный поиск нужного товара очень помог. У сервисников теперь нет необходимости помнить или искать в отдельных файлах парт-номер или артикул конкретного товара, а затем пользоваться общим поиском по сайту.
С технической точки зрения тоже получилось все сделать элегантно — мы не стали дублировать товары для этого “отдельного каталога”, а просто пролинковали существующие с нужными номерами на схемах. То есть контент-менеджер просто указывает к какой цифре на схеме относится тот или иной артикул товара и по этому артикулу, при генерации страницы “подтягивается” описание, изображение и цена, соответствующая цене, по которой может купить товар пользователь (розничная, мелкооптовая, оптовая или другой специальный тип цены).
Личный кабинет продавца
Для стимулирования продаж оборудования завода, был создан функционал премирования продавцов, после реализации продукции Лемакс.
После продажи продавцу необходимо зайти в свой личный кабинет и зарегистрировать продажу, указав модель, дату продажи и серийный номер оборудования. Сайт автоматически проверит по введенным данным корректность (серверная валидация по модели и серийному номеру), рассчитает уровень кешбэка исходя из количества баллов за продукт и уровня продавца и начислит эти баллы.
Этот функционал приятен продавцам - они получают “кешбэк” за каждую покупку, а также полезен маркетинговому отделу клиента — статистика о регистрациях продаж собирается и в дальнейшем анализируется в разрезах и линеек оборудования и в разрезе регионов продаж.
Каталог
В каталоге четыре уровня, большое количество товаров, несколько сортировок, есть технические страницы, которые делают выборки из каталогов. Есть возможность подбора котла с помощью ответов на несложные вопросы.
Был доработан обмен 1С и сайта, так как стандартный обмен, предлагаемый компанией 1С, не подошел.
На странице каталога сделали удобный фильтр, работающий автоматически. Есть дополнительный блок для размещения описания подкаталога (SEO-текст), который действительно полезен пользователям.
В некоторых разделах каталога, в плитку анонсов товаров встроены баннеры.
Основные моменты:
- Возможность просмотра товаров в режиме плитки и списка
- Удобный фильтр с подсказками
- Встроенные баннеры (над товарами и в плитке анонсов)
- Полезный и не отвлекающий SEO-текст
- Возможность покупки без перехода в карточку товара
- 2 типа пагинации (вывод страниц и кнопка "показать еще", есть возможность включения бесконечного скролла)
Карточка товара
Карточка товара имеет значительно больший функционал по сравнению с типовой карточкой обычного интернет-магазина.
У всех товаров есть вкладки “описание”, “характеристики”, “документы” (скачиваемые файлы), видео-ролики, “отзывы” и т. д. Можно добавить товар к сравнению, поделиться. Видно, сколько раз этот товар был приобретен.
Есть карточки с 3D-визуализацией товара. Трехмерные изображения помогают потенциальным покупателям оценить габариты товаров. Это важно, поскольку многим покупателям нужно оценить размер и увидеть места ввода-вывода коммуникаций оборудования.
Карточка “трансформируется” в зависимости от того, какой товар в данный момент смотрит пользователь — есть карточки товаров с дополнительными сопутствующими товарами и свойствами. Например, к определенным радиаторам рекомендуются монтажные клапаны. Пользователю не нужно думать, какой комплект подойдет именно к этому радиатору.
В каждой карточке товара покупатель видит его статус (под заказ, в наличии, в корзине).
Каждая карточка товара содержит вкладку “Сервисные центры”, где пользователь может увидеть все ближайшие к нему СЦ и их контактные данные. Определение местоположения пользователя происходит автоматически.
Абсолютно вся информация о товаре хранится и регулярно обновляется из 1С.
Для оптимизации хранения скачиваемых документов, на сервере организовано удобное хранилище файлов, ссылки на которые указываются в специальных свойствах в 1С. Такой подход позволяет:
- Не хранить скачиваемые файлы в 1С. Меньше база, быстрее выгрузки.
- Удобно администрировать хранилище. Отдельный сервер под “холодные данные”.
- Автоматическое обновление скачиваемых материалов. Многие документы периодически нужно обновлять — сертификаты, инструкции и т.д. Один и тот же документ может иметь отношение к нескольким товарам. Если у самих товаров в 1С прописываются только ссылки к ним, то заменяя сам файл в хранилище, мы автоматически обновляем скачиваемые материалы у всех товаров на сайте, без необходимости их изменения во всех карточках в 1С.
В качестве хостинга для видео был выбран Youtube – все видео-ролики о товарах размещаются на канале компании. Работает в 2 стороны – на сайте в товарах появились видео (ссылки на ролики указываются в отдельном свойстве в 1С и выводятся в отдельной вкладке карточки товара) + у Лемакса появился популярный и отличный канал для привлечения клиентов и общения с аудиторией.
Корзина
Страница корзины на этом проекте умеет все то, что, обычно умеют корзины на типовых проектах:
- автопересчет,
- удаление товаров,
- очистку
Плюс немного крутого и удобного функционала для покупателей.
Во-первых, она умеет определять какие в корзине товары и самостоятельно добавляет к некоторым из них подарки. Например, при добавлении в корзину отопительного котла, будет добавлен ингибитор коррозии. А если убрать котел, то пропадет и подарок к нему.
А еще этот функционал учитывает в какой группе находится пользователь. У разных групп для одних и тех же товаров могут быть разные подарки или совсем не быть подарков — все гибко настраивается.
Еще одним интересным функционалом корзины, который был создан нами специально для этого проекта, является предварительный расчет доставки. Он учитывает местоположение пользователя, знает про все скидки и особые условия доставки, а запросы отправляет только по нажатию пользователем кнопки в корзине, чтобы не замедлять страницу корзины.
Страница оформления заказа
Типовая страница оформления заказа — универсальный компонент сайта, но его тяжело оптимизировать под требования клиента и его бизнеса.
Для данного проекта был разработан уникальный шаблон и функционал страницы чекаута.
После проведенных тестов на прошлой версии проекта на основе собранной аналитики мы пришли к выводу, что для клиентов данного интернет-магазина более удобен пошаговый интерфейс оформления заказа, но нам не хотелось делать многостраничный интерфейс, поэтому мы придумали и реализовали подход “поэтапного открывания” страницы, при котором пользователю поочередно открываются шаги, на которых он работает с полями специфичными именно для этого шага и не отвлекается.
На каждом шаге показываются только те поля, которые нужны для полного и корректного оформления заказа с учетом типа пользователя, типа доставки и типа оплаты — нужные показываем, ничего ненужного не спрашиваем. Все, что можем найти в профиле пользователя, проставляем в поля сами.
Для юридических компаний есть автозаполнение полей. Вводим ИНН, обращаемся по API к базе данных DaData, из которой получаем название, контакты, адрес и другие данные о компании и автоматически заполняем нужные поля.
Нашей целью было уменьшить количество заполняемых пользователем полей и с этой задачей мы справились — конверсия этой страницы выросла в 3,5 раза. Время прохождения этапа оформления сократилось почти в 2 раза по сравнению со старой версией, на которой использовался стандартный чекаут Битрикс.
Посадочная страница обучения
Для важного раздела Семинары и обучение сайта lemax-kotel.ru мы сделали отдельную посадочную страницу (landing-page).
На ней выводятся прошедшие и будущие семинары и подробная информация о самом учебном центре. Есть возможность подробнее узнать о программах и условиях обучения, записаться на предстоящие события.
Видео-кейс
Благодарственное письмо от компании Лемакс