Как сделать успешный редизайн сайта с 20 миллионами пользователей: кейс «М.Видео» и UX Feedback
Больше 85% редизайнов digital-продуктов терпят крах — основные метрики падают, а клиенты проявляют негатив. В этой статье рассказываем о том, как «М.Видео» удалось попасть в 15% «счастливчиков» и улучшить показатели сайта.
О компании
Розничная компания «М.Видео» — один из крупнейших брендов по объёму продаж электроники и бытовой техники в России с удобной онлайн-платформой, включающей мобильное приложение и сайт.
География присутствия бренда охватывает более 250 городов и насчитывает более 500 магазинов в разных регионах России. Ежемесячно сайт mvideo.ru посещают около 20 миллионов уникальных пользователей.
Проблема
По словам Андрея Пчелинцева, Chief Product Officer в «М.Видео», предпосылки к редизайну сайта mvideo.ru назревали давно. Основные – неоптимальные показатели метрик, устаревший дизайн, серьёзные барьеры в Customer Journey и отсутствие ориентации на mobile first. Кроме того, компания запланировала переход на технически новый сайт.
В проекте участвовали несколько десятков человек различных направлений: product-менеджеры, UX-исследователи, разработчики, аналитики, тестировщики и другие.
Как правильно провести редизайн – 6 принципов
Со стороны может показаться, что изменить дизайн – простая задача. Но это справедливо только для небольших продуктов. Редизайн огромного сайта вроде 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:
Всё очень сильно завязано на скорости. У нас был неудачный релиз, после которого она упала, и мы тут же увидели это на метриках обратной связи. Они сразу рухнули вниз. По мере того, как мы чинили это, а потом улучшали с каждой итерацией, эта метрика росла. Если посмотреть по этим метрикам итоги редизайна, то мы выросли на 15-25% в зависимости от страницы. Это очень много, учитывая, опять же, что мы получаем сотни тысяч комментариев и оценок от пользователей. Даже на 5% увеличить этот показатель достаточно тяжело.
Итак, ваше видение создано, аналитика проведена. Теперь вам нужно не только визуализировать vision, но и «продать» его внутри компании – клиентам на исследованиях и коллегам. И это, по словам Андрея, чуть ли не самая запутанная задача.
Почему редизайн – это искусство аргументации
Процесс редизайна в большой компании затрагивает множество стейкхолдеров. Поскольку упор в e-commerce идёт на онлайн, это не только коллеги, которые вас окружают, но и люди в совете директоров. Они тоже в какой-то степени отвечают за тот продукт, который вы делаете: перед клиентами и инвесторами.
Из-за этого одна из основных сложностей редизайна – затянутый процесс согласований:
Он становится гораздо более зависимым от аргументов, а не от субъективизма. Тебе нужно иметь железобетонные аргументы, почему, например, вот так должна быть реализована главная страница. Не просто потому, что дизайнер так увидел, мы так захотели. Нет, – это замеры, связанные с проведением UX-исследований, это метрики, прототипы.
При редизайне приходится учитывать множество вещей, которые изначально не казались очевидными. В качестве примера Андрей приводит работу с брендами. Если в результате редизайна какие-то бренды сместятся вниз к футеру сайта, у коллег, работающих с ними, полностью сместится фокус и приоритеты. Возможно, они не смогут выполнить свои KPI по продаже мест и так далее.
Вообще, изменения, связанные с расположением мест, с тем, что будет в шапке сайта, были самыми непростыми в аргументации. Всем понятно, что наверху должна находиться самая важная информация, но её слишком много. Или, например, есть тап-бар с 5 кнопками. Оставлять ли их в таком количестве, урезать до четырёх или сделать вместо пятой кнопку «Ещё» с кучей всего того, что не вошло сюда? Все варианты нужно исследовать, постоянно с ними работать и аргументировать выбор.
Что было сложнее всего аргументировать при редизайне сайта «М.Видео»:
- «У нас в шапке есть строка внизу. На прошлом сайте эта строка была как каталог. Там были все разделы. Логика, которая закладывалась в новой реализации, совсем другая. Это панель быстрых ссылок, и она акцентирует внимание на самых важных вещах. Она имеет прокрутку, особенно это видно на мобильной версии. Её посыл в том, чтобы дать людям возможность быстрого, горячего доступа к новинкам».
«Каталог теперь выведен отдельно. Это было предметом споров. На исследованиях мы увидели, что люди с этим нормально работают, воспринимают. На пилотировании убедились, что показатель в норме. Единственное, мы увидели проблемы на мобильной версии – сильно упали переходы с главной страницы в каталог. Нам пришлось сделать кнопку «Каталог» рядом с поиском. Потому что люди через UX Feedback писали, что не могли его найти».
Таким образом, можно сделать концепт за 3 месяца, но потом ещё какое-то количество месяцев «продавать» его внутри. Показывать, доказывать, возможно, проводить бизнес-аналитику, чтобы плавно приступить к разработке.
Подробный рассказ про разработку – предмет отдельной статьи, в этом материале на этом останавливаться не будем. Но подчеркнём, что это – самое сердце всех проводимых работ. И от того, насколько качественно спланирована архитектура и сделана разработка, в дальнейшем, во многом, будут зависеть все бизнес- и технические метрики.
Пилот – как протестировать изменения
Пилотирование – следующая важнейшая часть редизайна. На этом этапе вы получите подтверждение или опровержение вашего видения, концепта. Важно не забыть про бэкап старого сайта и о постоянных измерениях для оценки всего нового:
Часто команды забывают мерить всё, что они делают. Я считаю это ошибкой, которая может очень дорого сказаться в дальнейшем. Думаю, что серьезная заслуга успешного редизайна сайта «М.Видео» в том, что мы на протяжении всего пути опирались на цифры и копали вглубь при необходимости
В рамках пилота команда редизайна сайта mvideo.ru использовала платформу UX Feedback, чтобы своевременно узнавать от пользователей о багах, барьерах и пожеланиях. Кроме того, компания замеряла CSI на каждом из этапов Customer Journey.
UX Feedback – это прекрасный инструмент для real-time обратной связи от пользователей. Платформа позволяет постранично в разных разрезах собирать качественный и количественный фидбек от пользователей. Эта обратная связь просто бесценна – вы можете не только отслеживать динамику изменений показателей отдельных страниц, но и получать полную информацию о проблемах/успехах клиентов. Помножьте всё это на то, что это 24/7/365 в различных разрезах клиентского опыта, и вы поймёте серьезную ценность продукта.
Для нас метрики, которые мы собираем через UX Feedback, входят в метрики «здоровья продукта» и являются неотъемлемыми при обсуждении на продуктовых бордах и квартальных ревью. Я бы сказал, что эта платформа – своеобразный «пользовательский пульс» сайта, который очень чутко реагирует на малейшие изменения.
Пример одного из инсайтов, которые удалось получить от пользователей, – о больших отступах между блоками. Если десктопный экран был небольшим, например, 1360x1024, то информации на нём помещалось мало:
«В листинге была только шапка и торчащие сверху блоки. Приходилось ставить в браузере меньший масштаб, чтобы хоть что-то увидеть. Это было неудобно и неочевидно на этапе проведения тестирования. Потому что в первую очередь ты смотришь на своих экранах, тестировщики не обращают на них внимания.
Мы делали дизайн-реализацию исходя из текущего распределения клиентов по экранам/разрешениям, по покупательской способности и смотрели тренды, срез по месяцам. Естественно, те экраны, которые были интересны нам с точки зрения лучших продаж, лучшего отображения, легли в основу. Но, тем не менее, небольшие экраны есть, их немало, и на них всё было слишком крупным».
Промежуточные итоги
Существенным изменениям в ходе редизайна mvideo.ru подверглась главная страница. Там было много свайпов, скроллов. В компании не делали особых акцентов на изменении скорости загрузки, пока не увидели проблемы на демо. И когда начали самостоятельно смотреть, как все эти свайпы и скроллы, заложенные в интерактив, работают, стало понятно – если срочно не улучшить скорость взаимодействия пользователей с этими элементами на главной, весь редизайн потеряет всякий смысл.
Так как платформа старая, изначальной целью было просто прокинуть «мостик» к новому сайту. Не было акцента на том, чтобы улучшить механики. На макетах эти проблемы не были очевидны. Но оказывается, что пользователю реально придётся очень долго ждать. Эти блоки «шевелились», как какие-то замороженные субстанции. Было очень неинтерактивно. На демо это было просто катастрофой.
С этого момента метрика скорости/перформанса стала ключевой для этого раздела.
При этом, в отличие от большинства редизайнов, в компании решили не давать пользователям возможность «откатиться» на старую версию сайта. По словам Андрея, его команда изначально была уверена, что предлагаемые решения гораздо лучше для клиентов, чем те, что были до этого. Исследования подтвердили правоту его коллег.
Кроме того, на mvideo.ru внедрили ряд технических изменений, которые предоставляли клиенту лучший пользовательский опыт. Наконец, по мере того, как пилот «раскатывался», в компании смотрели на обратную связь от пользователей:
Любой редизайн – это боль для клиента. Обычно многие пользователи начинают возмущаться и просят вернуть всё так, как было. Мы же видели, что таких сообщений было совсем мало. Поэтому мы, чем дальше, тем смелее становились в своих намерениях.
По итогам пилота KPI команды был flat, то есть, грубо говоря, она могла выйти «в ноль». Но продуктовые метрики оказались значимо выше, чем на старом сайте.
Поэтому в компании и решили, что не будут предлагать возвращение на старый сайт. В случае чего, по словам Андрея, в «М.Видео» бы оставили старый сайт и доработали интерфейс.
Что касается промежуточных итогов редизайна, позитивно изменились как бизнес-, так и технические метрики. Скорость загрузки страниц в среднем увеличилась в полтора раза, а конверсия площадки после обновления выросла более чем на 10%.
Изменились также и количественные показатели, которые замеряются через UX Feedback. Они показали рост от 10 до 30%, а учитывая их чувствительность к любым изменениям, в компании считают это большим успехом.
Удалось ли нам выполнить поставленную перед редизайном задачу? Конечно, удалось, мы же команда! А если серьёзно, то да, всё получилось, но это только начало. Первая видимая часть огромного «айсберга» изменений, которые нам ещё предстоят
Мигающая иконка просто ужасна. Какой гений додумался до такого?!
Мигающая иконка, всплывающее "сделай это!" (не важно что), сразу после открытия и много чего ещё.
Комментарий недоступен
Ваша персональная цена просто издевательство над UX. Ради скидки 0,3% все ценники перечеркнуты и не ясно где есть существенная скидка, а где 12 рублей, приходится вглядываться в серую зачеркнутую маленькую цену.
Комментарий недоступен
Млять, так и подмывает написать вам сейчас всю правду матку, ибо выбирал себе технику для кухни и вспоминал добром создателей сайта. Напишу коротко - вы себе очень льстите. Я даже оператору вашему вынужден был позвонить, ибо сайте не понятно. И просил даже разработчикам передать, что поменять. Не думал, что кто то гордиться этим. Но ведь вам похер .... Есть же показатели ...
Полезная статья, спасибо
Хотя до сих пор удивляет, что при поиске ноута/пк нельзя задать фильтр по объему ВИДЕОПАМЯТИ и др.
Из-за этого, приходится переходить в ситилинк и там сортировать и выбирать
Это просто, как один из опытов юзера...