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

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