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

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

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

Первое, с чего мы начали – полностью переписали Front-end. Теперь каждый виджет и функциональный блок представляют собой директиву или компонент Angular, работающий независимо от других. Back-end было решено оставить на Битрикс, однако большую часть элементов все-таки пришлось переписать и дополнить API для связи с Angular-фронтэндом.

Шапка и основное меню сайта

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

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

Было : 

Стало:

Интерфейс главной.

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

Было:

Стало:

Каталог товаров

Ранее используемый интерфейс каталога товаров состоял из следующих основных элементов:

• Хлебные крошки
• Подразделы каталога следующего уровня
• Сортировка и вид каталога
• Фильтр
• Рекомендации магазина (подборки)
• Пагинация

 

Часть этих элементов была усовершенствована с учетом пожеланий заказчика и собранной статистики:

Хлебные крошки было решено оставить без изменений

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

 

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

Одним из вариантов представления списка товаров было плиточное расположение продукции в каталоге, мы его оставили и дополнили шаблонами с подробным описанием и табличным выводов товаров. Из привычного фильтра было решено убрать кнопку «Купить», так как, по мнению заказчика, посетитель сначала должен тщательно ознакомиться с техническими характеристиками оборудования.

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

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

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

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

В категории товаров над основным блоком были добавлены места под ротацию баннеров с УТП, чего не было в ранее используемых версиях интернет-магазина. 

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

Страница с подробной информацией о товаре была существенно изменена:

• Хлебные крошки – аналогично странице каталога.
• Чтобы облегчить работу руководителям производственных компаний, менеджерам, и другим сотрудникам, живущим в мире “факсов” мы добавили функцию «Версия для печати». Она делает работу с сайтом еще прозрачнее и позволяет сгенерировать страницу с характеристиками в удобный для восприятия вид, даже после печати страницы.
• Верхнюю часть карточки товара было решено условно разделить на три блока: слева медиа-контент, справа основные характеристики товара и производитель, а по центру - конверсионный блок.

 

• В процессе взаимодействия с заказчиком, мы обоюдно приняли решение убрать «лупу» из левого блока. Основная причина - отсутствие качественных изображений. Многие поставщики не имеют возможности предоставить актуальные фотографии своей продукции, по причине очень больших габаритов техники или ее отсутствия на складе. Отсутствие лупы компенсирует возможность просмотра фотографии важных узлов техники и видеообзоры.
• В отличие от предыдущей версии, блок с характеристиками был дополнен ссылкой на подробный список параметров. Ссылка на бренд, для просмотра всей техники этого производителя и основной характеристики у товара, осталась без изменений. Например, у генераторов это мощность в киловаттах, а у сварочных аппаратов - максимальный сварочный ток в амперах. 
• В конверсионном блоке от предыдущей версии сохранились:  кнопка «Добавить в корзину», «Быстрый заказ», цена и кнопка «Добавить в сравнение». Кроме того, мы включили блок отображения рейтинга товара с отзывами. При выборе дорогостоящей техники это, в большинстве случаев, является одним из решающих факторов. “На вырост” добавили блок с информацией о доставке, который на данный момент работает с ограниченным функционалом. В скором времени планируется вывод актуальной информации о стоимости и сроках доставки товара в регион пользователя. Руководство интернет-магазина пребывает в процессе выбора транспортной компании-партнера, а контент-менеджеры - усердно заполняют информацию о габаритах и массе продукции, для корректной работы калькулятора расчета стоимости.
• Карточка товара так же была дополнена большим информационным блоком, реализованным в виде вкладок с описанием, подробными характеристиками, отзывами, расходными материалами и сервисными центрами.

 

1. Описание и характеристики теперь содержат более подробную информацию о товаре и его комплектации. По просьбе заказчика мы добавили информацию о родине бренда и стране производства, здесь же была реализована функция «Скачать файл с инструкцией». Эта доработка нацелена на тех пользователей, которые довольно тщательно выбирают и досконально изучают приобретаемый товар, а так же для клиентов, которые утеряли инструкцию и попросту не помнят, как обслуживать технику.
2. Вкладка с отзывами - еще один функционал, которого не было в прошлой версии. Теперь каждый пользователь имеет возможность оставить свое мнение о товаре с сегментацией по блокам “достоинства”, “недостатки”, “комментарий” и с оценкой по пятибалльной шкале. Эта информация учитывается в вычислении рейтинга товара.

 

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

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

• Для увеличения среднего чека и конверсии в целом был реализован подбор комплектов. В результате опроса менеджеров по продажам, мы пришли к выводу, что клиенты магазина, в большинстве случаев, хотят не просто купить товар, а решить проблему. Например, у вас на даче регулярно отключается электричество. Как таковой генератор вам не нужен - вам нужно электричество на даче.  
• Многие клиенты, покупая генератор, мотоблок, косилку или сварочный аппарат, сталкиваются с тем, что для полноценной работы необходимо приобрести маску, электроды, диски, головки, рубильник и так далее. Специально для таких случаев, мы реализовали блок «В комплекте дешевле». Через административную панель менеджер-профессионал в своей тематике составляет комплекты, устанавливая скидку на каждую единицу. У пользователя есть возможность убрать один или два товара из комплекта.

 

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

Процесс оформления заказа

Как и на предыдущей версии, сегодня есть три вида заказа:  

• Через корзину
• Быстрый заказ
• Товар под заказ

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

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

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

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

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

Не выполнив обязательное требование процесса, клиент не видит следующего шага. Кнопка «Отправить заказ» не активна, пока все данные не заполнены корректно.

Как и на предшествующей версии сайта остались два вида покупателей:  юридические и физические лица.  В зависимости от выбранного региона, клиентам предлагаются различные варианты доставки. Для региона доставки «Москва» после проведенного опроса менеджеров, была выявлена проблема с расчётом доставки. Необходимо было объяснять клиенту о дополнительных расходах, теперь покупатель уже в процессе оформления заказа сам принимает решение, какой вид курьерской доставки по Москве ему больше подходит. При выборе «доставка за МКАД» клиент самостоятельно указывает расстояние от МКАД, стоимость доставки передается менеджеру, после чего суммируется к заказу.

Было принято решение избавиться от отдельных полей в Адресе, как показывает практика, гораздо удобнее для этих целей использовать одно поле.

Нами была добавлена функция оплаты кредитной картой через сервис приема платежей «Монета». Эта система предоставляет доступ к незаменимому механизму холдирования средств. Большинство товаров продается со склада поставщика, поэтому без холдирования оплата картой онлайн теряет всякий смысл. Об этом еще будет упоминаться в следующем кейсе о Back-end интернет-магазина «Все-Генераторы.ру»

Окно подтверждения заказа «Спасибо за Ваш заказ» было переработано, мы вывели в него всю важную информацию о заказе клиента. 

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

На старой версии сайта отсутствовал личный кабинет пользователя. За 2 года магазин «оброс» постоянными клиентами, в большей степени это касается юридических лиц, поэтому личный кабинет напрашивался сам собой.

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

Вывод и корректирование личной информации – это данные о клиенте и адреса доставки.

История заказов – в ней выведены списком все покупки клиента с функцией дательного просмотра состава заказа.

В итоге у нас получится современный магазин с богатым функционалом и максимально наглядным представлением продукции. Свежая версия сайта уже привлекает новых пользователей, поток посетителей вырос: за три недели количество продаж увеличилось примерно на 30% . При этом на 15% уменьшилось количество брошенных корзин.

Сейчас мы работаем в «режиме ожидания», исправляя только очевидные недоработки: с релиза прошло меньше месяца, и судить по количественной статистике еще сложно. Пока суммируем отзывы пользователей, наши наблюдения и маркетинговые показатели. Надеемся, что все это позволит сделать взаимодействия внутри сервиса еще лучше.