7 лет развивали приложение для курьеров, не задумываясь о дизайне
В итоге, когда появлялись новые функции, мы уже не знали, куда их добавлять, поэтому решили полностью переделать визуал. Пока меняли, нашли еще проблемы и сделали улучшения за два года и 35 итераций. Расскажем, как это было и почему так долго.
Как выглядело приложение сначала
Изначально курьерское приложение Dostavista создавали только разработчики. Их задача — сделать, чтобы приложение работало, а визуальная составляющая вторична. Разработчик не обязан знать, как выстраивать информационную иерархию: например, правильно подобрать размер шрифта или оттенок кнопки, чтобы пользователь ее заметил.
В старом интерфейсе вся информация есть, но некоторые элементы не выведены на нужный экран или плохо заметны. Например, в профиле курьера не виден общий доход за день, а в списке заказов много текста и мелкий шрифт
Функции и кнопки добавлялись порой в самые неочевидные места. Мы поняли, что так дальше продолжаться не может, когда разрабатывали для курьеров систему регистрации в качестве самозанятых. Это был сценарий, который удалось вписать в старый дизайн с большими сложностями, и курьеру не было интуитивно понятно, как пройти регистрацию через наше приложение.
Такие же сложности были с другими сценариями. Естественно, мы получали негативный фидбек. В итоге пришли к решению обновлять визуальную часть приложения.
Два года внедряли изменения, почему так долго?
Когда решение созрело, в штате Dostavista уже работал дизайнер. Ему передали задачу, и первым делом он собрал дизайн-систему — это набор типовых элементов, которые можно использовать при разработке продукта, и правила их применения.
Несколько составляющих нашей дизайн-системы. Шрифты и формы элементов в курьерском и клиентском приложениях мы привели к единому стандарту, но оставили разными цветовые решения
Дальше нужно было вносить изменения и перерабатывать визуал.
У нас не было цели отрисовать сразу все элементы и обновить приложение одномоментно. Подход был другой: в каждом релизе улучшать хотя бы небольшой блок.
Такой подход выбрали по двум причинам:
- Проще поддерживать цикл обновлений и быстрее исправлять недочеты в приложении. Если внедрять все изменения разом, нужно много времени на разработку, тестирование и релиз. Пользователям придется дольше ждать улучшений, а нам — обратную связь. В финале есть риск столкнуться со всеми возможными багами одновременно.
- Пользователи видят, что приложение постоянно развивается. Они легче воспринимают изменения и привыкают к ним. Итеративность позволяет менее болезненно улучшать продукт.
Всего приложение прошло примерно 35 итераций обновлений за два года.
Для важных вещей проводили юзабилити-тестирование: модерируемые и немодерируемые тесты с курьерами. Нам нужно было понять, насколько хорошо работают решения.
Модерируемый тест — когда курьер приходит на встречу, ему показывают новый интерфейс и просят пройти определенный сценарий.
Например, нужно зарегистрироваться в приложении. На экране регистрации есть кнопка второстепенного действия — ввести дополнительные данные. Она не должна привлекать внимание сразу, но по сценарию курьер должен ее увидеть. Когда он проходит сценарий, команда дизайна оценивает, в какой момент человеку становится сложно или непонятно. Дальше разбирается почему — например, текст на кнопке плохо читается или цвет подобран неправильно, — а после вносит изменения.
Модерируемые тесты позволяют ограничить выборку: например, пригласить к участию только новичков или, наоборот, давно работающих курьеров.
Немодерируемый тест проходит без модератора. Такие тесты проводятся, когда нужно быстро получить обратную связь, в них может участвовать больше курьеров.
В существующее приложение добавляется игровой момент: просьба пройти квест или опрос. Курьер выполняет задание, а мы собираем статистику о его действиях и точно так же разбираемся со сложностями.
В тестах пользователь видит прототип интерфейса с заранее определенным сценарием, а мы понимаем, где он допускает ошибки
И, конечно, рубрика «Было — стало»
Покажем три наиболее заметных обновления, которые мы реализовали.
Обновили профиль курьера и изменили навигацию. Теперь самые важные разделы находятся на странице профиля в карточках, и это позволяет пользователю быстро переключаться между ними без горизонтальной прокрутки.
Еще на экране отображается суммарный доход за день и количество бонусных баллов, виден рейтинг и количество заказов.
Сменили акценты в разделе со списком заказов. Интерфейс стал интуитивно понятным и удобным. Яркие геопоинты и дополнительное пространство помогают визуально дифференцировать точки заказа, чтобы выбрать для себя максимально удобный маршрут доставки.
Упростили связь с техподдержкой. Чтобы курьер мог написать в поддержку, наше приложение интегрировано со сторонним сервисом. Изначально для интеграции использовали костыльное решение, и получилось очень неудобно.
Чтобы написать диспетчеру, курьеру нужно было нажать на иконку сообщений — открывались уведомления, потом выбрать раздел «Сообщения» и еще нажать на кнопку «Перейти в чат с диспетчером». Экран с кнопкой «Перейти в чат с диспетчером» был пустым и вызывал много вопросов.
Мы думали, это ненадолго: решение настолько неудобное и ужасное, что точно не останется в приложении. Но оказалось как в поговорке: нет ничего более постоянного, чем временное. Так что, когда мы спустя два года, наконец, изменили механику и убрали лишний экран, это стало внутренним мемом — мы до сих пор называем появившуюся удобную форму связи «своим главным достижением».
Написать в поддержку теперь можно из основного меню по нажатию одной кнопки
После этих трех обновлений мы начали по-настоящему гордиться приложением: теперь его не стыдно показывать, а курьерам стало удобнее работать.
Вот какие выводы мы сделали:
- Итеративный подход себя оправдывает. Невозможно с первого раза продумать все детали и подготовить большое «идеальное» обновление. Работать постепенно для нас удобнее: это экономит ресурсы команды, а пользователи видят улучшения от месяца к месяцу.
- Новые элементы и сценарии стоит тестировать, даже если продуктовая команда в них уверена. В юзабилити-тестах открываются неочевидные вещи, это способ получить взгляд со стороны.
- Дизайн-система упрощает работу с визуалом, с нее нужно начинать любую разработку.
Оценить, как выглядит курьерское приложение сейчас, можно здесь, а обсудить, чего еще не хватает, — в комментариях.
Хорошо описана методология юзабилити-тестирования! Но рекомендовал бы разнообразить тестирование пользователями не имеющими отношения к вашему бизнесу.
Для чистоты эксперимента, не ангажированные посетители смогу показать больше уязвимостей, чем даже только устроившиеся (но уже понимающие специфику работы с вами) курьеры.
Большое спасибо, хорошего дня!
А как вы делали тепловую карту?
Мы при исследовании действуем несколько иначе, прогоняем тестировщиков по десктоп/мобайл версиям с видеозаписью экрана, чтобы они показывали куда и как они заходили в поисках решения заданного им сценарием
Это зачастую даже более эффективно, чем использование тепловой карты или карты скроллов/кликов Вебвизора
Тепловые карты строятся на основе данных о взгляде пользователей (eye tracking), а также собираются путем записи действий пользователя и времени, проведенного в разных областях экрана. Они могут помочь выявить наиболее привлекательные и малопосещаемые области интерфейса, а также понять, как пользователи взаимодействуют с определенными элементами.
За 7 лет не задумываться об дизайне это кончено сильно
И такое бывает :)
Разрешите курьерам менять фото на аватар!!! У меня фотография стоит такая страшная что когда я открываю этот раздел - пугаюсь!!!!