Редизайн интернет-магазина «М.Видео»

1. Вводная задача от заказчика, проблематика, цели

- Увеличить конверсию в заказы с мобильных устройств;

- Внедрить новые механики продаж;

- Устранить существующие UX-проблемы;

- Нарастить новые сегменты целевой аудитории;

- Отразить новое позиционирование и фирменный стиль.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Бренд «М.Видео» основан в 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 и добавили к постраничной пагинации кнопку «Показать ещё».

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

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

- характеристики товара;

- отзывы;

- акции и цены;

- способы доставки.

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

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

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

3. Результаты сотрудничества

>150 протестированных гипотез

>1000 макетов

+10% к конверсии

+25% к ежемесячной посещаемости

80% доля интернет-продаж

>46 млн ежемесячная посещаемость