Как успешно продавать вино в онлайне: кейс KISLOROD и GRAPE

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

Вводная: с чем пришел клиент

К нам обратилась виноторговая компания Grape, которая занимается импортом и дистрибуцией премиальных и эксклюзивных вин в РФ. В ассортименте более тысячи товаров. Основные каналы сбыта — HoReCa и розничные продажи (винотеки, мероприятия и дегустации).

Клиент решил развивать направление онлайн-продаж и разработать вместо имеющегося корпоративного сайта интернет-магазин. Преследуя при этом несколько целей:

Нашей задачей было разработать интерфейс и дизайн интернет-магазина. При этом требовалось:

  • воспроизвести особую атмосферу и ламповость офлайн-винотек и в онлайне;
  • перенести в онлайн айдентику компании;
  • не перегрузить дизайн лишними элементами.

Сборку интернет-магазина клиент планировал делать силами инхаус-команды.

Специфика бизнеса по продаже алкоголя в интернете

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

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

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

Особенности целевой аудитории

Целевую аудиторию клиента можно разделить на два сегмента:

  • ценителей, которые хорошо ориентируются в вине;

  • любителей, которые не разбираются в нюансах.

Мы должны были разработать интерфейс и функционал с учетом интересов обоих сегментов.

Какие задачи мы поставили

  1. Изучить вводную информацию и понять потребности тех, кто захочет выбрать вино в онлайне.
  2. Сделать логику интерфейса доступной для обоих сегментов аудитории, а дизайн — отличающимся от конкурентов и запоминающимся.
  3. Внедрить полезные и вовлекающие инструменты для подбора вин.
  4. Создать дополнительную ценность покупки вин в онлайне.
  5. Обеспечить высокие показатели органического трафика, вовлеченности и лояльности покупателей, конверсии и повторных покупок.

Что получилось и как к этому пришли

А теперь по порядку о каждом этапе работы.

Поняли, как выбирают вино

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

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

Дмитрий, менеджер проекта

Разработали интерфейс и дизайн с учетом пожеланий клиента и потребностей двух сегментов

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

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

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

Подумали об увеличении органического трафика

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

О том, как пошагово внедрить модуль SEO-умного фильтра на базе Битрикс, писали в этой статье.

Упростили покупателям выбор

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

Облегчают выбор вина и подборки в блоке «Готовые предложения». Они разработаны исходя из распространенных запросов посетителей.

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

Чтобы пользователю не пришлось постоянно перемещаться из категории в карточку и обратно, мы вывели ключевые характеристики товара в превью. Кроме бутылки и этикетки, имеет значение цвет, содержание сахара, страна и регион, год разлива, объем. Для упрощения восприятия и избежания перегруженности, по возможности заменили текст иконками.

Позаботились о максимальной конверсии

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

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

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

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

Дополнительно повышает вероятность покупки:

  • инфографика — чтобы показать подходящие к вину блюда и помочь с выбором;
  • рецензия сомелье — чтобы добавить ценность товару, усилить доверие, создать атмосферу;
  • информация о производителе — чтобы рассказать историю вина тем, кому это важно;
  • блоки «Что чаще всего ищут» и «Похожи на...» — чтобы упростить подбор для покупателя и увеличить средний чек для магазина.

Не менее важно уделять внимание корзине и чекауту — по опыту других проектов, на этом этапе происходит максимальный отток посетителей. В одном из них, проработав корзину и процесс оформления заказа, мы увеличили конверсию на 54%, а средний чек на 329%.

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

Повысили лояльность к компании

У Grape есть клуб Grape Family Club, члены которого получают привилегии: скидки, возможность участвовать в закрытых мероприятиях и делать покупки по специальным акциям. Мы предусмотрели блок с презентацией клубной карты на главной странице.

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

Создали дополнительную ценность покупки в онлайне

Эксперты, которым важно найти вина из конкретных стран или даже регионов, могут сделать это на странице «Бренды». Мы предусмотрели интерактивную карту для выбора бренда из нужной провинции. Можно также найти определенный бренд по названию — для этого внедрили алфавитный указатель.

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

Придумали решения для регулярных заказов

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

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

В разделе «Карта клуба» отразили преимущества владельца клубной карты. Больше покупок — больше скидка и экономия: есть стимул покупать вино в одном месте.

Адаптировали функционал под мобильные

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

Мы сделали удобной работу с фильтрами и сортировкой листинга. Поверх списка товаров появляется фиксированное модальное окно с интерфейсом «под палец».

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

Резюме

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

Внедрили решения, которые:

  • увеличивают трафик из поиска — SEO-умный фильтр, теги;
  • упрощают покупателям выбор — Quiz, готовые предложения, фильтр выдачи по ключевым параметрам, превью с важными свойствами товара;
  • работают на максимальную конверсию — цепляющий слайдер на первом экране, продающая карточка товара со всесторонней информацией о нем, возможностью выбора параметров (объем, винтаж) и блоками, стимулирующими подобрать что-то еще;
  • повышают лояльность к компании — блок с клубной картой на главной и страница мероприятий с возможностью зарегистрироваться;

  • создают дополнительную ценность покупки в онлайне — страница брендов с интерактивной картой и возможностью алфавитного поиска, страницы конкретных брендов с подробной информацией о них;
  • стимулируют повторные заказы — блок с акциями, личный кабинет с возможностью отредактировать и повторить прошлый заказ, посмотреть дисконт по клубной карте;
  • делают удобной поиск и покупку с мобильного — всплывающее модальное окно с интерфейсом «под палец», фильтрация после подтверждения выбора.

0
18 комментариев
Написать комментарий...
Pavel

Кейс о стандартном функционале Битрикс?
Реальная цена такого сайта - до 100000 ₽. 
Если смогли взять больше, значит развели "вовлеченого клиента".

Интересно посмотреть на реальную посещаемость, карту скрола и глубину просмотра... )

Ответить
Развернуть ветку
Макс Мухарёв

Оу, а вы готовы разработать подобный магазин за 100 т.р., я правильно понял?)

Ответить
Развернуть ветку
Pavel

Можно повторить подвиг на поток )))

Ответить
Развернуть ветку
Макс Мухарёв

Если вы готовы взяться, то у меня для вас заказ. Заодно напишем кейс новый на VC, да? 😏

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Ждём кейса на VC? ;) Или одни только обещания?))))))))

Ответить
Развернуть ветку
Pavel

Не передёргивайте... ☝️🧐

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

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Это не так и в этом большая проблема для большинства тех, кто хочет развивать свою электронную коммерцию. Наш "вовлечённый заказчик" был достаточно компетентен в выборе подрядчика, т.к. понимал по каким критериям правильно проводить скоринг разработчиков. Рекомендуем прочесть вот эту статью https://vc.ru/marketing/58250-skolko-stoit-razrabotka-internet-magazina-s-unikalnym-dizaynom, чтобы в будущем избежать типовых ошибок и снизить свои риски.

Ответить
Развернуть ветку
Pavel

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

Индивидуальный дизайн заканчивается на стандартной раскладке страницы. Цвета и картинки поставить - не велика премудрость.

Верстка в показанном вами сайте тоже не уникальна, так как обусловлена функционалом CMS. Проще купить готовый шаблон и в нем править дизайн. Стоимость шаблона - ~25000 ₽. Внесение правок - ещё 15000 ₽.

Основная стоимость - лицензия 1С Битрикс Бизнес, но предположим, что у клиента она есть.

SEO-подготовка на уровне разработки - 100% выброшенные деньги, так как любые сеошники берут от 1 до 3 месяцев для входа в проект и техническую оптимизацию будут делать сами.

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

В анонсах карточек товаров и на самих карточках у вас ничего нового нет. Так делают все. И Симпл, и Вайнстайл, и остальные.

Гастрономия, по моим наблюдениям в течении 3 лет, никому не нужна. Интересует страна, сорта, производитель, сахар, цвет и крепость. Даже описание особо никто не читает. )))

То, что касается интеграции...
Да, при условии работы с ЕГАИС, будут некоторые проблемы с задвоением товара в 1С, соответственно нужно немного подумать с синхронизацией. Продуманная синхронизация стоит ещё примерно 70000 ₽.

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Странная причинно-следственная связь)) дело в том, что мы и есть разработчики, у нас продакшн-агентство, причём с фокусом на разработку e-com проектов.

У нас нет, как и впрочем у любого компетентного разработчика, как вы говорите, задачи «развести клиента». У нас есть цель реализовать задачи проекта. Поэтому, если бы вы внимательно прочли статью, о которой мы упоминали ранее, клиенту предлагаются разные решения, в том числе и запуск на готовых решениях (шаблоне), если это никак не противоречит задачам и дальнейшей стратегии развития интернет-магазина. Стратегию развития этого проекта мы рассказывать не будем, но это ровно тот случай.

Вы правы, что интерфейс основного функционала достаточно типовой, но это сделано только для того, чтобы не нарушать привычный опыт покупки для b2c-покупателя в онлайне. Да и не было задачи «изобретать велосипед» - брать лучшие практики с рынка это нормальная практика, читаем эту статью https://o2k.ru/blog/analiz-konkurentov. Поэтому странно, что вы делаете акцент на то, что какие-то аналогичные решения встречаются на сайтах конкурентов. Ведь была задача запустить понятный, удобный и конкурентоспособный интернет-магазин.

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

Ответить
Развернуть ветку
Pavel

Когда цифры статистики будут? ;)

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Будут)

Ответить
Развернуть ветку
Pavel

Когда нет аргументов кроме обещаний )))

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Какие аргументы вам нужны?)))

Ответить
Развернуть ветку
Pavel

Выше писал на что было бы интересно посмотреть.

Ответить
Развернуть ветку
STB-GROUP

Реализовали вайлдбериз для вин?

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Нет, это не маркетплейс) 

Ответить
Развернуть ветку
Артем Бабенко

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

Ответить
Развернуть ветку
KISLOROD E-COMMERCE
Автор

Спасибо, за ваше мнение. Статья написана разработчиком) В этом блоке, на который вы ссылаетесь, говориться не о функционале, а о том, как правильно, на наш взгляд, должен отрабатывать интерфейс взаимодействие с мобильными пользователями. К сожалению, как показывает опыт, это всё ещё для многих не очевидно)

Ответить
Развернуть ветку
15 комментариев
Раскрывать всегда