Приложение для курьера
Мобильное приложение используется для доставки заказов, отслеживания статусов заказов и оформления возврата. В рамках проекта я занимался редизайном интерфейса и пользовательских сценариев
Команда
Product designer, Product manager
Product designer, Product manager
Длительность
6 месяцев
6 месяцев
Моя роль
Lead Product Designer
Lead Product Designer
Метрики
Existing basic components were utilizeds
Existing basic components were utilizeds
До редизайна
Проблема
К моменту начала работы над проектом курьерское приложение накопило ряд системных проблем, связанных с интерфейсом, структурой и ограничениями для дальнейшего развития продукта. Эти проблемы напрямую влияли на скорость и удобство работы курьеров
Отсутствие доступности интерфейса
В приложении не учитывались базовые принципы доступности: низкая контрастность элементов и текста затрудняла восприятие информации, особенно при работе в сложных условиях.
В приложении не учитывались базовые принципы доступности: низкая контрастность элементов и текста затрудняла восприятие информации, особенно при работе в сложных условиях.
Перегруженная структура и избыточное количество экранов
Со временем появилось множество лишних экранов и сценариев, что усложняло навигацию и увеличивало когнитивную нагрузку на курьеров
Со временем появилось множество лишних экранов и сценариев, что усложняло навигацию и увеличивало когнитивную нагрузку на курьеров
Визуально устаревший интерфейс
Приложение выглядело несовременно и не соответствовало текущему уровню продукта и ожиданиям пользователей
Приложение выглядело несовременно и не соответствовало текущему уровню продукта и ожиданиям пользователей
Ограничения для дальнейшего развития продукта
Текущая архитектура и интерфейс не позволяли гибко добавлять новые функции и масштабировать приложение
Текущая архитектура и интерфейс не позволяли гибко добавлять новые функции и масштабировать приложение
Бизнес цели
Перед началом редизайна мы синхронизировались с бизнесом и зафиксировали ключевые задачи, которые приложение должно было решать в ближайшей перспективе
Поддержка активного роста компании
Торговая сеть активно расширялась и приобретала новые магазины, что требовало устойчивого и масштабируемого цифрового решения для курьеров
Торговая сеть активно расширялась и приобретала новые магазины, что требовало устойчивого и масштабируемого цифрового решения для курьеров
Создание универсального курьерского приложения
Необходимо было отвязать приложение от бренда основного магазина и подготовить его к использованию в формате white-label для разных торговых сетей
Необходимо было отвязать приложение от бренда основного магазина и подготовить его к использованию в формате white-label для разных торговых сетей
01
ИССЛЕДОВАНИЕ
На этом этапе мы собрали и структурировали входные данные о текущем состоянии продукта. В основе — отзывы курьеров, обратная связь от команды и моя продуктовая экспертиза
Поиск болей
Совместно с аналитиком мы провели аудит интерфейса и пользовательских сценариев, чтобы выявить узкие места, перегруженные экраны и точки, вызывающие ошибки или замедляющие работу курьеров
Анализ обратной связи от курьеров
Мы изучили существующие отзывы и комментарии пользователей, чтобы понять, какие экраны и действия вызывают наибольшее количество вопросов и затруднений.
Мы изучили существующие отзывы и комментарии пользователей, чтобы понять, какие экраны и действия вызывают наибольшее количество вопросов и затруднений.
Аудит интерфейса и сценариев
Я последовательно прошёл основные пользовательские флоу, фиксируя неочевидные элементы, перегруженные экраны и нарушения визуальной иерархии
Я последовательно прошёл основные пользовательские флоу, фиксируя неочевидные элементы, перегруженные экраны и нарушения визуальной иерархии
Экспертная оценка интерфейса
Я использовал принципы UX-дизайна, чтобы выявить несоответствия паттернам, проблемы с доступностью, контрастностью и визуальными приоритетами
Я использовал принципы UX-дизайна, чтобы выявить несоответствия паттернам, проблемы с доступностью, контрастностью и визуальными приоритетами
Список заказов
Проблемы навигации и доступности профиля
Пользователи испытывали сложности с ориентацией в приложении. Профиль курьера и связанные с ним действия были плохо заметны и не воспринимались как часть основной навигации. Это приводило к тому, что курьеры не всегда понимали, где находятся настройки, личная информация и вспомогательные функции
Пользователи испытывали сложности с ориентацией в приложении. Профиль курьера и связанные с ним действия были плохо заметны и не воспринимались как часть основной навигации. Это приводило к тому, что курьеры не всегда понимали, где находятся настройки, личная информация и вспомогательные функции
Визуальная перегруженность карточки заказа
Карточка заказа использовала слишком большое количество цветов и ярких акцентов. Из-за этого интерфейс выглядел перегруженным, отвлекал внимание от ключевой информации и усложнял быстрое считывание данных, особенно при работе «на ходу»
Карточка заказа использовала слишком большое количество цветов и ярких акцентов. Из-за этого интерфейс выглядел перегруженным, отвлекал внимание от ключевой информации и усложнял быстрое считывание данных, особенно при работе «на ходу»
Неочевидное отображение времени в карточке заказа
На главной странице в карточке заказа отображались два значения времени без пояснений. Пользователю было непонятно, что именно означает каждое из них (например, время доставки, дедлайн или ожидаемое время прибытия), что создавало путаницу и увеличивало риск ошибок
На главной странице в карточке заказа отображались два значения времени без пояснений. Пользователю было непонятно, что именно означает каждое из них (например, время доставки, дедлайн или ожидаемое время прибытия), что создавало путаницу и увеличивало риск ошибок
Страница заказа
Неочевидная кликабельность элементов
Некоторые элементы интерфейса выглядели как кликабельные, но не имели интерактивного поведения. Это вводило пользователей в заблуждение, приводило к лишним действиям и снижало доверие к интерфейсу.
Некоторые элементы интерфейса выглядели как кликабельные, но не имели интерактивного поведения. Это вводило пользователей в заблуждение, приводило к лишним действиям и снижало доверие к интерфейсу.
Отсутствие обозначения комментария клиента
Комментарий клиента не имел подписи и визуального акцента. Пользователи не понимали, что это именно комментарий от клиента, из-за чего важная информация могла быть пропущена.
Комментарий клиента не имел подписи и визуального акцента. Пользователи не понимали, что это именно комментарий от клиента, из-за чего важная информация могла быть пропущена.
Неверные визуальные приоритеты информации
Динамическая информация, которая менялась в процессе доставки и требовала внимания, отображалась мелким шрифтом. В то же время второстепенные и постоянные данные имели такой же или больший визуальный вес, что нарушало иерархию и усложняло восприятие.
Динамическая информация, которая менялась в процессе доставки и требовала внимания, отображалась мелким шрифтом. В то же время второстепенные и постоянные данные имели такой же или больший визуальный вес, что нарушало иерархию и усложняло восприятие.
Отсутствие логической сортировки данных
Информация на странице была размещена без чёткой структуры: разные типы данных перемешивались между собой, что затрудняло быстрое сканирование экрана и поиск нужной информации
Информация на странице была размещена без чёткой структуры: разные типы данных перемешивались между собой, что затрудняло быстрое сканирование экрана и поиск нужной информации
Страница заказа
Перегруженность интерфейса кнопками
На экране одновременно отображалось большое количество кнопок и элементов управления, часть из которых наезжала друг на друга. Это усложняло восприятие информации, мешало быстрому принятию решений и увеличивало вероятность ошибок при нажатии.
На экране одновременно отображалось большое количество кнопок и элементов управления, часть из которых наезжала друг на друга. Это усложняло восприятие информации, мешало быстрому принятию решений и увеличивало вероятность ошибок при нажатии.
Неочевидность и риск полного возврата заказа
Кнопка полного возврата была размещена рядом с другими действиями и визуально не отличалась от них. Пользователям было неочевидно, какую кнопку необходимо нажимать в конкретной ситуации — подтвердить доставку или оформить полный возврат.
Это вызывало страх совершить ошибку и в отдельных случаях приводило к случайному оформлению полного возврата заказа.
Кнопка полного возврата была размещена рядом с другими действиями и визуально не отличалась от них. Пользователям было неочевидно, какую кнопку необходимо нажимать в конкретной ситуации — подтвердить доставку или оформить полный возврат.
Это вызывало страх совершить ошибку и в отдельных случаях приводило к случайному оформлению полного возврата заказа.
02
Формирование гипотез
На основе выявленных проблем мы совместно с аналитиком сформировали набор UX-гипотез. Каждая гипотеза была направлена на снижение ошибок, повышение понятности интерфейса и упрощение ежедневной работы курьеров
Главная страница
Основные рабочие экраны, где курьер принимает решения и отслеживает статус доставок
01
Гипотеза №1
Если упростить навигацию и сделать профиль курьера частью основной структуры, пользователи будут быстрее ориентироваться в приложении и реже терять доступ к вспомогательным функциям
Если упростить навигацию и сделать профиль курьера частью основной структуры, пользователи будут быстрее ориентироваться в приложении и реже терять доступ к вспомогательным функциям
Гипотеза 2
Если сократить количество цветов и ярких акцентов в карточке заказа, ключевая информация станет легче восприниматься, а визуальная нагрузка снизится
Если сократить количество цветов и ярких акцентов в карточке заказа, ключевая информация станет легче восприниматься, а визуальная нагрузка снизится
Гипотеза 3
Если явно подписать и визуально разделить типы времени в карточке заказа, курьеры будут лучше понимать дедлайны и меньше ошибаться при планировании доставки
Если явно подписать и визуально разделить типы времени в карточке заказа, курьеры будут лучше понимать дедлайны и меньше ошибаться при планировании доставки
Страница заказа
Экран активной доставки, где важны скорость считывания информации и однозначность действий
Гипотеза 4
Если визуально отделить кликабельные элементы от некликабельных и унифицировать интерактивные паттерны, количество ошибочных действий снизится
Если визуально отделить кликабельные элементы от некликабельных и унифицировать интерактивные паттерны, количество ошибочных действий снизится
Гипотеза 5
Если явно обозначить комментарий клиента и усилить его визуальный приоритет, важная информация перестанет теряться в общем потоке данных.
Если явно обозначить комментарий клиента и усилить его визуальный приоритет, важная информация перестанет теряться в общем потоке данных.
Гипотеза 5
Если явно обозначить комментарий клиента и усилить его визуальный приоритет, важная информация перестанет теряться в общем потоке данных.
Если явно обозначить комментарий клиента и усилить его визуальный приоритет, важная информация перестанет теряться в общем потоке данных.
Гипотеза 6
Если выстроить чёткую визуальную иерархию, где динамическая информация получает больший вес, курьеры смогут быстрее считывать изменения в заказе
Если выстроить чёткую визуальную иерархию, где динамическая информация получает больший вес, курьеры смогут быстрее считывать изменения в заказе
Страница заказа
Сценарии, в которых ошибка пользователя может привести к нежелательным последствиям
Гипотеза 7
Если сократить количество кнопок на экране и расставить приоритеты между действиями, снизится когнитивная нагрузка и риск ошибочных нажатий.
Если сократить количество кнопок на экране и расставить приоритеты между действиями, снизится когнитивная нагрузка и риск ошибочных нажатий.
Гипотеза 8
Если визуально и логически разделить действия «доставка» и «полный возврат», а также добавить подтверждение для критичных сценариев, пользователи будут увереннее взаимодействовать с экраном и реже совершать необратимые ошибки.
Если визуально и логически разделить действия «доставка» и «полный возврат», а также добавить подтверждение для критичных сценариев, пользователи будут увереннее взаимодействовать с экраном и реже совершать необратимые ошибки.
03
Проверка гипотез
После формирования гипотез мы перешли к их поэтапной проверке. Основной фокус был на снижении рисков, связанных с критичными сценариями, и на проверке понятности интерфейса в реальных условиях работы курьеров
Подход к тестированию
Прототип позволил проверить общую логику и иерархию экрана:
как пользователи ориентируются, считывают приоритеты и переходят
к ключевым действиям.
как пользователи ориентируются, считывают приоритеты и переходят
к ключевым действиям.
Быстрая проверка прототипов
Гипотезы проверялись на интерактивных прототипах, что позволяло оценить логику экранов, навигацию и понятность действий до передачи в разработку
Гипотезы проверялись на интерактивных прототипах, что позволяло оценить логику экранов, навигацию и понятность действий до передачи в разработку
Совместные разборы с командой
Решения обсуждались с аналитиком и другими участниками команды, чтобы убедиться, что изменения корректно отражают бизнес-логику и не создают новых рисков.
Решения обсуждались с аналитиком и другими участниками команды, чтобы убедиться, что изменения корректно отражают бизнес-логику и не создают новых рисков.
Фокус на критичных сценариях
Особое внимание уделялось действиям с высоким риском ошибки — подтверждению доставки и оформлению полного возврата.
Особое внимание уделялось действиям с высоким риском ошибки — подтверждению доставки и оформлению полного возврата.
