Обновленный интернет-магазин METRO: единая платформа вместо разрозненных сценариев

Главное о кейсе

METRO — это сложная e-commerce экосистема с B2C- и B2B-аудиторией: частными покупателями, ресторанами, офисами, франшизами и другими бизнес-направлениями. Исторически цифровая среда развивалась как набор отдельных решений, из-за чего пользователи могли попадать не в свои сценарии, видели нерелевантные цены и терялись между площадками.

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

Дополнительно команда внедрила новый контентный формат с короткими видео и связанными товарами прямо внутри e-commerce-интерфейса.

После запуска рост e-commerce-трафика составил 64%, органический трафик вырос на 183%, глубина просмотра — с 7 до 14,5 страниц, а время на сайте — с 6,8 до 12,5 минут.

Как проект изменил жизнь пользователей

До запуска новой платформы пользователям METRO приходилось самостоятельно разбираться в разных сервисах и сценариях: B2C-покупках, HoReCa, офисных закупках или специальных B2B-условиях. Люди попадали не в свой контур, тратили время на поиск нужного раздела и уходили без целевого действия.

После перезапуска сайт стал системой понятных маршрутов. Пользователь быстрее определяет свой сценарий и сразу попадает в нужный раздел с релевантными сервисами, товарами и условиями. Особенно это упростило взаимодействие для B2B-аудитории со сложными процессами закупки.

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

Изменения напрямую повлияли на пользовательское поведение: глубина просмотра выросла более чем в два раза, а время взаимодействия с платформой увеличилось с 6,8 до 12,5 минут.

Бизнес-задача и ее решение

METRO — это не просто интернет-магазин, а сложная экосистема с несколькими типами пользователей и сценариев: частные покупатели, рестораны, отели, офисы, владельцы магазинов, франшизы и тендерные направления.

Исторически цифровая среда бренда росла не как единая платформа, а как набор отдельных решений под разные задачи. В итоге пользовательские сценарии оказались распределены по нескольким ресурсам, а логика переходов между ними была неочевидной. Пользователь мог прийти из поиска, попасть не на тот сайт, увидеть нерелевантные цены или сценарии и уйти. Особенно это касалось B2B-сегмента: бизнес-пользователь, уже работающий с METRO, мог попасть не в свой контур и потеряться в B2C-интерфейсе.

В результате сайт не выполнял ключевую функцию — быть точкой входа в экосистему.

Перед командой АЭРО стояла задача пересобрать платформу: объединить сценарии, упростить навигацию и сделать так, чтобы любой пользователь — вне зависимости от сегмента — быстро попадал в нужный ему путь.

Крафт (мастерство), реализация, технические детали

1) Новая логика платформы

Начали с самостоятельного прохождения пользовательских сценариев. Уже на этом этапе стало ясно, что даже при понимании продукта ориентироваться в платформе довольно сложно. Далее подключили аналитиков и проверили гипотезу с помощью данных. Картина подтвердилась: пользователи действительно путаются между разными площадками и не всегда доходят до целевых действий.

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

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

2) От страниц к сценариям

По итогам первого этапа была собрана карта jobs-to-be-done — список задач, которые пользователи пытаются решить, и проблем, с которыми они сталкиваются. На ее основе переработали UX: определили ключевые сценарии для разных сегментов, сократили путь до целевых действий, выстроили понятные точки входа и задали логику переходов между разделами.

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

3) Визуальный язык и сегментация

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

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

Дополнительно была разработана гибкая дизайн-система, которая позволяет масштабировать продукт без потери целостности. Обновили цветовую палитру, добавили более легкие оттенки, современные элементы и аккуратные 3D-акценты.

Это не только усилило визуальную часть, но и ускорило дальнейшую реализацию и развитие продукта без лишних ошибок.

4) Контент как инструмент продажи

Одним из ключевых и самых экспериментальных продуктовых решений стало внедрение нового контентного формата в e-commerce.

Команда интегрировала в интерфейс короткие видео — по аналогии с привычным скроллингом в соцсетях. Контент встроен прямо в структуру страницы: с одной стороны пользователь видит ролики с рецептами и продуктами, с другой — получает связанные товарные предложения.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Один из главных инсайтов проекта появился еще до старта полноценного исследования. Команда АЭРО начала с самостоятельного прохождения пользовательских сценариев и быстро столкнулась с тем, что даже при хорошем знании продукта ориентироваться в экосистеме METRO сложно. Пользователь легко мог попасть не в свой контур: B2B-клиент — в B2C-интерфейс, а частный покупатель — в сценарии для бизнеса.

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

Отдельным вызовом стала работа с большим количеством бизнес-направлений и стейкхолдеров внутри METRO. У разных команд были собственные задачи, сценарии и ожидания от продукта, поэтому команде АЭРО приходилось синхронизировать интересы бизнеса, UX и технической реализации одновременно.

Скриншоты