Quarta Hunt
Разработали современный e-commerce для охотничьего интернет-магазина с оптовым направлением.
Разработали современный e-commerce для охотничьего интернет-магазина с оптовым направлением.
Клиент пришёл с двумя задачами: обновить морально устаревший сайт и сделать его удобным современным e-commerce с механиками маркетплейсов, а также разработать стратегию продвижения через YouTube. Проект включал проектирование структуры, контент, дизайн и сложную разработку с учётом CMS Bitrix и интеграции с 1С.
Исследования, создание структуры сайта и наполнение контентом, его оптимизация для продвижения, оформление прототипов страниц, составление технического задания.
Разработка дизайн-концепции, оформление всех страниц сайта, создание адаптивных версий для каждой страницы.
Разработка визуальной части — Frontend, разработка серверной части — Backend. Интеграция с сервисами.
Оформление социальных сетей и разработка стратегии для продвижения на YouTube.
Клиенту был нужен удобный и простой в использовании сайт, который при этом выполняет роль полноценного онлайн-магазина. Архитектурно сайт должен был напоминать маркетплейсы и включать их ключевые механики.
На главной странице важно было отразить максимум полезной информации для покупателей, сохранив чистоту и читаемость интерфейса. Мы закладывали умный поиск, интуитивно понятное меню и гибкую систему фильтрации товаров.
Также требовалось предусмотреть два типа пользователей — оптовых и розничных — с разными условиями и ценами. Отдельное внимание уделили карточке товара, каталогу, корзине и оформлению заказа как ключевым точкам пользовательского пути.
На старте проекта мы изучили рынок, конкурентную среду и специфику e-commerce в охотничьей тематике. В качестве ориентира по пользовательскому опыту рассматривали крупные маркетплейсы — Ozon и Wildberries, с их привычными паттернами навигации, поиска и работы с каталогом.
Продумали архитектуру сайта, пользовательские сценарии и ключевые страницы: главную, каталог, карточку товара, корзину и оформление заказа.
Отдельно заложили логику для двух типов пользователей — розничных и оптовых — с разными условиями и отображением товаров.
Все проектные решения были собраны в контентные прототипы страниц. Прототипы включали финальные тексты, SEO-логику и описание функционала, после чего были согласованы с заказчиком и переданы в дизайн и разработку.
В рамках этапа маркетингового проектирования мы продумали структуру всех ключевых страниц интернет-магазина и их роль в пользовательском пути — от первого захода на сайт до оформления заказа и повторных покупок.
Для главной страницы мы спроектировали интуитивно понятный интерфейс, удобный для пользователей сайта. Через главную страницу легко попасть во все остальные разделы сайта, ведь все навигационные элементы знакомы посетителям, а условные обозначения привычны пользователям и логично расположены.
Каталог содержит большое количество категорий и подкатегорий, с помощью которых можно быстро найти интересующий товар. Обеспечили привычный для пользователей вид тегов категорий и подкатегорий. Кастомизировали категории с помощью визуальной подачи, создали баннерную сетку, которую является частью навигационной системы сайта.
Сделали содержательные карточки товаров: добавили возможность подробно рассмотреть товар с разных ракурсов и в масштабировании, расписали конкретные характеристики, оставили описание и возможную комплектацию к каждому товару. Вся основная, но при этом обширная информация, представленная на карточке товара, органически скомпонована, что упрощает взаимодействие с карточкой.
Описание товара, помимо текста, может содержать в себе графики, таблицы и любой HTML-текст. Также мы добавили видео с обзором товара и информация о возможности к самовывозу.
Создали блок с карточками «Комплекты», который предлагает дополнительные комплектующие по заниженной цене.
Также предусмотрен блок «С этим товаром покупают», который предлагает сопутствующие с покупкой дополнительные товары. Карточку закрывает инфобаннер, который выставляется на целый раздел и может использоваться в качестве рекламного места или навигационного объекта.
Добавили уникальную механику, разработанную специально под заказчика: при добавлении основного товара формируется скидка на комплект. Наша разработка позволяет с базы 1C передавать комплекты для карточки товара. В зависимости от количества товаров рассчитывается скидка по формуле: соотношение величины стоимости товара к стоимости комплекта. Подобную механику можно увидеть только на крупных маркетплейсах: Ozon, Wildberries.
Сделали удобную корзину: предусмотрели наглядное отображение цены, добавили возможность поштучно добавлять или убирать товар из корзины, в самой корзине отображается рейтинг товара, а также ссылка на страницу с отзывами.
Система отзывов тоже сделана по аналогии с сайтами-маркетплесами. У пользователя сайта появилась возможность оставлять отзывы в виде комментариев и удобной рейтинговой системы по каждому товару. Перед появлением на сайте отзыв проходит модерацию.
При оформлении заказа дали возможность выбирать способ доставки: «Самовывоз», «Почта России», «Доставка», предусмотрели различные возможные способы оплаты, добавили поле для получения скидки с помощью накопленных бонусных баллов либо промокода. Все добавленные товары отображаются в удобном формате списка, что избавляет страницу от лишней визуальной нагруженности.
Полностью продумали с сверстали удобный личный кабинет пользователя. В личном кабинете пользователя будут отображаться его личные данные, которые можно сменить, история всех заказов, количество накопленных бонусных баллов, адрес доставки и поле для смены пароля.
Предусмотрели возможность создать лендинг под каждый бренд, представленный в магазине Quarta Hunt. На примере одного из брендов сверстали лендинг-шаблон с обширными сведениями, который будет легко приспособить под любой из брендов и внедрить в структуру сайта.
Предусмотрели отдельные формы регистрации и прайс листы для оптовых покупателей. Через форму регистрации оптовика можно отправить заявку на получение статуса «Оптовик». При одобрении заявки, после авторизации на странице будут отображаться уникальные предложения для оптовых покупателей.
Продумали и разработали страницу, где будет постоянно размещаться новый контент, например, новостные сводки по охотничьей тематике, информация о новых поступлениях.
Добавили отдельную вкладку, на которой соискатель может ознакомиться с открытыми вакансиями. Упростили и ускорили поиск актуальных рабочих мест, добавив фильтры: тип вакансии, график работы, заработная плата.
Параллельно с процессом прототипирования утвердили документ с четкими требованиями к проекту, в соответствии с которым была проведена вся дальнейшая работа, связанная с разработкой. Техническое задание включает в себя изображение дизайн-прототипов, описание функциональных особенностей проекта, отображение пользовательского сценария.
Мы решили сделать сайт легким для восприятия, простым в использовании, удобным и понятным, ненагроможденным с достаточным количеством «воздуха». Для этого мы использовали сочетание белого с серым и фирменный синий цвет в оформлении. Акценты в кнопках и тексте расставили с помощью оранжевого. Весь текст выполнен легко читаемым шрифтом без засечек. По итогу мы разработали дизайн, который направлен на пробуждение приятных эмоций у пользователя.
Первым этапом мы разработали мудборд. Подобрали примеры с сайтов конкурентов и из других интернет-магазинов. Обсудили с клиентом возможные примеры оформления главной страницы, карточек товаров, страниц каталога. Затем, исходя из предпочтений заказчика, начали наполнять прототип визуалом.
Мы поняли, что если базировать стиль на имеющемся логотипе, то современный дизайн не получится. Поэтому созданный нами новый логотип стал более минималистичным, осовремененным и упрощенным для того, чтобы он релевантно смотрелся как в онлайн, так и в офлайн-форматах.
После мудборда перешли к созданию дизайн-концепции сайта на примере главной страницы. Мы подбирали различные шрифты и акцентные цвета, дополнительную графику. Рассмотрев несколько вариантов, остановились на оранжевых акцентах в кнопках и тексте, выбрали Gotham Pro в качестве основного шрифта, Q из логотипа стала графическим элементом, дополняющим фотографии на сайте.
Затем оформили все десктопные страницы сайта в соответствии с согласованным прототипом. На главной странице сайта интуитивно понятно расположили все блоки и интерактивные объекты.
Сделали у карточек и кнопок скругленные углы, что придало дизайну сайта некоторой мягкости и легкости. Все иконки выполнили в минималистичном стиле, чтобы дизайн был современным и соответствовал текущим тенденциям. Решили отказаться от иллюстраций на карточках, так как они не могли полноценно передать суть продукта, поэтому заменили их на фотографии.
При разработке дизайна в основу легла фирменная цветовая гамма, а информационный контент на сайте мы постарались разбавить атмосферными фотографиями с пейзажами леса. Это позволило добиться того, что сайт стал не только полезным, но и вдохновляющим, взывающим к ностальгическим чувствам посетителя, к тому же при посещении сайта ощущается дух охоты, авантюризма и приключений.
Сайт без проблем будет открываться на любых устройствах: ПК, смартфоны, планшеты. Мобильная версия сайта разработана в стиле мобильного приложения, но при этом нет необходимости в скачивании и установке. Очень важное изменение — меню отображается внизу, что упрощает навигацию по мобильной версии и делает её удобной в использовании.
С точки зрения разработки задача ставилась сложная. Визуальная составляющая сайта и его функциональная часть предполагает реактивный фреймворк, который бы повысил быстродействие сайта. Для этого был выбрана уникальная связка Nuxt.js + TypeScript с админкой CMS Bitrix. Для реализации функционала нами были разработаны кастомные модули. Кроме того, требовалось реализовать синхронизацию с 1C в части обмена с базой товаров.
Предусмотрели удобное, гибкое управление страницами сайта и их редактирование со стороны администратора. Все баннерные разделы, категории и вся стилистика способны редактироваться под потребности администратора. Создали сложные фильтры, которые продуманы под каждый из подразделов категорий. Вся информация: фото, документация товара, фильтры и т.д. приходит из базы 1C, обрабатывается, а затем выводится в том виде, который предусмотрен техническим заданием.
На сайте можно авторизоваться через мобильный телефон или через аккаунт социальной сети. При регистрации через социальные сети сразу будут отображаться имя и фамилия нового пользователь, а главное — почта. Новый пользователь будет отображаться в административной панели со всей необходимой для покупок и коммуникации с ним информацией.
В сайт интегрированы База 1С, CDEK, «ПочтаРоссии» и PayAnyWay. Это делает процессы покупки и оформления доставки более понятными.
Пароли пользователей хранятся в зашифрованном виде, а информация, передающаяся между пользователем и серверами, поддерживает работу с протоколом SSL.
Поисковой модуль дает подсказки во время ввода запроса. При поиске учитывается морфология, даже если точное совпадение отсутствует, запрос конвертируется в нужную форму и выдается результат по схожим критериям. Поиск распознает англоязычные бренды, введенные кириллицей. Результат выдачи можно сортировать по: убыванию и возрастанию цены, названию в алфавитном и обратном порядке.
На новом сайте появился элемент «Сравнение», который позволяет сопоставить выбранный товар с его аналогами. Нажатие на значок «Избранное» инициирует добавление в список избранных товаров, к которому можно перейти в любой момент.
На сайте отображаются видео, напрямую выведенные с видеохостинга или хранящиеся в медиабиблиотеке.
Клиенту требовалась новая стратегия для продвижения через социальные сети и видеохостинг YouTube. Для этого мы:
Проект позволил перейти от устаревшего сайта к современной цифровой платформе продаж. Продуманная архитектура, маркетплейс-механики и интеграция с внутренними системами клиента сделали сайт полноценным инструментом работы с аудиторией и развития бренда.