Разработка
Сedro

Как интернет-магазин «Полимакс» наконец начал продавать

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

С чего всё началось

Компания «Полимакс», которая производит и продаёт листовые пластики, пришла к нам в июле 2019 года с работой на пару часов — синхронизировать «Торговлю» от 1С с интернет-магазином на Битриксе. Когда всё было готово, клиент доверил нам ещё пару небольших задач, а затем наконец спросил: «Что сделать с сайтом, чтобы он продавал?».

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

Боль первая: цены, скачущие из-за курсов валют

Проблема: «Полимакс» производит пластики в Европе и продаёт в России, поэтому цены напрямую зависят от курсов валют и меняются вслед за ними. Клиента это раздражало, покупателей — тоже.

Решение: сделать недостаток преимуществом. Мы создали на сайте раздел «Акции» и написали для него скрипт. Как всё работает: например, если сначала товар стоит 1000 рублей, а затем подешевеет до 900, система зачеркнëт старую цену и рассчитает скидку. Если же позиция подорожает, она просто исчезнет из этого раздела. Ещё мы вынесли товары по акции отдельным блоком на главной — а чтобы ориентироваться в нём проще, сделали фильтры: «Поликарбонат», «Оргстекло», «Теплицы» и «Всё для дачи и участка».

Раздел «Товары со скидкой». Флажок «Хит продаж» получают самые просматриваемые позиции на сайте.

Боль вторая: неудобный каталог

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

Решение: написать ещё один скрипт! Теперь названия в интернет-магазине генерируются в зависимости от параметров товара в 1С. Например, если скрипт видит в системе аббревиатуру «ПВХ», на сайте ко всем товарам из раздела «ПВХ» автоматически приписывается «Вспененный». При этом, на странице «Клей, химия, прочее» ничего не меняется. Всё потому, что скрипт учитывает не только название товара, а ещё раздел, в котором он лежит.

Раздел «Вспененный ПВХ». Заголовки карточек товаров генерируются автоматически.

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

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

Как это работает — на примере страницы «Оргстекло».

Третья проблема: кривой фильтр для поиска товаров. Битрикс сам умеет делать фильтры из тех данных, которые ему отдает 1С, но получается не очень: пока выберешь нужные параметры — стемнеет.

Решение: снова сделать так, чтоб работало нормально. Результат наших трудов хорошо видно на странице «Сотовый поликарбонат». Как было раньше: например, если пользователь хотел посмотреть только товары толщиной 10 мм, нужно было нажать «Да» напротив соответствующего пункта и «Нет» во всех остальных. Теперь всё гуманно: покупатели выбирают параметры, просто кликая по ним. А справа появляется pop-up с количеством найденных товаров.

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

Некоторые параметры нового фильтра со страницы «Сотовый поликарбонат»

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

Фильтры-иконки со страницы «Сотовый поликарбонат»

Боль третья: неинформативные страницы товаров

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

Решение: полностью переработать структуру страницы! Вы-первых, мы сделали так, чтобы цена справа менялась в зависимости от выбранного цвета. Во-вторых, написали скрипт, который при выгрузке из 1С рассчитывает стоимость квадратного метра материала в зависимости от его толщины и оттенка. В-третьих, нарисовали иконки и написали тексты для особых условий, возможных услуг и наличия на складе. В-четвёртых, с помощью самого Битрикса и Javascript добавили сюда скидки: они появляются, если выбрать от 5 штук товара.

Новый интерфейс страницы товара на примере сотового поликарбоната

Боль четвёртая: перегруженный и недружелюбный прайс-лист

Проблема: Прайс-лист был огромной таблицей с перечислением всех товаров, невидимыми картинками и кусками кода — всё это загружалось минимум 30 секунд. Ни одна страница на сайте не должна быть такой, а самая популярная — тем более.

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

Новый интерфейс страницы «Прайс-лист»

Также мы поработали над ускорением всего сайта. Как мы это сделали:во-первых, добавили html-тег <picture> — теперь к одному баннеру или карточке товара прикреплено сразу несколько ссылок на изображения разного размера. И то, какое увидит пользователь, зависит от разрешения экрана и ОС его устройства. Во-вторых, там, где можно, вместо png использовали webp-картинки — они гораздо меньше весят. В-третьих, перенесли сайт с хостинга на сервер и добавили турбо-страницы от Яндекса и AMP от Google — с их помощью poly-max.com быстрее грузится в на мобильных девайсах. А в-четвёртых, переделали формы обратной связи под под Ajax-загрузку: раньше они лежали в шапке сайта и замедляли его работу, теперь загружаются только, если нажать на кнопку «Купить в один клик» или «Заказать звонок».

Другие небольшие, но важные доработки

Пробежимся по пунктам. Вот что ещё мы сделали на сайте «Полимакса»:

  • убрали огромное назойливое сообщение, которое появлялось при пополнении корзины — раньше оно занимало пол-экрана и жутко бесило, а теперь это очаровательное всплывающее окно слева;
  • сделали плавающую шапку в карточке товара, которая появляется при прокрутки странице ниже кнопки «Корзина»;
  • вернули в корзину функционал промокодов, который был выпилен предыдущими разработчиками, — теперь их можно вводить и в корзине, и на главной;
  • сделали оформление заказа на одном экране — тут проще было купить и настроить готовый модуль, а не писать всё с нуля, плюс мы сэкономили деньги клиенту;
  • настроили пиксель с событиями в Facebook и ВКонтакте, а ещё сделали интеграцию с myTarget, «Электронной коммерцией» от Яндекса и E-commerce от Google — теперь можно запускать рекламные кампании и настраивать динамический ремаркетинг на тех, кто добавил товар в корзину, смотрел определëнный товар и т. п;
  • усовершенствовали опцию «Купить в 1 клик» — раньше, когда менеджер получал такой лид, он видел только номер телефона покупателя и его имя. Мы добавили ссылку на страницу товара, который тот хочет заказать;
  • создали алгоритм, который автоматически прикрепляет к карточке из каталога ссылки на сопутствующие и похожие товары;
  • сделали так, чтобы почтовый ящик автоматически распределял лиды между менеджерами по продажам в Санкт-Петербурге и Ярославле, исходя из локации пользователя.

Что всё это дало

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

  • скорость работы интернет-магазина выросла в 3 раза;
  • стоимость лида упала с 1000 рублей в «удачный» месяц до 513 рублей в любой;
  • показатель отказов упал с 12,99% до 8,05%;
  • средняя конверсия выросла с 1,5–2,5% до 5–8,5%.

И самое приятное — мы до сих пор работаем с «Полимаксом», хотя компании, которые занимаются продвижением сайта, постоянно меняются.

{ "author_name": "Сedro", "author_type": "self", "tags": [], "comments": 0, "likes": 3, "favorites": 6, "is_advertisement": false, "subsite_label": "dev", "id": 253722, "is_wide": true, "is_ugc": true, "date": "Wed, 02 Jun 2021 18:06:19 +0300", "is_special": false }
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Google перестанет пускать в офисы по всему миру сотрудников без прививок от Covid-19 Статьи редакции

Компания перенесла дату выхода сотрудников с удалёнки с 1 сентября на 18 октября из-за вспышки коронавируса.

McDonald’s увеличила продажи в США на 25,9% благодаря рекламной кампании с корейской группой BTS Статьи редакции

Чистая прибыль в мире выросла в четыре раза за год из-за ослабления ограничений на фоне пандемии.

Как (и зачем) мы полностью переделали интернет-банк. Опыт Альфа-Банка
Duolingo привлекла $521 млн после выхода на биржу с капитализацией $3,7 млрд Статьи редакции

В 2020 году компанию оценили в $2,4 млрд.

Вебинар по внедрению цифровых интеллектуальных технологий в рамках Kazan Digital Week – 2021
Нет смысла тягаться с крупным конкурентом, «вдохновившимся» вашим стартапом? Это не так — рассказываю на личном опыте

Привет, меня зовут Роман Рабочий. Три месяца назад я опубликовал здесь статью про свой стартап — секретаря Машу. А спустя два месяца после запуска Маши вышла копия от одного крупного банка. И вчера эстафету перенял известный сотовый оператор. Рассказываю обо всем по порядку.

Как моё сообщество заработало 1,7 млн рублей на VK Donut

Больше шести лет назад Феликс Зинатуллин основал сервис таргетированной рекламы Церебро Таргет и запустил его сообщество ВКонтакте. Теперь там больше 200 тысяч маркетологов и предпринимателей. За год на донатах через VK Donut паблик заработал 1,7 млн рублей. Вот как это вышло.

Феликс Зинатуллин
Клиенты «Открытие Брокер» могут получить статус квалифицированного инвестора в личном кабинете и мобильном приложении

«Открытие Брокер» значительно упростил процедуру присвоения статуса квалифицированного инвестора для своих клиентов. Теперь его можно получить в личном кабинете на сайте и мобильном приложении «Открытие Брокер» в несколько кликов. Новый функционал позволит инвесторам не тратить время на поездку в офис для подачи документов и пользоваться всеми…

Что происходит в Китае: партия ограничивает b2c-сервисы без оглядки на их потери, потому что они перестали быть важными Статьи редакции

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

Associated Press
Исследование рынка PR 2021: больше новых инструментов, усиление и расширение влияния и значимости функции

Агентство Buman Media совместно с hh.ru провели исследование российского рынка коммуникаций. В нем приняли участие более 100 директоров и руководителей направлений по корпоративным коммуникациям, работающих в различных отраслях. Сегодня, в День PR-специалиста, мы подводим итоги года в коммуникационной отрасли.

«Бросил вызов Nike Air Jordan за мировое господство в кроссовках»: как Канье Уэст шёл к своему миллиарду Статьи редакции

Канье Уэст много лет настаивал на том, что он миллиардер, но Forbes признал за ним этот статус только в апреле 2020 года. В 2021-м журнал оценил состояние 44-летнего рэпера в $1,8 млрд

Канье Уэст Architecturaldigest
null