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

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

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

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

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

Было

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

Стало

  • Уровней вложенности: два, максимум — 3 в отдельных разделах
  • Умный ввод интегрирован, использовали 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 помогла нам построить эффективный интернет-магазин, который можно масштабировать и развивать дальше.

Михаил Петросянц

Руководитель направления интернет-маркетинга