ADEMS

# Разработка # Поддержка # Развитие # Мониторинг
Разработка кастомного D2C интернет-магазина для производителя заточного оборудования
Запуск MVP
4 месяца
Срок проекта
2018 год - настоящее время
Объем работ
> 6700 часов
Ссылка
ADEMS

О клиенте

Компания ADEMS является одним из лидеров по производству станков и оборудования для заточки. Имеет собственное производство, осуществляет розничную и оптовую продажу оборудования по всему миру. Также ведет проекты связанные с очным и дистанционным обучением заточке.

Задача

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

Перед нами были поставлены следующие задачи:

01
Разработка кастомного интернет-магазина с большим количеством инструментов повышения лояльности к бренду
02
Реализация внутренних и внешних интеграций, в числе которых ERP, CRM, сквозная аналитика, службы доставки и оплаты, и другое
03
Внедрение мультиязычности с возможностью формирования разных каталогов и цен для соответствующих стран и централизованным управлением системой

UX/UI

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

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

UX/UI

Главная страница

В шапке проекта расположены важные для любого интернет-магазина элементы, такие как: выбор города, контактный телефон с кнопкой заказа обратного звонка, блок ссылок с мессенджерами, строка поиска, разворачивающийся блок информационных страниц, кнопка входа в ЛК и корзина. Также реализована основная навигационная панель с яркой конверсионной кнопкой каталога и ссылками на смежные проекты компании.

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

Главная страница - верхняя часть

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

Главная страница - нижняя часть

Авторизация

На странице авторизации совмещены блоки входа и формы регистрации. На полях формы присутствует необходимая валидация по типу вводимых данных, в соответствии с требованиями законодательства РФ на всех формах сайта подразумевающих сбор, обработку и использование персональных данных пользователей присутствует чекбокс согласия с правилами. Помимо этого при первом заходе у пользователя запрашивается согласие на использование файлов Cookie

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

Авторизация

Каталог

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

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

Каталог - станки

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

Во всех разделах каталога предусмотрели размещение сквозного горизонтального баннера для реализации маркетинговой стратегии компании.

Каталог - расходные материалы

Карточка товара

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

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

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

Также в правой части выведены стоимость товара и конверсионные элементы, среди которых кнопки покупки (в том числе в рассрочку и в кредит), переход на маркетплейсы и сервисные ссылки.

Отдельно укажем, что кнопки покупки в кредит и рассрочку изначально предлагают заполнить форму, а уже потом покупателю предлагается полноценный виджет кредитной заявки, для реализации которого была проведена интеграция по API с кредитной системой Тинькофф Банка. Это сделано специально с целью передать заявку в CRM систему для работы с покупателем, который не смог самостоятельно разобраться в виджете или ему было отказано в кредите/рассрочке.

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

Карточка товара - верхняя часть

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

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

Карточка товара - контентная часть

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

Ниже разместили блок с комплектующими и расходными материалами, которые также прикрепляются к каждому товару индивидуально. Если человеку потребуется помощь - сделали форму получения дополнительной консультации. Завершает страницу блок "Вы смотрели", куда попадают все открытые покупателем товары из каталога.

Карточка товара - нижняя часть

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

Корзина

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

Также, для пользователей имеющих сложности с оформлением заказа на сайте, реализована возможность скачивания корзины в формате Excel файла.

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

Корзина

Оформление заказа

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

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

Оформление заказа

Личный кабинет

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

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

Личный кабинет

Поиск

В шапке сайта расположена строка поиска с помощью которой пользователь может провести поиск нужного товара.

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

Поиск

Отзывы

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

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

Отзывы

Техническая поддержка

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

Техническая поддержка

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

Новости и статьи

Разработали контентные разделы проекта, которые представляют из себя перечень новостей или статей с превью картинкой и мини описанием. По клику на элемент пользователь может открыть подробную контентную страницу для ознакомления с ее полным содержанием.

Новости и статьи

Академия заточки

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

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

Академия заточки

Мультиязычность

В процессе расширения компания приняла решение об открытии продаж за пределами РФ, для чего нам была поставлена задача создания локализованных поддоменов для 5 разных стран.

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

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

Адаптивность

Согласно данным систем аналитики, больше половины посещений совершаются с мобильных устройств, таких как смартфоны и планшеты.

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

Адаптивность - 1 часть
Адаптивность - 2 часть
Адаптивность - 3 часть

Интеграции

Была проведена интеграция товарного каталога с учетной системой компании 1С:УНФ, была настроена выгрузка товаров, цен и остатков на сайт, а также выгрузка заказов обратно в систему 1С.

Помимо этого была проведена интеграция сайта с системой обработки заказов и лидов Bitrix 24. Все контактные формы, включая форму оформления заказа в момент заполнения передают данные в CRM с созданием в ней заказа, сделки, либо входящего лида.

Результат

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

Благодаря своему интернет-магазину компания ADEMS имеет возможность:

01
Выстраивать доверительные и лояльные отношения со своими клиентами
02
Реализовывать эффективную маркетинговую стратегию получая весомые коммерческие результаты
03
Проводить тестирование гипотез для улучшения пользовательского опыта своих покупателей

Над проектом работали

Project-менеджерх1
UX/UI дизайнерх1
Front-End разработчикх2
Bitrix разработчикх2
QA-инженерх1
Контент-менеджерх1
Обсудим ваш проект?
Оставьте заявку, и мы свяжемся с вами в кратчайшие сроки
Отправить заявку
Нажимая на кнопку «Отправить заявку» вы даёте свое согласие на обработку персональных данных на условиях политики конфиденциальности
Спасибо за просмотр!
Если вам понравился кейс — вы можете им поделиться удобным для вас способом.
Смотреть