Интернет-магазин Diamtools

Главное о кейсе

- Создан интернет-магазин, используя технологию Vue.js, что значительно повысило скорость работы сайта.
- Успешно внедрили и настроили умную систему поиска на сайте, что позволило нашим пользователям легче искать нужные товары.
- Переработали структуру каталога и добавили функцию быстрого просмотра карточек товаров, чтобы пользователи могли более удобно получать информацию и принимать решения о покупке. Это положительно сказалось на поведении наших пользователей.
- Улучшена систему регистрации и авторизации пользователей. Теперь мы больше не требуем запоминать логин и пароль - для авторизации достаточно указать номер телефона и пин-код из SMS.
- Упростили процесс оформления заказа, поместив все необходимые шаги на одну страницу и убрав запутанность. Это привело к увеличению количества продаж.
- Разработали уникальный дизайн для нашего интернет-магазина, исходя из опыта пользователей.
- Мы создали прототипы и обеспечили удобство использования нашего магазина. Дизайнеры сделали его узнаваемым, легким и добавили акценты, для того чтобы пользователю было проще ориентироваться на сайте.

Как проект изменил жизнь пользователей

Улучшенный каталог: Были внесены изменения в каталог товаров, чтобы сделать его более удобным для пользователей. Внедрение интеллектуального поиска с использованием Elastic позволяет распознавать слова с опечатками, различные склонения и падежи, а также кириллические названия, набранные на латинице. Это упрощает поиск и позволяет пользователям находить товары даже по артикулу. Увеличение количества результатов на странице дает пользователям больше выбора.

Улучшенная корзина: Были внесены изменения в корзину, чтобы упростить процесс оформления заказов. Внедрение автозаполнения полей и блокировка ручного редактирования даты доставки ускоряют процесс оформления заказа. Клиенты теперь могут также купить все товары из корзины в рассрочку или кредит, что делает оплату более гибкой и удобной.

Улучшенный процесс оформления заказа: Были внесены изменения в процесс оформления заказа, чтобы сделать его более понятным и удобным. Визуальное разделение блоков с разными значениями, такими как тип доставки, заполнение параметров доставки, контакты и оплата, упрощает навигацию для пользователей. Реализация возможности купить в кредит или рассрочку всю корзину дает больше гибкости в выборе оплаты.

Улучшенная регистрация и авторизация: Были внесены изменения в процесс регистрации и авторизации пользователей. Упрощение процесса регистрации и авторизации путем использования номера телефона и кода из SMS-сообщения. Это делает вход на сайт быстрее и удобнее для пользователей.

Все эти изменения привели к тому, что клиенты магазина теперь могут оформлять заказы значительно быстрее, чем раньше. Они также получили больше гибкости в оплате и более удобные способы поиска и выбора товаров. Это позволяет пользователям экономить время и улучшает их общий опыт пользования интернет-магазином.

Бизнес-задача и ее решение

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

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

Крафт (мастерство), реализация, технические детали

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Прочая информация о кейсе

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

Скриншоты