Концепт редизайна приложения «РЖД Пассажирам» для iOS

Процесс создания нового интерфейса приложения — с исследованием и отказом от Dribbble-дизайна.

Я как пользователь приложения РЖД столкнулся с рядом проблем интерфейса и взаимодействия. А как дизайнер — решил погрузиться в продукт и посмотреть, как его улучшить. Статья описывает полный процесс создания концепта: предыстория, исследование, прототипирование, дизайн и выводы.

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

Можно обвинить дизайнеров, заказчика, который захотел поместить функциональность сайта в одно приложение, но факт остаётся фактом — интерфейс приложения РЖД сложный и местами неочевидный.

Я сделал концепт — приложение для людей и без Dribbble-дизайна на каждом экране. Своего мнения было недостаточно, и я провёл небольшое исследование.

Исследование проводил с коллегами (не дизайнерами) из компании e-Legion:

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

После тестирования я получил обратную связь в целом по приложению РЖД и дополнил своими заметками. Составил обобщающий список болевых точек:

Раздел меню «Вокзалы» никто не понял, хотя это один из самых полезных разделов в приложении.

Туда

Обратно

Чем дальше в лес, тем толще белки.

Сначала планировал три экрана: поиск маршрута, выбор поезда и выбор вагона. Но надо же ещё показать выбранные фильтры и негативные сценарии.

Промежуточные экраны прототипов перевалили за 50, а концепт расширился до 27.

Мы привыкли сразу делать Tab bar, но в этот раз я хотел разобраться. Tab bar удобнее в интерфейсе, чем «гамбургер», но не является панацеей. В рамках Human Interface Guidelines дизайнеры и разработчики стараются добиться лучшего опыта в iOS, используя чаще Tab bar.

На Android же больше приложений с «гамбургером». Material.io позволяет использовать оба варианта. В большинстве обновлённых сервисов Google есть «гамбургер» и Tab bar. До сих пор нет единого правильного решения для всех.

При выборе стоит исходить из частоты обращений к разделам меню. Если можно выделить три–пять часто используемых разделов, то есть смысл в Tab bar. Если частый раздел один, то «гамбургер» — нормальное решение. Не такое удобное, но только из-за этого переделывать интерфейс нет никакого смысла, иначе — это дизайн ради дизайна, привет, Dribbble. Я выбрал Tab bar, потому что есть необходимость в доступе к трём–пяти разделам.

Сложным оказался выбор отображаемой информации для большой аудитории приложения. Пришлось усреднять выборку информации приложений и представлять опыт реальных пользователей.

По первому рабочему прототипу получил объёмную обратную связь из отдела дизайна и отбросил несколько крутых (как тогда казалось) фишек.

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

Но невозможно выбрать сразу все пункты, а потом расплатиться: одно направление бронируется на 15 минут, есть шанс, что пока пользователь заполняет сложный маршрут, бронь на первый пункт закончится. Это нерабочий кейс — убираем.

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

Выбрал размеры и начертания шрифтов, сверстал текстовые блоки, нарисовал иконки, подобрал цвет. Всё делал в символах. Проверял на девайсах через Sketch Mirror и Crystal.

В процессе дизайна прототип слегка менялся. Референсы — приложения Google, «Яндекса», «Туту.ру»

К первому сносному дизайну сделал интерактивный прототип в Figma (быстро и можно комментировать) и отправил в отдел дизайна на ревью.

Параллельно сделал пару экранов в тёмном оформлении. Тёмная тема интерфейса — отличный инструмент для определения акцентов. Впоследствии изменил и основной интерфейс.

После самопроверок собрал ещё 60 правок и завершил экраны для презентации и интерактивного прототипа.

Раздел «Маршруты»

При выборе поезда или вагона можно в любой момент развернуть полную информацию — иначе можно упустить важное в таком объёме деталей. Всегда видны выбранные фильтры.

Раздел «Заказы»

Основная работа заключалась в правильной вёрстке информации и акцентировании внимании на важном: стоимость, направление, время.

Раздел «Вокзалы»

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

Раздел «Ещё»

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

Презентация с флоу, описанием каждого раздела, интерактивным прототипом и анимациями — Behance.

Создавая концепт, я понял, как работает приложение изнутри, с какими проблемами могут столкнутся пользователи и как на это отреагирует (или не отреагирует) приложение. Какие разделы есть и как их сделать лучше, чтобы ими начали пользоваться. Что необходимо усилить, а что убрать для улучшения опыта.

В процессе я выписывал все наблюдения, которые пригодятся для работы над другими проектами:

В создании концепта использовал инструменты:

Занимался проектом три месяца с разной степенью вовлечённости. Сейчас я бы отказался от некоторых решений — переделал бы фильтры и сортировку, убрал бы раздел «Заказы» и так далее. Да и вообще постарался бы сделать в один экран — эдакий «РЖД Лайт».

Спасибо за внимание!