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

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

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

О проекте

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

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

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

Задача

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

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

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

Аналитика

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

Дизайн

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

Концепция

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

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

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

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

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

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

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

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

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

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

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

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

• О компании

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для клиентов

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

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

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

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

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

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

Результат

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

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