Фейслифтинг 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!

7676
26 комментариев

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

13
Ответить

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

4
Ответить

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

4
Ответить

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

1
Ответить

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

Ответить

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

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

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

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

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

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

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

7
Ответить

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

1
Ответить