7 лет развивали приложение для курьеров, не задумываясь о дизайне

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

7 лет развивали приложение для курьеров, не задумываясь о дизайне

Как выглядело приложение сначала

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

<p>В старом интерфейсе вся информация есть, но некоторые элементы не выведены на нужный экран или плохо заметны. Например, в профиле курьера не виден общий доход за день, а в списке заказов много текста и мелкий шрифт</p>

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

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

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

Два года внедряли изменения, почему так долго?

Когда решение созрело, в штате Dostavista уже работал дизайнер. Ему передали задачу, и первым делом он собрал дизайн-систему — это набор типовых элементов, которые можно использовать при разработке продукта, и правила их применения.

<p>Несколько составляющих нашей дизайн-системы. Шрифты и формы элементов в курьерском и клиентском приложениях мы привели к единому стандарту, но оставили разными цветовые решения</p>

Несколько составляющих нашей дизайн-системы. Шрифты и формы элементов в курьерском и клиентском приложениях мы привели к единому стандарту, но оставили разными цветовые решения

Дальше нужно было вносить изменения и перерабатывать визуал.

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

Такой подход выбрали по двум причинам:

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

Всего приложение прошло примерно 35 итераций обновлений за два года.

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

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

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

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

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

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

<p>В тестах пользователь видит прототип интерфейса с заранее определенным сценарием, а мы понимаем, где он допускает ошибки</p>

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

И, конечно, рубрика «Было — стало»

Покажем три наиболее заметных обновления, которые мы реализовали.

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

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

7 лет развивали приложение для курьеров, не задумываясь о дизайне

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

7 лет развивали приложение для курьеров, не задумываясь о дизайне

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

Чтобы написать диспетчеру, курьеру нужно было нажать на иконку сообщений — открывались уведомления, потом выбрать раздел «Сообщения» и еще нажать на кнопку «Перейти в чат с диспетчером». Экран с кнопкой «Перейти в чат с диспетчером» был пустым и вызывал много вопросов.

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

<p>Написать в поддержку теперь можно из основного меню по нажатию одной кнопки</p>

Написать в поддержку теперь можно из основного меню по нажатию одной кнопки

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

Вот какие выводы мы сделали:

  • Итеративный подход себя оправдывает. Невозможно с первого раза продумать все детали и подготовить большое «идеальное» обновление. Работать постепенно для нас удобнее: это экономит ресурсы команды, а пользователи видят улучшения от месяца к месяцу.
  • Новые элементы и сценарии стоит тестировать, даже если продуктовая команда в них уверена. В юзабилити-тестах открываются неочевидные вещи, это способ получить взгляд со стороны.
  • Дизайн-система упрощает работу с визуалом, с нее нужно начинать любую разработку.

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

30
10 комментариев

Хорошо описана методология юзабилити-тестирования! Но рекомендовал бы разнообразить тестирование пользователями не имеющими отношения к вашему бизнесу.

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

Большое спасибо, хорошего дня!

1
Ответить

А как вы делали тепловую карту?

Ответить

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

Это зачастую даже более эффективно, чем использование тепловой карты или карты скроллов/кликов Вебвизора

1
Ответить

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

Ответить

За 7 лет не задумываться об дизайне это кончено сильно

Ответить

И такое бывает :)

Ответить

Разрешите курьерам менять фото на аватар!!! У меня фотография стоит такая страшная что когда я открываю этот раздел - пугаюсь!!!!

Ответить