Разработали интернет-магазин Quarta Hunt с B2C-, B2B-сценариями и механиками маркетплейса

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

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

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

Сайт реализован на Nuxt.js и TypeScript с административной системой CMS Bitrix. Интеграция с 1С передаёт товары, цены, фотографии, документацию, характеристики, фильтры и комплекты. Также подключены СДЭК, Почта России и PayAnyWay.

В результате Quarta Hunt получил единую цифровую платформу для B2C- и B2B-продаж. Пользователи могут быстро находить и сравнивать товары, собирать комплекты, выбирать доставку и оформлять заказ, а команда клиента — самостоятельно управлять каталогом, баннерами и контентом. Отдельно разработали стратегию YouTube-продвижения: после оптимизации видео стали вдвое чаще попадать в рекомендации, поисковый трафик с YouTube вырос в два раза, CTR также увеличился вдвое.

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

ДО ПРОЕКТА

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

ПОСЛЕ ЗАПУСКА

1. Поиск и навигация

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

2. Выбор товара

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

Добавили сравнение товаров, избранное, отзывы и рейтинговую систему. На отдельном экране характеристики выводятся в единой таблице: пользователь может скрыть совпадающие параметры и сосредоточиться на различиях. Блоки «С этим товаром покупают» и «Комплекты» помогают подобрать дополнительные позиции, а система автоматически рассчитывает скидку для комплекта.

3. Корзина, доставка и оплата

В корзине видны состав заказа, количество товаров, стоимость и начисляемые бонусы. Количество позиций можно менять прямо на странице. При оформлении доступны самовывоз, доставка, Почта России и пункты выдачи СДЭК; подходящий пункт выбирается на интерактивной карте. Подключены несколько способов оплаты, промокоды и использование бонусных баллов. Даже крупный заказ остаётся компактным и понятным перед оплатой.

4. Отдельный B2B-сценарий

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

5. Работа на любом устройстве

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

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

ЗАДАЧА

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

ПОДХОД

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

АРХИТЕКТУРА МАГАЗИНА

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

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

АВТОМАТИЗАЦИЯ

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

МАСШТАБИРОВАНИЕ

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

ПОДГОТОВКА К ПРОДВИЖЕНИЮ

Базовую семантику и SEO-требования заложили на уровне структуры и текстовых прототипов. Отдельно исследовали YouTube-направление и подготовили стратегию контента, рубрики и макеты обложек для видео.

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

ТЕХНОЛОГИЧЕСКАЯ АРХИТЕКТУРА

Клиентскую часть разработали на Nuxt.js и TypeScript, административную — на CMS Bitrix. Такая связка объединила быстродействующий современный интерфейс с привычным для команды клиента управлением каталогом и контентом.

ИНТЕГРАЦИИ

Настроили обмен с 1С: на сайт автоматически поступают товары, цены, фотографии, документация, характеристики, фильтры и комплекты. Состав комплектов и данные для автоматического расчёта скидки также приходят из 1С. Подключили СДЭК, Почту России и PayAnyWay.

ПОИСК И КАТАЛОГ

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

КАРТОЧКА ТОВАРА И КОМПЛЕКТЫ

Карточка поддерживает сложный контент: таблицы, графики, видео и технические характеристики. Реализовали товарные рекомендации, комплекты с автоматическим расчётом скидки, сравнение характеристик, избранное, отзывы и модерацию пользовательского контента.

БЕЗОПАСНОСТЬ

Пароли пользователей хранятся в зашифрованном виде, а обмен данными защищён SSL. Авторизация работает по номеру телефона и через аккаунты социальных сетей.

ВИЗУАЛЬНАЯ СИСТЕМА

Белый и серый использовали как основные цвета, фирменный синий — для навигации, оранжевый — для акцентов и действий. Скруглённые карточки, минималистичные иконки и свободная компоновка визуально облегчили большой объём информации.

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

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

ИССЛЕДОВАНИЕ БИЗНЕСА

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

АНАЛИЗ РЫНКА

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

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

ПРОЕКТИРОВАНИЕ И КОНТЕНТ

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

ИССЛЕДОВАНИЕ YOUTUBE-АУДИТОРИИ

Для стратегии продвижения изучили более 50 российских и зарубежных оружейных каналов и выбрали 15 конкурентов для детального анализа. Дополнительно исследовали около 30 тематических сообществ ВКонтакте, активность 100 пользователей, контент подписчиков Quarta Hunt и интересы аудитории через YouScan.

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

Скриншоты