Как убрать хаос
и ускорить путь пользователя
Редизайн Tanuki
Моя роль: Продуктовый дизайнер
Мои задачи: Провёл глубинное интервью с пользователями, обнаружил структурные проблемы интерфейса, влияющие на бизнес, сформулировал гипотезы, спроектировал новую структуру и новое решение, протестировал решение на пользователях, подготовил макет к разработке.
Введение
TanukiFamily — приложение доставки еды с 950К MAU. 89% пользователей заходят с мобильного устройства. Компоненты интерфейса были неструктурированными, со слабой визуальной иерархией. Существующие UI/UX-паттерны начали ограничивать развитие продукта и блокировать его масштабирование.
Цели
- Создать условия для масштабируемости продукта.
- Выстроить консистентную дизайн-систему.
- Снизить когнитивную нагрузку на пользователя.
- Ускорить прохождение ключевых пользовательских сценариев.
Как убрать хаос
и ускорить путь пользователя
Редизайн Tanuki
Моя роль: Продуктовый дизайнер
Мои задачи: Провёл глубинное интервью с пользователями, обнаружил структурные проблемы интерфейса, влияющие на бизнес, сформулировал гипотезы, спроектировал новую структуру и новое решение, протестировал решение на пользователях, подготовил макет к разработке.
Введение
TanukiFamily — приложение доставки еды с 950К MAU. 89% пользователей заходят с мобильного устройства. Компоненты интерфейса были неструктурированными, со слабой визуальной иерархией. Существующие UI/UX-паттерны начали ограничивать развитие продукта и блокировать его масштабирование.
Цели
- Создать условия для масштабируемости продукта.
- Выстроить консистентную дизайн-систему.
- Снизить когнитивную нагрузку на пользователя.
- Ускорить прохождение ключевых пользовательских сценариев.
Анализ текущего решения
Главная страница
- Интерфейс перегружен визуальным шумом, а слабая иерархия затрудняет определение следующего шага.
- Объединение доставки и кейтеринга которые являются двумя разными вертикалями бизнеса в рамках одной группы приводит к конкуренции за внимание пользователя.
- Акции и УТП размещены в самом низу страницы, где их практически не замечают.
Все экраны ниже можно скролить
До
После
Страница товара
- Карточки товаров не имеют единой структуры в одних используется художественный текст, в других перечисление состава.
- Секция Upsell присутствует не во всех товарах.
- Горизонтальный скролл в секции Upsell снижает её эффективность.
Всё это нарушает консистентность интерфейса и негативно влияет на AOV.
Анализ текущего решения
Главная страница
- Интерфейс перегружен визуальным шумом, а слабая иерархия затрудняет определение следующего шага.
- Объединение доставки и кейтеринга которые являются двумя разными вертикалями бизнеса в рамках одной группы приводит к конкуренции за внимание пользователя.
- Акции и УТП размещены в самом низу страницы, где их практически не замечают.
Все экраны ниже можно скролить
/
Страница товара
- Карточки товаров не имеют единой структуры в одних используется художественный текст, в других перечисление состава.
- Секция Upsell присутствует не во всех товарах.
- Горизонтальный скролл в секции Upsell снижает её эффективность.
Всё это нарушает консистентность интерфейса и негативно влияет на AOV.
До
После
/
Корзина и оформление заказа
Логически связанные данные распределены по двум отдельным экранам, при этом часть информации дублируется. Это удлиняет пользовательский путь и замедляет прохождение сценария.
До
/
После
Вывод по текущему решению
Большинство обнаруженных проблем связаны с отсутствием единой системы. Интерфейс требует от пользователя лишних усилий на
каждом этапе и ограничивает дальнейшее развитие продукта.
Исходя из этого я нашел несколько идей для улучшения:
- Стандартизировать компоненты, паттерны и страницы для повышения консистентности.
- Снизить уровень визуального шума, убрав лишние элементы
- Разделить доставку и кейтеринг для устранения смешения вертикалей
- Упростить навигацию и сформировать очевидные точки входа на главной странице
- Выстроить чёткую визуальную и информационную иерархию
Корзина и оформление заказа
Логически связанные данные распределены по двум отдельным экранам, при этом часть информации дублируется. Это удлиняет пользовательский путь и замедляет прохождение сценария.
До
/
После
Вывод по текущему решению
Большинство обнаруженных проблем связаны с отсутствием единой системы. Интерфейс требует от пользователя лишних усилий на
каждом этапе и ограничивает дальнейшее развитие продукта.
Исходя из этого я нашел несколько идей для улучшения:
- Стандартизировать компоненты, паттерны и страницы для повышения консистентности.
- Снизить уровень визуального шума, убрав лишние элементы
- Разделить доставку и кейтеринг для устранения смешения вертикалей
- Упростить навигацию и сформировать очевидные точки входа на главной странице
- Выстроить чёткую визуальную и информационную иерархию
Анализ конкурентов
Я изучил решения конкурентов — Dodo, Drinkit, Wolt, Bolt Food и «Вкусно — и точка», чтобы понять, какие UX-паттерны уже сформировали ожидания пользователей в сервисах доставки еды.
Анализ конкурентов
- Все пять приложений используют минималистичную визуальную систему с чёткой иерархией
- Upsell в вертикальном формате встроен в структуру страницы товара
- Bolt Food объединяет корзину и оформление заказа в один экран, убирая лишний шаг из сценария.
Это подтвердило, что проблемы Тануки связаны с отклонением от привычных паттернов к которым привыкли пользователи.
Гипотезы
Гипотезы основаны на том, что отсутствие консистентности и чёткой иерархии усложняет навигацию по продукту, увеличивает количество лишних действий, замедляет прохождение ключевых сценариев, и повышает вероятность потери контекста.
Иерархия
Сейчас в интерфейсе много визуального шума и лишних элементов. Если их убрать, интерфейс станет консистентнее, а пользователю будет проще считывать информацию
Навигация
Сейчас навигация между экранами непонятна и неконсистентна. Если сделать её консистентной, пользователи будут быстрее проходить сценарий и реже выпадать из воронки
Рост конверсии в сценарий
Сейчас доставка и кейтеринг смешаны в одном блоке, хотя это разные бизнесы. Если их разделить, мы создадим более эффективные точки входа в сценарий, то люди будут лучше конвертироваться в начало сценария
Увеличение среднего чека
Сейчас Upsell есть не во всех товарах, а там где он есть, используется горизонтальный скролл, что снижает его эффективность. Если добавить Upsell везде и перевести в вертикальный формат, это повысит эффективность upsell и среднюю цену чека
Анализ конкурентов
Я изучил решения конкурентов — Dodo, Drinkit, Wolt, Bolt Food и «Вкусно — и точка», чтобы понять, какие UX-паттерны уже сформировали ожидания пользователей в сервисах доставки еды.
Анализ конкурентов
- Все пять приложений используют минималистичную визуальную систему с чёткой иерархией
- Upsell в вертикальном формате встроен в структуру страницы товара
- Bolt Food объединяет корзину и оформление заказа в один экран, убирая лишний шаг из сценария.
Это подтвердило, что проблемы Тануки связаны с отклонением от привычных паттернов к которым привыкли пользователи.
Гипотезы
Гипотезы основаны на том, что отсутствие консистентности и чёткой иерархии усложняет навигацию по продукту, увеличивает количество лишних действий, замедляет прохождение ключевых сценариев, и повышает вероятность потери контекста.
Иерархия
Сейчас в интерфейсе много визуального шума и лишних элементов. Если их убрать, интерфейс станет консистентнее, а пользователю будет проще считывать информацию
Навигация
Сейчас навигация между экранами непонятна и неконсистентна. Если сделать её консистентной, пользователи будут быстрее проходить сценарий и реже выпадать из воронки
Рост конверсии в сценарий
Сейчас доставка и кейтеринг смешаны в одном блоке, хотя это разные бизнесы. Если их разделить, мы создадим более эффективные точки входа в сценарий, то люди будут лучше конвертироваться в начало сценария
Увеличение среднего чека
Сейчас Upsell есть не во всех товарах, а там где он есть, используется горизонтальный скролл, что снижает его эффективность. Если добавить Upsell везде и перевести в вертикальный формат, это повысит эффективность upsell и среднюю цену чека
Валидация гипотез
Юзабилити тестирование
текущего решения
Я провел юзабилити-тестирование с 6 пользователями, чтобы проверить, сталкиваются ли пользователи с проблемами, которые я нашел.
Цель: Понять, как пользователи воспринимают текущий интерфейс и насколько легко в нём ориентируются.
Целевая аудитория: Люди 20–30 лет, регулярно пользующиеся сервисами доставки еды.
Сценарий: Респондентам предлагалось выбрать любое блюдо, отредактировать его состав и оформить заказ, дойдя до страницы оплаты.
Скриншоты с юзабилити тестирования
По результатам юзабилити тестирования:
- 4/6 пользователей задержались на главной странице дольше 20 секунд
- 2/6 пользователей сначала зашли не в тот раздел
Цитаты респондентов
«
Я только потом заметил акции сначала вообще не понял, что где находится»
«
Кажется, что все вперемешку расположено, сложно быстро найти что тебе надо»
Гипотезы которые удалось подтвердить
Сейчас в интерфейсе много визуального шума и лишних элементов. Если их убрать, интерфейс станет консистентнее, а пользователю будет проще считывать информацию
Сейчас навигация между экранами непонятна и неконсистентна. Если сделать её консистентной, пользователи будут быстрее проходить сценарий и реже выпадать из воронки
Сейчас доставка и кейтеринг смешаны в одном блоке, хотя это разные бизнесы. Если их разделить, мы создадим более эффективные точки входа в сценарий, то люди будут лучше конвертироваться в начало сценария
Решение
Happy Flow
Главная страница
- Выстроил визуальную иерархию страницы, выделив приоритетный контент и ключевые точки входа. Это помогает пользователю быстрее определить следующий шаг и начать сценарий заказа.
- Вернул УТП и акции наверх страницы, разместив их в большом баннере, который сразу привлекает внимание и не теряется среди остального контента.
- Уменьшил визуальный шум: убрал лишние элементы, упростил навигацию по странице и снизил нагрузку на пользователей.
- Визуально разделил точки входа в сценарии для доставки и кейтеринга, предотвратив смешение пользователей между разными вертикалями.
Страница товара
и Upsell
- Исправил иерархию компонентов, что сделало структуру страниц более единообразной.
- Ввёл единый стиль описания состава для всех товаров.
- Перевёл секцию Upsell в вертикальный формат и встроил в структуру страницы, это увеличило количество отображаемого контента и улучшило его доступность.
- Добавил Upsell во все товары благодаря чему, вырос AOV и обнаруживаемость предложений выросла.
Корзина и
оформление заказа
Объединил два экрана в один, убрав лишний шаг из сценария и избавившись от дублирования информации.
Юзабилити тестирование
нового решения
Цель: Подтвердить гипотезы и убедиться, что новый интерфейс решает выявленные проблемы.
Респонденты: 6 Пользователей, люди 20–30 лет, регулярно пользующиеся сервисами доставки еды.
Сценарий: Респондентам предлагалось выбрать любое блюдо и оформить заказ, дойдя до страницы оплаты в кликабельном прототипе.
Скриншоты с юзабилити тестирования
По результатам юзабилити тестирования
Пользователи отметили более понятный и предсказуемый интерфейс
2/6 пользователей добавили товары из секции Upsell
Пользователи перестали застревать на главной странице
Все участники прошли сценарий быстрее, чем в текущей версии
Цитаты респондентов
«
В целом довольно легко и перед глазами»
«
Понравилось отслеживание курьера»
Результаты
Редизайн позволил выстроить чёткую иерархию, скорректировать UX-паттерны и создать основу для масштабирования продукта.
Гипотезы которые удалось подтвердить
Сейчас в интерфейсе много визуального шума и лишних элементов. Если их убрать, интерфейс станет консистентнее, а пользователю будет проще считывать информацию
Сейчас навигация между экранами непонятна и неконсистентна. Если сделать её консистентной, пользователи будут быстрее проходить сценарий и реже выпадать из воронки
Сейчас доставка и кейтеринг смешаны в одном блоке, хотя это разные бизнесы. Если их разделить, мы создадим более эффективные точки входа в сценарий, то пользователи будут лучше конвертироваться в начало сценария
Сейчас Upsell есть не во всех товарах, а там где он есть, используется горизонтальный скролл, что снижает его эффективность. Если добавить Upsell везде и перевести в вертикальный формат, это повысит эффективность upsell и среднюю цену чека
Пользователи отметили
Пользователи стали быстрее проходить сценарий
Пользователи перестали застревать на главной странице
Пользователи отметили интерфейс как более понятный
Что я понял в процессе
- Визуальная иерархия это инструмент для управления вниманием, когда иерархия отсутствует пользователь теряется.
- Качественная структура интерфейса создаёт основу для масштабирования продукта и упрощает внедрение новых функций.
- Пользователи ожидают знакомые и консистентные паттерны взаимодействия, а их нарушение создаёт проблемы.
Все экраны кейса
Страница корзины
Валидация гипотез
Юзабилити тестирование
текущего решения
Я провел юзабилити-тестирование с 6 пользователями, чтобы проверить, сталкиваются ли пользователи с проблемами, которые я нашел.
Цель: Понять, как пользователи воспринимают текущий интерфейс и насколько легко в нём ориентируются.
Целевая аудитория: Люди 20–30 лет, регулярно пользующиеся сервисами доставки еды.
Сценарий: Респондентам предлагалось выбрать любое блюдо, отредактировать его состав и оформить заказ, дойдя до страницы оплаты. Такой сценарий был выбран для того, чтобы участники смогли полноценно исследовать интерфейс приложения.
Скриншоты с юзабилити тестирования
По результатам юзабилити тестирования:
- 4/6 пользователей задержались на главной странице дольше 20 секунд
- 2/6 пользователей сначала зашли не в тот раздел
Цитаты пользователей из юзабилити тестирования
Гипотезы которые удалось подтвердить
Сейчас в интерфейсе много визуального шума и лишних элементов. Если их убрать, интерфейс станет консистентнее, а пользователю будет проще считывать информацию
Сейчас навигация между экранами непонятна и неконсистентна. Если сделать её консистентной, пользователи будут быстрее проходить сценарий и реже выпадать из воронки
Сейчас доставка и кейтеринг смешаны в одном блоке, хотя это разные бизнесы. Если их разделить,мы создадим более эффективные точки входа в сценарий, то пользователи будут лучше конвертироваться в начало сценария
Решение
Happy Flow
Цитаты пользователей из юзабилити тестирования
Главная страница
- Выстроил визуальную иерархию страницы, выделив приоритетный контент и ключевые точки входа. Это помогает пользователю быстрее определить следующий шаг и начать сценарий заказа.
- Вернул УТП и акции наверх страницы, разместив их в большом баннере, который сразу привлекает внимание и не теряется среди остального контента.
- Уменьшил визуальный шум: убрал лишние элементы, упростил навигацию по странице и снизил нагрузку на пользователей.
- Визуально разделил точки входа в сценарии для доставки и кейтеринга, предотвратив смешение пользователей между разными вертикалями.
Страница товара и Upsell
- Исправил иерархию компонентов, что сделало структуру страниц более единообразной
- Ввёл единый стиль описания состава для всех товаров
- Перевёл секцию Upsell в вертикальный формат и встроил в структуру страницы, это увеличило количество отображаемого контента и улучшило его доступность
- Добавил Upsell во все товары благодаря чему, вырос AOV и обнаруживаемость предложений выросла.
Корзина и оформление заказа
Объединил два экрана в один, убрав лишний шаг из сценария и избавившись от дублирования информации. Это позволило ускорить прохождение сценария и снизить когнитивную нагрузку на пользователя.
Юзабилити-тестирование
нового решения
Цель: Подтвердить гипотезы и убедиться, что новый интерфейс решает выявленные проблемы.
Респонденты: 6 Пользователей, люди 20–30 лет, регулярно пользующиеся сервисами доставки еды.
Сценарий: Респондентам предлагалось выбрать любое блюдо и оформить заказ, дойдя до страницы оплаты в кликабельном прототипе.
Скриншоты с юзабилити тестирования
По результатам юзабилити тестирования
Пользователи отметили более понятный и предсказуемый интерфейс
2/6 пользователей добавили товары из секции Upsell
Пользователи перестали застревать на главной странице
Все участники прошли сценарий быстрее, чем в текущей версии
Цитаты пользователей из юзабилити тестирования
Результаты
Редизайн позволил выстроить чёткую иерархию, скорректировать UX-паттерны и создать основу для масштабирования продукта.
Гипотезы которые удалось подтвердить
Сейчас в интерфейсе много визуального шума и лишних элементов. Если их убрать, интерфейс станет консистентнее, а пользователю будет проще считывать информацию
Сейчас навигация между экранами непонятна и неконсистентна. Если сделать её консистентной, пользователи будут быстрее проходить сценарий и реже выпадать из воронки
Сейчас доставка и кейтеринг смешаны в одном блоке, хотя это разные бизнесы. Если их разделить, мы создадим более эффективные точки входа в сценарий, то пользователи будут лучше конвертироваться в начало сценария
Сейчас Upsell есть не во всех товарах, а там где он есть, используется горизонтальный скролл, что снижает его эффективность. Если добавить Upsell везде и перевести в вертикальный формат, это повысит эффективность upsell и среднюю цену чека
Пользователи отметили
Пользователи стали быстрее проходить сценарий
Пользователи перестали застревать на главной странице
Пользователи отметили интерфейс как более понятный
Что я понял в процессе
- Визуальная иерархия это инструмент для управления вниманием, когда иерархия отсутствует пользователь теряется.
- Качественная структура интерфейса создаёт основу для масштабирования продукта и упрощает внедрение новых функций.
- Пользователи ожидают знакомые и консистентные паттерны взаимодействия, а их нарушение создаёт проблемы.
Все экраны кейса
Страница корзины
