{"id":13839,"url":"\/distributions\/13839\/click?bit=1&hash=310caf1329692463026b8043ff9088d52dd6a03c2dd0a57cf9acc31d860b46e9","title":"\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u043a\u0430\u0441\u0442 \u043f\u0440\u043e \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0438\u0440\u043e\u0432\u044b\u0445 \u0431\u0440\u0435\u043d\u0434\u043e\u0432","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"b11f7ca0-f0f3-5198-bc97-7a4f1114f6f6","isPaidAndBannersEnabled":false}

Новый интернет-магазин для Diamtools

Привет! На связи AIR. Сегодня хотим рассказать вам про наш кейс.

Интернет-магазин Diamtools продает инструменты и оборудование для камнеобработки малым строительным организациям, прорабам, бригадам и частным специалистам.

Diamtools уже 5 лет развивает e-commerce. За эти годы компания нарастила присутствие в digital. Клиентский опыт улучшился, но с годами темпы снизились — софт устарел. В онлайне одна технология быстро сменяет другую. Какое-то время удавалось обходиться «костылями». Но с каждым разом поддержка такого продукта в рабочем состоянии обходится все дороже. Поэтому компании понадобился новый сайт интернет-магазина.

Цели проекта:

  • Запустить новый мультибрендовый интернет-магазин.
  • Переработать логику и структуру каталога.
  • Сделать сайт масштабируемым для дальнейшего развития.
  • Улучшить карточки товаров с точки зрения интерфейсов.
  • Исправить возникающие ошибки при поиске товаров и оформлении заказов.

Изменения в каталоге

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

Было:

  • Уровней вложенности: четыре.
  • Не было умного ввода: при поиске товара с наименованием выдавались позиции только с точным совпадением.
  • Не было предпросмотра товара: приходилось открывать много вкладок. Аудитория Diamtools обычно рассматривает много позиций. Сравнение также идет по критериям — характеристики, цена, сроки доставки.
  • Некорректная работа фильтра. Например, обновление параметров шло с большой задержкой. На взгляд пользователя ничего не происходило.

Стало:

  • Уровней вложенности: два, максимум — три в отдельных разделах.
  • Умный ввод интегрирован, использовали Elastic. Теперь поиск распознает слова с опечатками, в разных склонениях и падежах, кириллические названия, набранные на латинице. Можно найти товар и по артикулу. Больше результатов на странице — выбора для клиента.
  • Есть предпросмотр, можно не переходить на страницу товара, а посмотреть характеристики, добавить в избранное или в корзину.
  • Вынесли популярные фильтры отдельным блоком сбоку от самого каталога с товарами. Также добавили возможность задавать размерные ряды, объединять товары в торговые предложения.

Изменения в корзине

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

Было:

  • Не было автозаполнения полей.
  • Можно было вручную выбирать интервал времени доставки, хотя у Diamtools есть расписание, которому следуют службы доставки.
  • Процесс оплаты разбит на несколько шагов, с переходами по страницам.
  • Тяжело воспринимать страницу оформления и оплаты заказа.
  • Купить все товары из корзины в рассрочку или в кредит было нельзя. Нужно было оформлять каждый товар по очереди в их карточках.
  • Доставка обговаривалась с менеджером после телефону после подтверждения заказа.
  • При оформлении заказа каждый раз нужно было вносить свои данные.

Стало:

  • Интегрировали сервис Dadata для автоматического подтягивания сведений о юрлицах по ИНН. Расширяем внедрение сервиса на блок оформления доставки и ЛК пользователя в части подсказок для адресов.
  • Ручное редактирование даты доставки заблокировано.
  • Использовали визуальные акценты для помощи пользователю в навигации по чекауту. Также клиенты Diamtools теперь могут купить в кредит или взять в рассрочку все товары из корзины.
  • Визуально разбили блоки с разным значением: тип доставки, заполнение параметров доставки, контакты, оплата, а также страница подтверждения с возможностью редактирования данных.
  • Реализовали возможность купить в кредит/рассрочку всю корзину.
  • Если какой-то товар в корзине не доступен для кредита/рассрочки, подсвечиваем его.
  • Мы интегрировали 1 службу доставки для автоматического расчета стоимости и оплаты на сайте. При необходимости можно будет быстро интегрировать и другие транспортные компании.
  • Сейчас все данные можно внести самому на сайте. Если добавить информацию в ЛК, то она будет подставляться автоматически.
  • Клиенты магазина теперь оформляют заказ в 2-3 раза быстрее, чем раньше.
  • Раньше у пользователя была возможность входа на сайт только по логину и паролю. Теперь упрощена регистрация и авторизация пользователя, не нужно помнить логин/пароль для входа. Достаточно указать номер телефона и ввести код из смс.

Стек проекта

Для разработки фронтенда использовали Vue.js+Nuxt.js. Причин несколько:

  • Оптимизация и скорость. При обновлении страниц фреймворк не загружает одинаковые компоненты, что значительно увеличивает скорость работы сайта — иногда в несколько раз по сравнению с веб-приложением не на базе Nuxt.js.
  • SEO. Если сайт сделан на фреймворке, то поисковики (Google или Яндекс) не считывают все данные корректно. Автоматическая генерация страниц с помощью Nuxt.js значительно улучшает индексацию сайта поисковиками. То есть сайт с большей вероятностью попадет на высокие места в поиске по ключевым запросам.
  • Масштабируемость. В случае необходимости наращивания функционала интернет-магазина, с Nuxt.js расширение функций сайта делать проще и в разы быстрее.

Результаты:

  • Запустили мультибрендовый интернет-магазин с комплексным редизайном,то есть осовременили дизайн сохранив его стилистику.
  • Переработали логику и структуру каталога, что теперь позволяет клиентам делать заказы товаров очень легко и быстро.
  • Улучшили карточки товаров с точки зрения интерфейсов.
  • Исправили все возникающие ошибки при поиске товаров и оформлении заказов.
  • Настроили обмен данных с окружением: системой складского учета, службами доставки.
  • Добавили оплату, возможность взять в кредит или рассрочку товар. Реализовали мы это, с помощью дополнительного параметра, добавить товар в отдельную категорию с уцененными товарами.
  • В корзине при выборе ПВЗ на карте, для удобства сделана кластеризация.
  • Подключили Dadata.
  • Упростили регистрацию и авторизацию пользователя, теперь не нужно помнить логин/пароль для входа. Достаточно указать номер телефона и ввести код из смс.
  • Подключили сервис геолокации пользователя по ip адресу. Для вывода в отдельную категорию (уцененные и б/у товары) был сделан тег по которому подбираются товары в данную категорию.

Отзыв клиента

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

Экспертиза специалистов из AIR помогла нам построить эффективный интернет-магазин, который можно масштабировать и развивать дальше.

Михаил Петросянц
Руководитель направления интернет-маркетинга
0
Комментарии
Читать все 0 комментариев
null