Как маркетинговый подход помогает при разработке интернет-магазина: пошаговый кейс

Digital-агентство «Атвинта» рассказывает, как спроектировать интернет-магазин, опираясь на маркетинговый подход. Разбираем на примере имиджевого интернет-магазина Российской дрифт-серии, всероссийского многоэтапного соревнования по дрифту.

В закладки
​Источник: https://vdrifte.ru/

Вводные к задаче

У Российской Дрифт Серии есть основной сайт с информацией о соревнованиях. Один из разделов сайта — каталог товаров с символикой RDS.

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

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

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

Дизайн интернет-магазина должен помогать пользователю совершать покупку, а компании — продвигать магазин в поиске.

Этапы работы:

  • Аналитика: изучаем аудиторию, ее поведение, конкурентов;
  • Проектирование: с учетом аудитории и ее поведения разрабатываем структуру главной страницы, каталога и карточек товара. На этом же этапе готовим контент: изображения, описание товаров;
  • Дизайн: разрабатываем интерфейс, расставляем акценты на информации о товаре и целевые действия. Цель — сориентировать покупателя в ассортименте, стимулировать положить товар в корзину и купить;
  • Разработка: создаем функциональность для обслуживания покупателей от административной панели для управления контентом до интеграции с CRM, сервисами учета, доставки и оплаты;
  • Тестирование: помимо технического тестирования и оптимизации, проверяем сценарии и пути клиентов при выборе и покупке товара.

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

Аналитика: кто покупатели и как они выбирают товар

Работу начинаем с изучения аудитории, ее поведения и потребностей. Если создаем интернет-магазин с нуля, то исходные данные об аудитории запрашиваем у заказчика, анализируем семантику, изучаем конкурентов.

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

У Российской Дрифт Серии есть сайт с каталогом, поэтому мы изучили текущий спрос и трафик на страницу с каталогом товаров.

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

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

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

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

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

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

Проектирование: как стимулировать покупки

Цель любого интернет-магазина — продавать. Задача дизайнеров — спроектировать интерфейс, который помогает посетителю выбрать товар и оформить заказ.

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

А еще именно на этапе проектирования нужно подготовить контент для сайта. Тогда дизайнеры сразу спроектируют интерфейс интернет-магазина исходя из типа и объема контента.

Какой контент нужен:

— фотографии и видео в хорошем качестве для демонстрации товара;

— описание товаров для карточек;

— текст для главной страниц;

— текст для разделов об оплате и доставке.

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

Проектирование главной страницы

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

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

  • Промо-блок с новостями и акциями;
  • Быстрые ссылки на категории каталога;
  • О компании;
  • Карусель с часто покупаемыми товарами;
  • Контакты: адреса офлайн-магазинов, карта проезда.

Разберем подробнее содержание и назначение каждого блока.

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

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

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

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

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

О компании

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

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

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

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

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

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

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

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

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

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

Каталог — это витрина магазина. Он помогает сориентироваться в ассортименте, найти нужный товар, узнать стоимость. В этом помогает структура каталога.

В интернет-магазине для Российской Дрифт Серии товаров немного, в структуре каталога достаточно двух уровней:

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

По этой структуре создаем навигацию по каталогу:

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

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

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

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

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

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

Все, чтобы привести покупателя к цели визита: купить товар.

Нужен ли уникальный дизайн для интернет-магазина

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

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

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

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

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

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

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

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

Функциональность: обеспечиваем сервис для покупателей

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

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

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

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

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

Сколько времени и людей нужно для разработки интернет-магазина

Интернет-магазин RDS разработали за 1,5 месяца. В проекте участвовали интернет-маркетолог, SEO-аналитик, дизайнер, арт-директор, 3 разработчика, менеджер проекта.

Срок разработки интернет-магазина зависит от таких факторов:

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital-агентство Атвинта", "author_type": "self", "tags": [], "comments": 1, "likes": 10, "favorites": 48, "is_advertisement": false, "subsite_label": "trade", "id": 87875, "is_wide": false, "is_ugc": true, "date": "Mon, 14 Oct 2019 11:29:07 +0300", "is_special": false }
0
{ "id": 87875, "author_id": 108381, "diff_limit": 1000, "urls": {"diff":"\/comments\/87875\/get","add":"\/comments\/87875\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/87875"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199122, "last_count_and_date": null }
1 комментарий
Популярные
По порядку
0

Статья длинная. Это единственный плюс.
1. Фото с помехами и изьянами = как вы лодку назовёте... я посмотреть если не могу в живую я смотрю на фотки. Есьи на фотке малейший намёк на изьян то я не покупаю. У вас изьян в концепции.
2. На главной блок "о нас" в середине страницы. Где вы такое видели? Это как кепка с чел...ном.
3. Слоган это смех. Чего то много мелкими буквами вверху и потом много крупными и текст опирается на то что читали мелкие. А ведь сначала читают крупные... 
4. Цвет фона чёрный. Это просто мрак... в жизни такое кол-во грязи и черноты, давайте ещё добавим...
5. Команда раздута. При таких сроках это не изготовление а оптимизация шаблона.
6. Аналитика притянута за уши. Непонятно что собирали. Как. Откуда. 
И оно всё такое... 

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }