Как сделать успешный редизайн сайта с 20 миллионами пользователей: кейс «М.Видео» и UX Feedback

Больше 85% редизайнов digital-продуктов терпят крах — основные метрики падают, а клиенты проявляют негатив. В этой статье рассказываем о том, как «М.Видео» удалось попасть в 15% «счастливчиков» и улучшить показатели сайта.

Розничная компания «М.Видео» — один из крупнейших брендов по объёму продаж электроники и бытовой техники в России с удобной онлайн-платформой, включающей мобильное приложение и сайт.

География присутствия бренда охватывает более 250 городов и насчитывает более 500 магазинов в разных регионах России. Ежемесячно сайт mvideo.ru посещают около 20 миллионов уникальных пользователей.

По словам Андрея Пчелинцева, Chief Product Officer в «М.Видео», предпосылки к редизайну сайта mvideo.ru назревали давно. Основные – неоптимальные показатели метрик, устаревший дизайн, серьёзные барьеры в Customer Journey и отсутствие ориентации на mobile first. Кроме того, компания запланировала переход на технически новый сайт.

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

Со стороны может показаться, что изменить дизайн – простая задача. Но это справедливо только для небольших продуктов. Редизайн огромного сайта вроде mvideo.ru – серьёзный вызов. Это десятки разнотипных страниц, бесчисленное количество взаимосвязанных между собой элементов и строгие требования к UI/UX.

Самое важное для осуществления редизайна, по мнению Андрея, – это так называемое видение (vision), стратегическая основа для начала действий. Оно формируется благодаря анализу текущих метрик, проблемных зон, обратной связи от пользователей, конкурентов.

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

Специально для этой статьи Андрей подготовил 6 пунктов, которые помогут вам сформировать правильный vision для редизайна:

• Нужно смотреть на мир широко открытыми глазами. Впитывать, что есть различного интересного и нового, отсеивать «шелуху». Можно сделать очень фантасмагоричный дизайн, но он окажется не тем, что было нужно вашей аудитории.
• Обязательно иметь точку Б. Многие пытаются сделать работы, не имея понимания, куда они хотят прийти. Если понимания нет, есть все шансы прийти в никуда. Если не формируется образ точки Б, лучше детальнее провести этап аналитики и диагностики для того, чтобы вы могли нащупать боли и проблемы продукта. И уже на их основе строить какое-то видение.
• Не пытайтесь объять необъятное. Можно попытаться заглянуть на 10 лет вперёд, это тоже подход. Но всё-таки продуктовая работа характерна тем, что есть операционность и этапность. Поэтому волей-неволей вы должны итерационно понимать, что можете сделать в рамках первого этапа, в достижении точки Б, В и так далее. Нужно пытаться разбивать это на какие-то блоки.
• Научитесь работать с приоритетами. Например, у вас плохая конверсия в корзине, потому что у вас не отрабатывает платёжный шлюз. Здесь не нужно быть провидцем, чтобы понять, что внизу воронки самые дорогие клиенты сталкиваются с проблемами. Значит надо с них начать. Не нужно придумывать что-то космическое, какие-то онлайн-стримы, когда у вас не работает корзина.
• Мы строим технически сложные продукты и не можем проектировать видение без учёта технической составляющей. Мы должны понимать стэк, его особенности, доступность персонала, возможность привлечения лучших талантов, системно представлять, как ваше видение будет реализовано по этапам, есть ли на это ресурсы. Вы можете заложить классное видение, но при этом стэк окажется слишком дорогим. Соответственно, оно никогда не будет реализовано.
• Люди постоянно галлюцинируют. Всё нужно проверять на основе метрик и исследований. Если нет подтвержденной базы, на основе которой делаются какие-то выводы, это не более чем галлюцинация. Поэтому у продакта здесь основными инструментами должны быть метрики своего продукта/конкурентов и исследования.

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

«М.Видео» использует метрики здоровья продукта – это детальная пирамида: метрики первого порядка, второго, третьего, четвёртого.

К редизайну они были применимы лишь отчасти, поскольку команд много – не все области, затронутые изменениями, относятся к определённым метрикам. Тем не менее, некоторые показатели стали важными KPI:

• Количество онлайн-продаж. Эта метрика стала базовой.
• Конверсия из процесса выбора. Ещё одна метрика, на которую опирались в первую очередь. Были важны переходы из листинга в корзину и с карточки товара в корзину.
• Средний чек. Смотрели, насколько он изменился.
• Скорость загрузки сайта. Её увеличение стало одной из главных целей редизайна. В e-commerce скорость загрузки напрямую влияет на ключевые метрики. Например, согласно исследованию Amazon, каждые 100мс загрузки уменьшают продажи на 1%. Подобные данные есть и у Google – каждые 500мс уменьшают объём трафика на 20%. У «М.Видео» были и внутренние исследования, подтверждающее эти зависимости.

• Метрики лояльности – NPS, CSI. Помимо экономических метрик, для «М.Видео» были важны метрики лояльности – NPS и CSI. Для измерения CSI использовался виджет UX Feedback.

Сейчас компания измеряет CSI на каждом этапе Customer Journey:

Итак, ваше видение создано, аналитика проведена. Теперь вам нужно не только визуализировать vision, но и «продать» его внутри компании – клиентам на исследованиях и коллегам. И это, по словам Андрея, чуть ли не самая запутанная задача.

Процесс редизайна в большой компании затрагивает множество стейкхолдеров. Поскольку упор в e-commerce идёт на онлайн, это не только коллеги, которые вас окружают, но и люди в совете директоров. Они тоже в какой-то степени отвечают за тот продукт, который вы делаете: перед клиентами и инвесторами.

Из-за этого одна из основных сложностей редизайна – затянутый процесс согласований:

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

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

Что было сложнее всего аргументировать при редизайне сайта «М.Видео»:

• «У нас в шапке есть строка внизу. На прошлом сайте эта строка была как каталог. Там были все разделы. Логика, которая закладывалась в новой реализации, совсем другая. Это панель быстрых ссылок, и она акцентирует внимание на самых важных вещах. Она имеет прокрутку, особенно это видно на мобильной версии. Её посыл в том, чтобы дать людям возможность быстрого, горячего доступа к новинкам».

• «Каталог теперь выведен отдельно. Это было предметом споров. На исследованиях мы увидели, что люди с этим нормально работают, воспринимают. На пилотировании убедились, что показатель в норме. Единственное, мы увидели проблемы на мобильной версии – сильно упали переходы с главной страницы в каталог. Нам пришлось сделать кнопку «Каталог» рядом с поиском. Потому что люди через UX Feedback писали, что не могли его найти».

Таким образом, можно сделать концепт за 3 месяца, но потом ещё какое-то количество месяцев «продавать» его внутри. Показывать, доказывать, возможно, проводить бизнес-аналитику, чтобы плавно приступить к разработке.

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

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

В рамках пилота команда редизайна сайта mvideo.ru использовала платформу UX Feedback, чтобы своевременно узнавать от пользователей о багах, барьерах и пожеланиях. Кроме того, компания замеряла CSI на каждом из этапов Customer Journey.

Пример одного из инсайтов, которые удалось получить от пользователей, – о больших отступах между блоками. Если десктопный экран был небольшим, например, 1360x1024, то информации на нём помещалось мало:

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

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

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

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

Кроме того, на mvideo.ru внедрили ряд технических изменений, которые предоставляли клиенту лучший пользовательский опыт. Наконец, по мере того, как пилот «раскатывался», в компании смотрели на обратную связь от пользователей:

По итогам пилота KPI команды был flat, то есть, грубо говоря, она могла выйти «в ноль». Но продуктовые метрики оказались значимо выше, чем на старом сайте.

Поэтому в компании и решили, что не будут предлагать возвращение на старый сайт. В случае чего, по словам Андрея, в «М.Видео» бы оставили старый сайт и доработали интерфейс.

Что касается промежуточных итогов редизайна, позитивно изменились как бизнес-, так и технические метрики. Скорость загрузки страниц в среднем увеличилась в полтора раза, а конверсия площадки после обновления выросла более чем на 10%.

Изменились также и количественные показатели, которые замеряются через UX Feedback. Они показали рост от 10 до 30%, а учитывая их чувствительность к любым изменениям, в компании считают это большим успехом.