Новый интернет-магазин для 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 адресу. Для вывода в отдельную категорию (уцененные и б/у товары) был сделан тег по которому подбираются товары в данную категорию.

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