Фейслифтинг eСommerce для «М.Видео»: подтягиваем конверсию, 100% красивый результат

Бренд «М.Видео» основан в 1993 году. Входит в Группу «М.Видео-Эльдорадо», ведущую российскую компанию в сфере электронной коммерции и розничной торговли. На конец 2020 года бренд представлен 542 магазинами более чем в 250 городах, на онлайн-платформе представлено более 75 000 товаров.

Общие продажи бренда М.Видео по итогам прошлого года составили более 335 млрд рублей, доля общих онлайн-продаж превысила 80%. Среднемесячная посещаемость mvideo.ru — 46,3 млн, что на четверть больше, чем годом ранее.

По результатам премии E-Commerce Index 2020 от Data Insight М.Видео стал лучшим в рейтинге омниканальных компаний, а его сайт занял пятое место среди крупнейших онлайн-магазинов 2020 и взял награду «Лидер роста» за динамику продаж.

С 2018 года М.Видео развивает гибридную бизнес-модель с технологией OneRetail, объединяя в рамках единой онлайн-платформы все точки контакта с покупателями (сайт, приложения, магазины) и создавая комфортный «бесшовный» пользовательский опыт. Клиент получает персонализированное обслуживание и быстрый доступ к товарам, где бы он не находился. В 2019 году в компании начался масштабный редизайн интернет-магазина.

Цели проекта

  • Увеличить конверсию в заказы с мобильных устройств.
  • Внедрить новые механики продаж.
  • Устранить существующие UX-проблемы.
  • Нарастить новые сегменты целевой аудитории.
  • Отразить новое позиционирование и фирменный стиль.

App-first

Порядка 60% трафика М.Видео приходится на мобильные устройства. Основным каналом продаж служит мобильное приложение, в котором более лояльная аудитория, клиенты всегда авторизованы, что способствует более точной персонализации. При этом, в приложениях трафик дороже, чем на сайтах, поэтому мы решили собрать удобную мобильную версию сайта, а затем стимулировать посетителей к установке приложения. В 2020 году количество установок приложения М.Видео выросло вчетверо, до 6 миллионов.

Этапы проекта

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

Старый и новый сайт

Facelift

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

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

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

Таб-бар

В числе базовых решений для удобства посетителей мы позаимствовали из мобильного приложения таб-бар — полосу меню внизу мобильной страницы. Туда же добавили раздел «Избранное», чтобы повысить частоту его использования.

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

Главная

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

Также мы создали кнопку «Каталог», нажав на которую пользователь видит все категории и подкатегории товара во весь экран. Раньше, чтобы что-то найти, надо было листать вправо строку быстрых категорий, что было занимало больше времени.

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

Сторис

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

Стримы

Чтобы внимательно осмотреть товар и сделать выбор, теперь необязательно ехать в магазин. Консультанты запустят трансляцию и продемонстрируют товар в прямом эфире, ответив на все вопросы. Фича реализована на платформе сервиса Eyezon и работает даже в мобильном браузере. За первые полгода с момента реализации сервиса продавцы М.Видео провели более 50 000 видео-сессий; каждая пятая персональная консультация заканчивается покупкой, что в 10 раз выше, чем средняя конверсия онлайн-продаж.

Каталог

Мы обновили навигацию в категориях товаров и добавили «умные» фильтры. Они могут объединять несколько стандартных фильтров, например: «игровой ноутбук» объединяет фильтры «процессор 9-го поколения» и «дискретная видеокарта».

Это нововведение уже дало положительную обратную связь от покупателей.

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

Еще одним изменением стало улучшение мини-карточки в каталоге мобильной версии сайта: мы добавили возможность отсматривать характеристики и фотографии прямо в каталоге товаров без открытия дополнительных страниц и добавлять товары в корзину, «избранное» и «сравнение» прямо из списка, добавили кнопку «Добавить в корзину». Это решение повысило частоту добавлений позиций в «Избранное» и «Сравнение», что помогло увеличить конверсию с листинга.

Исследование тепловой карты показало, что пользователи часто переходили на третью и четвертую страницу. Это означало, что 12 товаров на странице — мало. Поэтому мы увеличили количество товаров до 72 и добавили к постраничной пагинации кнопку «Показать ещё».

Карточка товара

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

  1. характеристики товара;
  2. отзывы;
  3. акции и цены;
  4. способы доставки.

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

Доставка за 2 часа

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

А еще мы сделали бренд-медиа MMAG, но об этом — в следующей серии.

Итоги и планы

Из ближайших планов — переезд на новую платформу, масштабный редизайн и много продуктовых доработок. Stay tuned!

0
26 комментариев
Написать комментарий...
Андрей Солозобов

Кто название придумал? Несколько раз перечитал заголовок.
Я один прочитал его как фейсситтинг?

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

фейсфистинг.

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

vc обучающий, но гуглить это я не пойду

Ответить
Развернуть ветку
Андрей Солозобов

Потом подумал, что это термин среди прочих, которым пользуются дизайнеры и диджитал: app-first, тапбар, сториз, стрим, фейслифт.
Ан нет. Загуглил и понял, что статья писалась для аудитории женского журнала, поэтому фейслифтинг, подтяжка и красивый результат.

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

Чувак, ты украл мой коммент!

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

Тих тих не пались ))), какое еще фейсситинг, этот статья о другом, простите ржу

Ответить
Развернуть ветку
Денис Анаев

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

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

 150 гипотез, 1 000 макетов: сколько из них удачных, сколько из них повлияло на метрики?

 + 10% конверсии – откуда куда? Это процентных пункта или процента? Было 5%, стало 15%, было 5%, стало 5,5%: смотря какая часть воронки, такой и вывод.

 + 25% посещаемости YoY, сколько из них прирост за счет пандемии и за счёт проделанной работы?

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

Не спорю, что сделано много, но итоги приведены не по целям, на мой взгляд, а в целом по онлайн-продажам за 2020, где существенное влияние оказала пандемия. Интересны кейсы прямой подтверждённой зависимости «действие/изменение - > результат».

Ответить
Развернуть ветку
Антон Петров

Красавчик.
Владельцы МВидео если читают vc побежали требовать новый доработанный отчет =)

Ответить
Развернуть ветку
Илья Радостный

Aero, конечно же, сдают проекты без отчётов:)

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

Пока м-видео не исправит вот это, остальное не имеет смысла.

 Родственница работала в колл центре тех поддержки
1 - Обещали 25 на руки. Как итог платили 14500 в случае переработок.
2 - Деньги платили не 10 и 25, а с дикими задержками где-то в месяц.
3 - Все бонусы за работу с клиентами фиг просчитаешь. Ничего не докажешь и как итог не получишь.
4 - Текучка дикая. Наверное 90%, причем даже у руководителей.
5 - Работают там либо молодые ребята лет по 18-20.
Либо мамочки после 2-3 лет сидения с ребенком.
6 - Иногда приходится работать ночью или до 23 и в праздники.
7 - У сотрудников банально нерабочая техника.
Из 7 рабочих мест, минимум у 3 не работают наушники.
Пользоваться своими наушниками нельзя.
8 - Все ПО жутко тормозит, слетает и весит.
9 - В помещении где работают сотрудники может быть дикий холод, а иногда даже течь крыша....
10 - У сотрудников нет никакой возможности решить вашу проблему.
Максимум что у них есть это их база знаний, в которую они могут глянуть, чтобы что-то подсказать.
Еще они могут занести вашу проблему в тикеты проблем, которые никто и никогда не решает.
11 - Когда вы орете матом на бедную сотрудницу(которую дома ждут детки) по телефонам указанным вам на сайте компаний из-за того что вы купили телеки на 700к, а они с браком, то вы орете не на компанию, а на вот этого бедного, нищего полуголодного сотрудника, который ничем не может вам помочь.
12 - Компании на ваши проблемы по ***.
Они от вас откупаются, вот этими бедными нищими людьми за 14500.
13 - Пока вы не обратитесь в суд ничего сделано не будет.
14 - При увольнении полное нарушение трудового законодательства и выплаты в лучшем случае около 3000.
15 - Обманывают, что выплатят деньги за обучение через месяц.
Потом через 1 месяц узнаешь, что якобы всем говорили, когда тебя не было, что выплаты через 3 месяца работы, чтобы людьми сразу не свалили.
А когда эти 3 месяца проходят, то дают около 3к за 2 недели обучения

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

Я думаю вместо названия компании, можно поставить очень многие. Суть сильно не изменится.

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

Мне Мвидео по жалобам просто дает купоны на 1000 рублей, так что не надо о том, что они на тикеты не реагируют.

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

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

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

Ответить
Развернуть ветку
Огурец Молодец

Чего вы в каждом скрине зум сделали?! Аж голова закружилась :-\

Ответить
Развернуть ветку
Клим Еременко

А по-моему концепцию дизайна стащили с других интернет-магазинов, таких как Citilink и DNS.

Ответить
Развернуть ветку
Ленин-гриб

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

Ответить
Развернуть ветку
Клим Еременко

М - Маркетинг 😅😅
Везде найдут))

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

Подозреваю вам отправили какой-то статус заказа в ВК. Так уже давно работают многие интернет-магазины/службы доставки в целях экономии на смс https://notify.mail.ru/vkok/advantages/

Ответить
Развернуть ветку
Ленин-гриб
в целях экономии на смс

Это даже не смешно. Пусть  на своих женах экономят, а мне в личку соцсетей писать не нужно, ок, Ситилинк? 

Я для этого почту указываю. На почту отправка бесплатная. Хитрые (здесь мат).

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

по-моему, эти элементы теперь везде: от сервисов доставок до маркет-плейсов, особенно вот эти представления элементов в виде прямоугольников с закругленными углами а-ля инстаграмм
Бросается в глаза просто если посмотреть на выборку самых популярных аппов в AppAnnie

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

Правильно писать/говорить не тапбар, а таб бар. Потому что он из табов состоит, а не потому, что по нему тапают)

Ответить
Развернуть ветку
Евгений Смирнов

2021 год.
Сайт МВидео не умеет запоминать регион. Про "определить регион" вообще промолчу.
Плюс весь этот фейслифтинг грузится полчаса и нещадно тормозит.

Ответить
Развернуть ветку
Денис Шергин

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

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

В других магазинах это уже реализовано, понимаете, да?)
Обычные вещи, которые каждый первый себе добавляет, описывают как нечто невероятное, новое

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

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Агапов Дмитрий

Нам руководитель их вечно в пример ставит, а у них вся вёрстка через жопу. Я такого г не делали даже 10 лет назад

Ответить
Развернуть ветку
Вадим Ивахин

Доставка за 2 часа) Ахах) мне пару недель назад доставку соковыжималки, заказанной 15-го апреля, переносили три раза. Три раза, Карл). При этом о первых двух переносах не сообщили. В итоге, отменили старый заказ, сделали новый с другой суммой, и тоже об этом не сообщили) Курьер приехал 5-го мая и потребовал доплатить 280₽)
Тут автор, походу, путает ожидания с реальным положением дел)
Справедливости ради купон на 1000₽ вручили за неудобства. Через две недели, но вручили =)
Ещё один купон на 500₽ дали за какой-то из очередных переносов, и 280₽ возместили бонусными баллами. Выгодный магазин, если не торопитесь)

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

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

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