LightLogo
Проект

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

Удобство покупок для поклонников соревнований по дрифту
Дата
2019
Экспертизы
Аналитика
Проектирование
Дизайн
Frontend
Backend
Тип продукта
Интернет-магазины
Отрасль
E-commerce
Разработали имиджевый интернет-магазин для RDS —  Российской Дрифт Серии. Это всероссийское многоэтапное официальное соревнование по дрифту.

Соревнования ежегодно проходят по всей России с мая по октябрь. В каждом городе собираются тысячи болельщиков.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Источник фото: https://vdrifte.ru
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Источник фото: https://vdrifte.ru

О проекте

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

Упор при разработке сделали на аналитику аудитории и стилистику. В результате получился функциональный интернет-магазин для болельщиков самых масштабных соревнований по дрифту в России.
Срок: 1,5 месяца. Команда: интернет-маркетолог, SEO-аналитик, дизайнер, арт-директор,
3 разработчика, менеджер проекта. Стоимость разработки подобного интернет-магазина: от 900 000 рублей

Задача

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

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

Аналитика

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

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

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

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

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

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

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

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

Так как товаров немного, достаточно двух уровней:
  • 1 уровень: Кому? — Женщинам, мужчинам, детям.
  • 2 уровень: Что? — Толстовка, футболка, свитшот и прч.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
В таком виде структуру реализовали в меню:
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии

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

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

Дизайн

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

Концепция

На старте работы у нас был логотип Российской Дрифт Серии, фирменные цвета и фотографии брендированной одежды.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Одежда на фотографиях была разложена небрежно, качество изображений было неидеально. Дизайнер зацепился за такую подачу товаров на фото и решил сделать весь дизайн сайта с помехами.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Так родилась идея глитч-анимации — цифровых помех на изображениях и в элементах интерфейса. Этот эффект прослеживается во всех деталях: от изображений товаров до плашек и кнопок.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Разработали иконки в стилистике сайта. Например, привычный значок корзины поставили на колеса и сделали его интерактивным.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Подобрали цвета, которые гармонируют с цветом логотипа. Фон сделали контрастным фиолетовым, кнопки и навигационные элементы оставили в фирменных цветах лого, а для плашек использовали градиент.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Еще дизайн-коцепции сайтов от Атвинты

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

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

Плашка баннера, заголовок и кнопка CTA (call to action) при наведении анимированы глитч-эффектом.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Навигация по каталогу.
Здесь вынесли на плашки категории каталога и показали количество товаров в каждом разделе. Плашки — контрастные к основному фону и с градиентом. При наведении курсора появляется кнопка целевого действия.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
О компании
У Российской Дрифт Серии есть основной сайт, который подробно рассказывает о соревнованиях. Задача этого блока — верифицировать интернет-магазин как официальное представительство бренда. И при этом не копировать информацию с основного сайта и не отвлекать на себя все внимание пользователей.

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

Для удобства покупателей предусмотрели выбор размера и добавление в корзину без перехода в каталог.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Контакты магазин в офлайне
У RDS нет постоянной точки продаж офлайн, магазин перемещается в тот город, где проходят соревнования.

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

В этом же разделе RDS анонсируют даты и города ближайших соревнований.  
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии

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

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

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

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

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

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

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

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

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

Для клиентов

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

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

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

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

Результат

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

Интернет-магазин сохранил стилистику основного сайта, но при этом функционирует независимо от него. Благодаря такому решению RDS проще продвигать товары и получать новых покупателей.
Интернет-магазин брендовой атрибутики для Российской Дрифт Серии
Источник фото: https://vdrifte.ru
Robot