Интернет-магазин брендовой атрибутики для Российской Дрифт Серии

Заказчик
RDS — Российская Дрифт Серия.
Задача
Разработать имиджевый интернет-магазина для RDS — Российской Дрифт Серии.

Разработали имиджевый интернет-магазин для RDS —  Российской Дрифт Серии. Это всероссийское многоэтапное официальное соревнование по дрифту.

Соревнования ежегодно проходят по всей России с мая по октябрь. В каждом городе собираются тысячи болельщиков.

О проекте

Магазин продает брендированную одежду и атрибутику для поклонников Российской Дрифт Серии. В магазине порядка сотни товаров: толстовки, футболки, кепки, стикеры с логотипом RDS.

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

  • Срок: 1,5 месяца
  • Стоимость: 900’000 рублей
  • Команда: интернет-маркетолог, SEO-аналитик, дизайнер, арт-директор,
  • 3 разработчика, менеджер проекта.

Задача

У Российской Дрифт Серии есть основной сайт, на котором выкладывают анонсы соревнований, пост-релизы и фотоотчеты о прошедших событиях. Один из разделов сайта — каталог товаров с символикой RDS.

 

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

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

Аналитика

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

 

По данным системы аналитики текущая аудитория — молодые мужчины от 18 до 35 лет. Интересуются автомобилями, мототехникой и электроникой. Для интернет-магазина наиболее актуальна более платежеспособная аудитория в возрасте от 25 до 35 лет.

Изучили поисковые запросы, по которым люди приходят на основной сайт RDS. Исследовали общие запросы по тематике и коммерческие запросы, связанные с товарами из каталога. Из ста тысяч поисковых запросов за год, коммерческие запросы составляют всего 2,5%: 2'848 посещений из 112'807. Для информационного сайта соревнований RDS такая структура запросов в пределах нормы. С точки зрения интернет-магазина — это очень низкий показатель.

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

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

 

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

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

 

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

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

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

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

 

Марина Донцова, менеджер проекта

 

Структура главной страницы

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

Для магазина RDS сделали структуру из таких блоков:

  • Слайдер для объявлений: акции, анонсы новых коллекций, товар дня и другая важная информация. На слайдере — изображение с кнопкой для перехода в раздел, который рекламируется на баннере.
  • Быстрые ссылки на категории каталога. По карте кликов мы видели, что пользователи обычно сразу переходят в категории товаров. Поэтому предусмотрели такой блок для быстрого доступа в нужный раздел.
  • О компании: краткая врезка с позиционированием RDS.
  • Карусель с часто покупаемыми товарами.
  • Контакты: адреса офлайн-магазинов, карта проезда.

 

Структура каталога

Так как товаров немного, достаточно двух уровней:

  • 1 уровень: Кому? — Женщинам, мужчинам, детям.
  • 2 уровень: Что? — Толстовка, футболка, свитшот и прч.

 

В таком виде структуру реализовали в меню:

 

Структура карточки товаров

Из карточки пользователь получает информацию о характеристиках товара, размерах, стоимости.  Для интернет-магазина RDS достаточно таких блоков в карточке товара:

  • Наименование товара
  • Фотографии товара 
  • Описание товара
  • Состав и производитель
  • Информация об оплате и доставке
  • Цена
  • Фильтр с выбором размера
  • Фильтр с выбором количества
  • Кнопка «Добавить в корзину»

 

Дизайн

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

Концепция

На старте работы у нас был логотип Российской Дрифт Серии, фирменные цвета и фотографии брендированной одежды.

 

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

 

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

 

Разработали иконки в стилистике сайта. Например, привычный значок корзины поставили на колеса и сделали его интерактивным.

 

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

 

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

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

 

  • Промо-баннеры.

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

 

Плашка баннера, заголовок и кнопка CTA (call to action) при наведении анимированы глитч-эффектом.

 

  • Навигация по каталогу.

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

  • О компании

У Российской Дрифт Серии есть основной сайт, который подробно рассказывает о соревнованиях. Задача этого блока — верифицировать интернет-магазин как официальное представительство бренда. И при этом не копировать информацию с основного сайта и не отвлекать на себя все внимание пользователей.

Эту задачу решили кратким описанием проекта, логотипом и слоганом.

  • Избранные товары

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

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

  • Контакты магазин в офлайне

У RDS нет постоянной точки продаж офлайн, магазин перемещается в тот город, где проходят соревнования.

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

В этом же разделе RDS анонсируют даты и города ближайших соревнований.  

 

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

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

 

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

Структура страницы и акценты расставлены по принципу AIDA: Внимание — Интерес — Желание —  Действие.

Мы привлекаем внимание с помощью фотографии товара и вызываем интерес к покупке. Информация на странице стимулирует желание купить. Контрастно расположенные выбора размера и кнопка «В корзину» поддалкивают к целевому действию.

 

Мобильная версия

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

 

Элементы дизайна и UI-кит

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

 

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

 

Функциональность

Для клиентов

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

 

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

 

На главной странице поклонники соревнований узнают анонсы значимых событий и расписание.

 

Для менеджеров заказчика

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

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

Результат

Теперь клиентам удобно покупать брендированную одежду RDS, а менеджеры компании оперативнее обрабатывают заказы.

 

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

 

 


Перейти на сайт

В карточку агентства

Письмо автору кейса

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