Serenity Quarta Hunt Разработали современный e-commerce для охотничьего интернет-магазина с оптовым направлением.
572000.00

Quarta Hunt

Разработали современный e-commerce для охотничьего интернет-магазина с оптовым направлением.

Quarta Hunt — интернет-магазин для охотников с оптовым направлением и большой товарной матрицей.

Клиент пришёл с двумя задачами: обновить морально устаревший сайт и сделать его удобным современным e-commerce с механиками маркетплейсов, а также разработать стратегию продвижения через YouTube. Проект включал проектирование структуры, контент, дизайн и сложную разработку с учётом CMS Bitrix и интеграции с 1С.

 

Этапы работы

  • 1

    Маркетинговое проектирование сайта

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

  • 2

    Дизайн

    Разработка дизайн-концепции, оформление всех страниц сайта, создание адаптивных версий для каждой страницы.

  • 3

    Разработка

    Разработка визуальной части — Frontend, разработка серверной части — Backend. Интеграция с сервисами.

  • 4

    Социальные сети

    Оформление социальных сетей и разработка стратегии для продвижения на YouTube.

1

Маркетинговое проектирование

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

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

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

Исследование и аналитика

На старте проекта мы изучили рынок, конкурентную среду и специфику e-commerce в охотничьей тематике. В качестве ориентира по пользовательскому опыту рассматривали крупные маркетплейсы — Ozon и Wildberries, с их привычными паттернами навигации, поиска и работы с каталогом.

Маркетинговое проектирование сайта

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

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

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

Провели ряд брифингов

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

Выполнили SEO-аналитику

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

Проанализировали контент

Провели анализ контентной составляющей у конкурентов. В ходе анализа мы отметили основные недостатки их сайтов и трансформировали в преимущества для Quarta Hunt. Каждый элемент изучили с точки зрения удобства для конечного пользователя.

Разработали структуру

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

Разработали лаконичный контент

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

Сформировали контентный прототип

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

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

Главная страница

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

Каталог

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

Карточки товаров

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

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

Создали блок с карточками «Комплекты», который предлагает дополнительные комплектующие по заниженной цене. 

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

 

Комплекты

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

Корзина

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

Отзывы

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

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

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

Личный кабинет

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

Шаблон лендинга для разных брендов

Предусмотрели возможность создать лендинг под каждый бренд, представленный в магазине Quarta Hunt. На примере одного из брендов сверстали лендинг-шаблон с обширными сведениями, который будет легко приспособить под любой из брендов и внедрить в структуру сайта.

Оптовикам

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

 

Собственный блог

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

Вакансии

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

Составили ТЗ

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

 

2

Дизайн

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

Собрали референсы и разработали мудборд

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

Мудборд

Обновили логотип

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

Создали эстетичную главную страницу

После мудборда перешли к созданию дизайн-концепции сайта на примере главной страницы. Мы подбирали различные шрифты и акцентные цвета, дополнительную графику. Рассмотрев несколько вариантов, остановились на оранжевых акцентах в кнопках и тексте, выбрали Gotham Pro в качестве основного шрифта, Q из логотипа стала графическим элементом, дополняющим фотографии на сайте.

Затем оформили все десктопные страницы сайта в соответствии с согласованным прототипом. На главной странице сайта интуитивно понятно расположили все блоки и интерактивные объекты.

Доработали элементы

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

Атмосфера сайта

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

Slide image
Slide image
Slide image

Разработали адаптивный
дизайн

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

3

Разработка

С точки зрения разработки задача ставилась сложная. Визуальная составляющая сайта и его функциональная часть предполагает реактивный фреймворк, который бы повысил быстродействие сайта. Для этого был выбрана уникальная связка Nuxt.js + TypeScript с админкой CMS Bitrix. Для реализации функционала нами были разработаны кастомные модули. Кроме того, требовалось реализовать синхронизацию с 1C в части обмена с базой товаров.

 

Гибкое управление

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

Авторизация

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

Интегрировали сторонние сервисы

В сайт интегрированы База 1С, CDEK, «ПочтаРоссии» и PayAnyWay. Это делает процессы покупки и оформления доставки более понятными.

Гарантировали безопасность

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

Сделали умный поиск

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

Добавили сравнение товаров и вкладку «Избранное»

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

Вывели видео с YouTube

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

4

Социальные сети

Клиенту требовалась новая стратегия для продвижения через социальные сети и видеохостинг YouTube. Для этого мы:

Провели аналитику каналов конкурентов

Мы проанализировали более 50 как российских, так и иностранных каналов на оружейную тематику. Из них отобрали 15 на более подробное изучение.

Провели анализ аудитории

Проанализировали порядка 30 сообществ в VK через сервис аналитики ЦереброТаргет. Сделали репрезентативную выборку из 100 наиболее активных пользователей этих сообществ. Вручную проанализировали контент 20 аккаунтов, подписанных на Quarta Hunt в Instagram. Провели анализ интересов аудитории через YouScan.

Выявили интересы

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

Проанализировали YouTube-каналы оружейной тематики

Выявили сильные и слабые стороны прямых конкурентов, работающих на территории РФ. На основе полученных данных определили пул популярных тем и вопросов, на которые следовало сделать упор.

Проанализировали YouTube-каналы смежной тематики

Выявили сильные стороны, определили наиболее популярные темы, которые можно использовать для контента Quarta Hunt.

Разработали концепции

На основе аналитики аудитории и конкурентов предложили клиенту несколько идей для их YouTube-канала.

Макеты обложек для видео

Результат

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

Команда

Глеб Боровиков
Аккаунт-менеджер
Сергей Кирин
Проджект-менеджер, лидер направления «Веб-разработка»
Елизавета Румянцева
Арт-директор
Артем Пак
Контент-маркетолог
Виталий Листопадов
SEO-специалист
Дарья Круглова
Проектировщик
Кристина Бумбак
Дизайнер сайта
Георгий Арбиев
Frontend-разработчик
Леонид Брагин
Backend-разработка
Кристина Гончарова
Дизайнер соцсетей
Оставить заявку
Позвонить