Новый интернет-магазин для 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 помогла нам построить эффективный интернет-магазин, который можно масштабировать и развивать дальше.