Как мы усилили UX/UI сайта Subway и сделали путь пользователя вкуснее

Клиент

Subway (Subjoy в России) — это крупнейшая в мире сеть ресторанов быстрого обслуживания, которая предлагает сэндвичи, салаты и роллы.

Задача

Мы в KOTELOV  должны были провести UX/UI аудит сайта Subway, а также подготовить дизайн-концепт с нашим видением его обновления.

Основные проблемы на главной странице Subway

Нет визуальной иерархии и структуры

Все элементы кажутся равнозначными по важности, из-за чего внимание пользователя распыляется. Странице не хватает заголовков, акцентов и модульности.

Нет понятного call-to-action

Непонятно, что пользователь должен сделать в первую очередь: заказать, найти ресторан или что-то ещё. Нет одной ярко выраженной цели и направляющих кнопок.

Разные смыслы, и все в одном блоке

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

Нет приоритизации

На главном экране одновременно предлагается слишком много сценариев (меню, франшиза, бонусы и так далее). Не понятно, что основное.

Визуальный стиль сайта отвлекает и путает

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

Детально разбираем, что не так

В хедере нет понятного призыва к действию вроде «Заказать» или «Найти ресторан». Всё представлено в виде равнозначных ссылок: глаз ни за что не цепляется. Навигация выглядит перегруженной и содержит второстепенную информацию, которую можно было бы перенести в футер — например, «Оставить отзыв».

App Store / Google Play визуально оторваны от навигации: выглядят как инородный элемент, кажутся лишними. Информационный баннер выглядит как важное сообщение, но при клике ведет на страницу с контактами, что не соответствует ожиданиям пользователя.

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

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

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

Что не так со страницей «Меню»

Промежуточная страница «Меню» выглядит лишним шагом

Этот экран не несет ценности. Клиент может не знать, чего именно он хочет, этот экран не помогает определиться. Он не подсказывает, не направляет, не вдохновляет, а только тормозит путь.

Каталог тоже не помогает сделать выбор

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

Нет структуры и логики ассортимента

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

Низкий уровень вовлечения и интерактивности

Нет фильтров, кнопок «Подробнее», «Сравнить», «Добавить» и пр. Каталог выглядит как плоский список без сценариев. Отсутствуют анимации и любые признаки «живого» бренда — всё ощущается как PDF-каталог

Нет персонализации под разные цели

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

Что можно сделать

Упростить и усилить страницу меню

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

Добавить информативность карточкам

Показывать состав, цену, калорийность, диетические метки (вегетарианское, острое и т.д.) прямо на карточке или при наведении.

Увеличить интерактивность и вовлечение

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

Реализовать персонализацию

Ввести фильтры по типу блюда, начинке, цене, калорийности. Добавить подсказки/ разделы с персональными предложениями вроде «Хиты», «Акции», «Специально для вас».

Редизайн сайта Subway

Упорядочили структуру главной страницы

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

Сделали hero-блок выразительным и вовлекающим

Вместо нейтрального слайдера добавили цепляющий слоган и аппетитный визуал. Это сразу задаёт тон, создаёт первое впечатление и работает на узнаваемость бренда.

Упростили визуальный стиль и повысили читаемость

Убрали лишние цвета, декоративные эффекты и тяжёлые блоки. Всё стало легче, логичнее и понятнее для пользователя.

Добавили на страницу блоки, которые демонстрируют сильные стороны бренда и помогают с выбором

Вынесли на главную страницу «Хиты продаж» и переработали карточки — теперь блюда выглядят аппетитно, дают больше информации и вовлекают пользователя.

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

Навигация — заметнее и лаконичнее

Мы выделили главное меню в отдельный светлый блок — это визуально отделяет его от фона и делает читаемым.

Сделали яркий и вовлекающий hero-блок. Такой блок формирует первое впечатление о бренде и сразу задаёт нужный тон: вкусно, понятно и с характером. Он удерживает внимание и повышает вероятность, что пользователь начнёт исследовать сайт.

Фокус на ключевом действии — кнопка «Найти ресторан»

Кнопка оформлена как главный call-to- action: она контрастная, хорошо видна и стоит в привычной зоне внимания пользователя.

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

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

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

Упростили восприятие и персонализировали предложения: добавили стикеры (вегетарианское, острое, новинка и т.п.), чтобы пользователь быстрее ориентировался в ассортименте.

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

У Subway есть сильное конкурентное преимущество — возможность собрать блюдо из любых ингредиентов. Отразить это на сайте важно, чтобы подчеркнуть гибкость сервиса. Такой блок поможет пользователям с особыми предпочтениями — по диете, БЖУ или составу — а также тем, кто не нашёл подходящего варианта в меню.

Если сайт остаётся информационным и не поддерживает онлайн-заказ, конструктор всё равно может быть полезен. Пользователь сможет собрать блюдо заранее и показать его на кассе — это упростит коммуникацию с сотрудником и ускорит оформление заказа.

Объединили все направления, связанные с брендом — франшизу, карьеру и информацию о компании — в одном компактном и понятном блоке.

Фотографии с интерьерами и сэндвичами создают ощущение живого бренда. Вызывают доверие и формируют визуальную ассоциацию с атмосферой ресторанов Subway.