drops.by

Интернет-магазин автохимии Drops.by

Компания Drops - крупнейший оптовый поставщик автохимии на территории Беларуси, огромная доля всех автотоваров на полках магазинах, автозаправок поставляются именно этой компаний.

Изначально проект начинался как интернет-магазин, ориентированный только на юридические лица, партнеров компании. В процессе переговоров по проекту нами было предложено множество IT решений для проекта, идей для реализации. И вот мы уже делаем крупнейший в своем сегменте интернет-магазин, который призван автоматизировать бизнес для B2B сегмента, формировать их взгляд на продукцию, бренды и собрать заинтересованную аудиторию среди физических лиц путем представления широкого ассортимента, полезных обзоров и бесплатных консультаций на сайте.

Влад
Программист
Нами были принято решение реализовать проект полностью как SPA, используя связку Laravel + Vue.js + Nuxt.js, т.к. имеем за плечами богатый опыт разработки бэкенда на Laravel, а Nuxt.js позволяет получить максимально комфортный опыт при разработке и управлении состоянием фронтенда. До этого у нас было несколько небольших проектов на Nuxt.js, и хотелось попробовать себя в реализации крупного проекта с использованием этой связки.
Подогревало интерес еще и то, что в Беларуси мы были одними из первых. В итого данное решение полностью окупило себя как со стороны разработки, так и итогового результата. Удовлетворение от работы с фреймворком, управление состоянием, скорость работы сайта и поисковый позиции показали правильность нашего решения.
SPA показал себя как отличное развитие web-технологий и прекрасный инструмент для реализации потребностей разработчиков и удовлетворения от использования вашего продукта конечными пользователями.
Подробный технический обзор мы разместили у себя в блоге: https://websecret.by/blog/vuejs

Помимо довольно стандартных блоков вроде статей, мы представили подборки товаров для решения самых частых проблем, вроде, как завести дизель зимой, чем лучше пропитывать кожу, что подарить мужчине на 23 февраля и так далее. А так же сделали анимированную машину, где при наведении на каждый узел подсвечиваются категории товаров для этого узла.

Сайт разрабатывался по принципам mobile first, т.е. делая упор в дизайне и верстке в первую очередь на мобильную версию. Так, например, в мобильной версии не подгружаются тяжелые блоки, в подборках отображается меньшее количество товаров. Все, чтобы сделать сайт на телефонах быстрым и удобным.

Каталог товаров имеет разное представление для физических и дилеров компании. Делая представление для физических лиц мы делали упор на следующие моменты:

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

При проектировании каталога для дилеров делали упор:

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

Интеграция с 1С позволяет в реальном времени показывать актуальные остатки и цены.

Для более чем 1000 ассортимента каталога проработано дерево и иконки.

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

В портфолио мы опишем максимальное состояние, которое может быть у страницы товара. Некоторое элементы отображаются только для оптовых покупателей. Если судить по этой странице, то можно представить сколько функционала разработано. И так:

  • календарь доставок в регион дилера
  • цена с учетом персональных настроек пользователя
  • актуальные остатки товара
  • аналоги товара
  • товары, которые покупают вместе, причем сразу рассчитывается цена и можно добавить весь комплект в корзину сразу
  • абсолютно индивидуальное описание каждого товара и его характеристики
  • советы специалиста по применению каждого конкретного товара
  • связанные статьи, видео обзоры

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

Как и во всех проектах, мы особое внимание уделяем прорисовке абсолютно всех состояний, мелких элементов.

Т.к. сайт построен как SPA, вверху описания есть ссылка на статью в блоге, то корзина обсчитывает все в реальном времени и мгновенно при изменении количества товаров, ассортимента.
И в качестве механизма cross-sale в корзине отображаются самые популярные товары за последнее время.

Оформление заказа реализовали в лучших традициях: спрятали все лишнее с сайта и оставили покупателя 1 на 1 с процессов оформления, не отвлекая его.

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

Для оптовых покупателей разработан мощнейший личный кабинет, который полностью синхронизируется с 1С клиента. Так, теперь региональный представитель может самостоятельно изменить свои реквизиты, точки доставок (особенно полезно для сетевых магазинов), управлять менеджерами своей компании и уровнем их доступа, а так же просмотреть состояние своих заказов и сгенерировать в автоматическом режиме счета на оплату.

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

На момент запуска проект клиент не рассчитывает осуществлять доставку товаров для физических лиц, только для юридических.
А, учитывая, что наш клиент является первым и крупнейшим поставщиком автохимии в Беларуси, ассортимент сайта широко представленных на АЗС и магазинах страны.
Для удобства таких клиентов мы разработали интерактивную карту, на которое можно осуществлять поиск по огромной сети магазинов партнеров.

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

Но были вознаграждены замечательными благодарностями со стороны клиента и продолжаем наше сотрудничество и развитие проекта.  

Да-да, это именно мы те клиенты, кто хотел и готовил сайт по рецепту:

  • Топовый фреймворк от космолёта Laravel – 1 кг
  • Вёрсточка в стиле Onliner – 400 г
  • Нотки Lamoda – 250 г
  • Это Вы забыли, а мы так хотим – 100 г
  • Random creative – 20 г
  • Всё фигня, надо переделать – 1 черпачок
  • Шаблон из коллекции 10 лучших сайтов всех времён и народ – щепотка
  • Нервы – по вкусу

И это при том, что мы подготовили огромное кол-во вводных ТЗ и документации :) В итоге? Мы благодарим команду Веб Секрет за идеи, опыт, терпение и понимание. Конечно, не без косяков с обеих сторон, но мы довольны результатом и будем продолжать сотрудничество в последующих проектах. Пожалуй, это хорошее начало и уже сегодня у нас есть масса идей и реальных задач, которые можно реализовать именно с Веб Секрет.

Егор Фарейторов
Руководитель отдела маркетинга
Отзыв от клиента

Ну и напоследок дизайн некоторых информационных страниц, чтобы показать как мы поработали над представлением довольно стандартной информации