Grigorev Daniil

Назад

Grigorev Daniil

Назад

Grigorev Daniil

MAXX

MAXX

Клиент MAXX — сеть ресторанов быстрого питания.

Роль

Дизайнер UI/UX

Сфера

Benchmarking, UI/UX, Flow

Инструменты

Figma, Rive

🎨 Моя роль:

Проведен UX-аудит, разработан мудборд и визуальная основа, переработаны основные пользовательские потоки, созданы макеты с приоритетом на мобильную версию, и подготовлены финальные мокапы, соответствующие обновленной дизайн-системе.

⚠️ Задача:

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

📈 Результат:

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

🔑 Ключевые решения:

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

Контекст:

Контекст:

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

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

*До редизайна

Ключевые барьеры:

Ключевые барьеры:

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

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

*До редизайна

Этап 1 — Исследования:

Этап 1 — Исследования:

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


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


Сайт напоминал корпоративный портал начала 2010-х годов, а не современный сервис питания. Для покупателей интерфейс = качество продукта: если сайт выглядит «старым» или «дешевым», это восприятие напрямую переносится на еду и обслуживание. Это было особенно критично для новых пользователей — доверие могло не сформироваться вовсе.


Блоки контента, текст и кнопки были размещены хаотично, без свободного пространства. Глаз «ловил» все сразу, вместо того чтобы быть направленным. Не было ощущения единого стиля: цвета, шрифты и элементы казались разрозненными. Тем временем конкуренты, такие как Dodo и Yandex.Eda, строили целые визуальные экосистемы, тогда как у MAXX этого восприятия вообще не было.


Пользователи часто не могли определить, какие элементы можно нажимать, а какие были статичными (состояния наведения/активации были неясными). Важная информация (такая как адреса ресторанов и часы работы) была скрыта.


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

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


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


Сайт напоминал корпоративный портал начала 2010-х, а не современный сервис доставки еды. Для клиентов интерфейс = качество продукта: если сайт выглядит «старым» или «дешевым», это восприятие напрямую переносится на еду и обслуживание. Это было особенно критично для новых пользователей — доверие могло и не возникнуть вовсе.


Контентные блоки, тексты и кнопки были расположены хаотично, без пространства для «дыхания». Взгляд «ловил» все сразу, вместо того, чтобы направляться. Не было ощущения единого стиля: цвета, шрифты и элементы казались разрозненными. Между тем конкуренты, такие как Додо и Яндекс.Еда, строили целые визуальные экосистемы, а у MAXX этого восприятия не было вовсе.


Пользователи часто не могли понять, какие элементы были кликабельными, а какие статичными (состояния наведения/активации были неясными). Важная информация (например, адреса ресторанов и часы работы) была скрыта.


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

Этап 2 — Анализ конкурентов:

Этап 2 — Анализ конкурентов:

Результаты исследования: 65–75% заказов оформляются с помощью смартфонов. Пользователи часто находятся в условиях ограниченного внимания и ожидают возможность быстро просматривать, выбирать и завершать свой заказ с минимальными трудностями.

Результаты исследования: 65–75% заказов оформляются с помощью смартфонов. Пользователи часто находятся в условиях ограниченного внимания и ожидают возможность быстро просматривать, выбирать и завершать свой заказ с минимальными трудностями.

Критерии

MAXX

Dodo Pizza

Yandex.Eda

Главная страница

Перегруженность баннерами, кнопками и карточками → когнитивная перегрузка, запутанная навигация

Фокус на категориях (пицца, закуски), одна целевая кнопка «Добавить в корзину»

Поиск ресторана/блюда в центре внимания, аккуратный рекламный баннер

Процесс оформления заказа

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

2–3 шага до оформления заказа, режим гостя, бонусы интегрированы в интерфейс

Мобильный подход, повторный заказ в один клик, Apple/Google Pay

UX паттерны

Нет автоматического сохранения адреса, нет быстрых сценариев

Чёткая иерархия, крупные карточки, минимум «шума»

Супер-апп паттерны: чистая сетка, быстрые CTA, удобная корзина

Визуал и стиль

«Ковровая бомбардировка» цвета, отсутствие иерархии, устаревший стиль, слабая привлекательность продукта

Контраст, выразительные CTA, оптимизированные для касания на мобильных устройствах

Чистая сетка, цветовые акценты только на ключевых CTA

Информация

Контакты, адреса и часы работы скрыты; вакансии не видны

Прозрачность, важная информация доступна немедленно

Фокус на геолокации и быстром поиске

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

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

Действия для MAXX:

Действия для MAXX:

Главная страница

  • Удалить повторяющиеся призывы к действию, упростите карточки

  • Переместить промо в отдельные блоки

  • Добавить четкую иерархию (как у Dodo)

Процесс оформления заказа

  • Уменьшить количество шагов

  • Включить оформление заказа для гостей

  • Добавить автозаполнение адреса и карты

Mobile First

  • Дизайн с приоритетом для смартфонов (>375px)

  • Расширьте макеты для рабочего стола позже

Визуал

  • Стандартизировать цвета, типографику и интервалы

  • Добавить контрастные призывы к действию

  • Устранить использование цвета в стиле «ковровая бомбардировка»

UX-паттерны конкурентов

  • Реализовать «Повторить заказ»

  • Обеспечить быстрый доступ к популярным блюдам

  • Добавить персонализированные рекомендации — без перегрузки главной страницы

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

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

  • Большие пространства с акцентом на карточках продуктов и больших фотографиях/иллюстрациях

  • Контрастная типография — жирные гротескные шрифты выделяют категории или призыв к действию в некоторых макетах

  • Пастельные и нейтральные фоны с яркими акцентами (фиолетовый, оранжевый, черный), чтобы привлечь внимание к ключевым элементам

  • Большие пространства с акцентом на карточках продуктов и больших фотографиях/иллюстрациях

  • Контрастная типография — жирные гротескные шрифты выделяют категории или призыв к действию в некоторых макетах

  • Пастельные и нейтральные фоны с яркими акцентами (фиолетовый, оранжевый, черный), чтобы привлечь внимание к ключевым элементам

Сценарии и взаимодействия:

Сценарии и взаимодействия:

Разработан плавный поток, который учитывает различные пользовательские пути — от выбора блюда до завершения заказа и его получения.

Разработан плавный поток, который учитывает различные пользовательские пути — от выбора блюда до завершения заказа и его получения.

Разработка дизайна:

Разработка дизайна:

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

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

  • На основе исследования и разработанного сценария были созданы адаптивные макеты дизайна в Figma.

  • В своей работе я использовал авто-раскладки, стили и варианты для создания всех компонентов интерфейса.

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

  • На основе исследования и разработанного сценария были созданы адаптивные макеты дизайна в Figma.

  • В своей работе я использовал авто-раскладки, стили и варианты для создания всех компонентов интерфейса.

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

Что было достигнуто:

Что было достигнуто:

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

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

Оформление заказа без регистрации

  • Незарегистрированные пользователи теперь могут оформлять заказы и отслеживать их статус.

  • После авторизации данные заказа сохраняются в профиле пользователя.

Быстрый заказ

  • Процесс заказа был упрощен за счет сокращения шагов.

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

Автоматическое сохранение адреса:

Автоматическое сохранение адреса:

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

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

Повторить заказ:

Повторить заказ:

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

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

Десктоп:

Десктоп:

Настольная версия была полностью расширена с использованием адаптивных компонентов. Они безупречно интегрируются в общую визуальную систему и обеспечивают удобство использования на различных устройствах.

Настольная версия была полностью расширена с использованием адаптивных компонентов. Они безупречно интегрируются в общую визуальную систему и обеспечивают удобство использования на различных устройствах.

👤 Пользовательская ценность:

  • Простота и скорость — меньше шагов для заказа, возможность гостевого оформления и переоформление в один клик.

  • Ясность — чистый интерфейс, акцент на основные действия, четкая навигация.

  • Эмоция — «аппетитные» визуальные эффекты с крупными фотографиями еды и контрастной типографикой.

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

📈 Продуктовая ценность:

  • Более высокая конверсия — упрощенные процессы уменьшают время принятия решений.

  • Лояльность клиентов — функции повторного заказа и персонализации способствуют повторному использованию.

  • Конкурентоспособность — современный сервис, ориентированный на мобильные устройства, соответствует лидерам рынка (Dodo, Яндекс.Еда).

  • Масштабируемость — основа для системы дизайна и адаптации на различных устройствах.

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

Дизайн, который лучше:

Дизайн, который лучше:

Проект MAXX преобразовал устаревший, перегруженный сайт в современный сервис питания, ориентированный на удобство и эмоции. Интерфейс стал более чистым, понятным и "аппетитным", а процесс заказа — более быстрым и простым.

Проект MAXX преобразовал устаревший, перегруженный сайт в современный сервис питания, ориентированный на удобство и эмоции. Интерфейс стал более чистым, понятным и "аппетитным", а процесс заказа — более быстрым и простым.

© 2025

Souncloud

Dprofile

Dribbble

© 2025

Souncloud

Dprofile

Dribbble

Create a free website with Framer, the website builder loved by startups, designers and agencies.