Интернет-магазин и эксклюзивная CRM-система для московского streetwear-бренда HH Wear

HH Wear
Тип проекта
Сайт и интернет-магазин с функционалом розничной и оптовой торговли
Используемые технологии
Laravel, Vue.js, Tailwind CSS, Laravel Livewire, Alpine.js, MySQL, NGINX
Адрес в сети

Описание проекта

Работы над этим проектом длились не один год разными этапами, и его модификация продолжается по сей день, вместе с развитием бизнеса. Первое решение было создано в 2014 году и представляло собой статический сайт с интеграцией виджета интернет-магазина Ecwid.

К 2017 году я разработал для HH Wear первую версию эксклюзивной системы на Laravel, позволяющую отказаться от интеграции сторонних платформ и виджетов.

С тех пор эта система развивалась, ее функционал расширялся, и она претерпевала изменения — как технологически, так и с точки зрения дизайна всех ее интерфейсов. Сегодня она состоит из таких основных компонентов:

  • Публичный сайт бренда и собственный интернет-магазин
  • Личный кабинет пользователя с историей заказов
  • Кабинет оптового покупателя с доступом по приглашениям
  • CRM-система для управления розничными и оптовыми продажами

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

Создание интернет-магазина

Все версии собственной торговой платформы HH Wear я разрабатывал на основе PHP-фреймворка Laravel. Главные изменения коснулись опыта взаимодействия с сайтом через повышение интерактивности и расширения функционала CRM-системы. Это было достигнуто с помощью JavaScript-фреймворков Vue и Alpine.js, а также интерактивного фреймворка Laravel Livewire.

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

Простой и удобный каталог, который быстро работает

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

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

Вместе с тем я использовал и технологию "ленивой" загрузки изображений с помощью браузерного API Intersection Observer, чтобы они загружались именно тогда, когда попадают на экран пользователя.

Сами страницы каталога разделены пагинацией на группы по 12 товаров на каждой. Это не только ускоряет запросы сервера к базе данных, но и позволяет снизить количество загружаемых ресурсов в браузере пользователей, а значит — улучшить скорость загрузки этих страниц.

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

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

Карточки товара в стиле эффективного минимализма

Я исполнил дизайн карточек товаров в доступном и минималистичном формате. Это монобрендовый интернет-магазин, и его каталог ограничен, а основной тип продукции — футболки, поэтому нет практического смысла перегружать карточку товара блоками типа "Похожая продукция" или "Также часто смотрят..." в его контексте. Оставим это огромным маркетплейсам.

Что в первую очередь интересует покупателей? Цена товара и доступность нужного размера. Именно эти блоки расположены в карточке товара первым порядком.

Каждому товару принадлежит своя размерная сетка, так как параметры каждой выпущенной модели отличаются, и эти сетки управляются из CRM. Перечень размеров в карточке товара интерактивен и указывает, есть ли в наличии товар каждого выбранного размере, заканчивается ли он, или остаются последние единицы. Размеры, которые уже закончились, будут видны в меню, но выбрать их будет нельзя.

Таким образом, пользователь всегда видит актуальный статус доступности товара по каждому размеру, и при этом нет необходимости отображать публично остаток товара по каждому размеру или общий его остаток. Именно здесь свою службу сослужил фреймворк Laravel Livewire, с помощью которого я максимально сохранил код фронтенда в поле шаблонизатора Blade, но в связке JavaScript + Livewire добавил бесшовные изменения данных карточки товара и корзины в реальном времени.

Корзина и оформление заказа

Весь дизайн сайта исполнен в стиле минимализма, и корзина с интерфейсом оформления заказа не стали исключением.

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

Процесс оформления заказа представляет собой интерактивную мульти-форму из 2-3 ступеней — в зависимости от выбранного направления доставки. Я постарался сделать этот процесс максимально интуитивно понятным, выстроив систему зон и направлений таким образом, чтобы покупателям, заказывающим самовывоз в Москве, не приходилось заполнять лишние поля из формы для покупателей, которые заказывают доставку в регионы и т.д.

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

Удобство интерфейса и высокая скорость работы критически важны для любого интернет-магазина

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

Я записал видео с наглядной демонстрацией, производительности интернет-магазина HH Wear, который я создал, в сравнении с сайтом развитой конкурирующей франшизы в той же нише рынка.

Собственная CRM-система для управления продажами и бизнес-процессами

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

Эта CRM-система выполнена как одностраничное приложение (SPA) на связке Vue.js и Vuex. Основные ее функции заключаются в управлении заказами, каталогом, персоналом, учетом склада, учетом продаж оффлайн-магазина и оптовых заказов, а также в редактировании контента на сайте.

Удобство управления как главный приоритет

Такой инструмент, как CRM-система, должен помогать в управлении бизнесом и упрощать его, а не вносить новые трудности и проблемы. Для HH Wear я разработал эксклюзивную систему управления проектом, интерфейс которой позволяет администратору быстро решать рутинные задачи и легко работать с заказами покупателей.

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

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

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

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

Показатели проекта

За время работы созданной мной системы и сайта HH Wear с середины 2017 по январь 2022 года проект обработал порядка 20 000 заказов и сгенерировал более 43 млн. руб. совокупной выручки через единую систему, объединяющую онлайн-магазин и оффлайн-розницу. Это весьма неплохие показатели для специфичного нишевого бизнеса из двух человек.

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

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