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

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

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

С чего всё началось

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

  • почему приложение не предупредило заранее об отправлении;
  • почему приложение не предложило варианты решения проблемы, когда я опоздал;
  • почему не заметил, что дата неправильная.

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

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

Исследование

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

  • пять респондентов не пользуются приложением РЖД;
  • два респондента пользуются приложением.

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

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

  • перегрузка и лишняя информация на главном экране и при выборе поездов и вагонов;
  • агрессивный цвет меню и оформления в целом;
  • неинформативные пункты в меню;
  • тупиковые сценарии работы (например, выбор поезда без вагонов;
  • отсутствие предупреждений;
  • неправильные решения в интерфейсе (кнопки меню и назад в navigation bar);
  • запутанность некоторых разделов (например, «Заказы»).

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

Прототипирование

Данные для сценария прототипа

Туда

  • Отправление из Санкт-Петербурга (Московский вокзал) — 24 февраля в 21:00.
  • Прибытие в Москву (Ленинградский вокзал) — 25 февраля в 00:35.
  • 779А Сапсан — сидячие места.
  • Два пассажира.

Обратно

  • Отправление из Москвы (Октябрьский вокзал) — 27 февраля в 21:35.
  • Прибытие в Санкт-Петербург (Московский вокзал) — 28 февраля в 05:01.
  • 136*С Фирменный поезд компании — плацкарт.
  • Один пассажир.

Процесс

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

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

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

«Гамбургер» или Tab bar

Мы привыкли сразу делать 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.

Итоги

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

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

  • тёмная тема — полезный инструмент проверки интерфейса;

  • выбор «гамбургера» и Tab bar всё ещё актуален;

  • идеи нужно проверять — некоторые из них просто нереализуемы;
  • прототип и дизайн стоит делать в одном инструменте.

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

  • Figma — прототип и интерактив;
  • Sketch — дизайн;
  • Adobe Illustrator — иконки и иллюстрации;
  • Marvel — интерактив для презентации;
  • Adobe After Effects — анимация.

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

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

0
55 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Filipp Lyakh

Неплохой редизайн.

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

А еще нет возможности купить сразу несколько билетов - сценарий заточен под одиночную поездку.

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

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

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

Почему нельзя? Можно!) в разделе "Заказы" сам Заказ может содержать в себе несколько билетов. В примере их как раз два. Увидеть этот пример можно в интерактивном прототипе и в этой статье.

Ответить
Развернуть ветку
2 комментария
S.Z

В ржд отправляли?)

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

сделали заход) существующее приложение их полностью устраивает

Ответить
Развернуть ветку
8 комментариев
Павел

«Проводник сказал, что мой поезд ушёл вчера, и деньги за билет вернуть я уже не успею.»
Простите, а как можно забыть о том, что у вас запланирована поездка и ещё вы поехали на вокзал спустя день? Вы ошиблись датой в покупке билета?

Ответить
Развернуть ветку
Краб в маске лося

История знает немало случаев, когда люди, беря билеты на, например, 00:05 24 апреля, приходили на вокзал в 23:40 24 апреля и начинали слегка недоумевать. Это время всё ещё считается поздним вечером, а не началом следующих суток, особенно если шибко не вдумываться.

Ответить
Развернуть ветку
1 комментарий
Дмитрий Ковалев
Автор

Дело было так. Я смотрел билет 26 января (условно) на 27 января в 22:10. Свободных мест не было в большинстве вагонов и начал искать что-то поближе например в 21:50 отбытие мне подходит. Посмотрел цены, даты и видимо (уже не помню своих точных действий) время выбрал а дата оказалась сегодняшняя — 26 января.

Цейтнот и моя невнимательность. Но отсутствие уведомлений, что мое отправление будет через пару часов побудило сделать этот проект.

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

Субъективное суждение.

Это приложение я тоже анализировал и оно не без проблем. Например, принцип отображения информации поезда не самый очевидный - время слева, внутри блока симметричная композиция но информация по логике расположения разная (номер поезда слева а справа время прибытия) и это странно.

Оно простое и в этом главное преимущество.

Ответить
Развернуть ветку
3 комментария
Марьяна Дверская

Отличная работа, Дмитрий. Мне нравится даже больше официальной прилы. Ну и вообще проблема же не в дриббл-дизайне как таковом...

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

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

Ответить
Развернуть ветку
Александр К

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

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

На этапе прототипа мне нужен был фидбек от коллег ,и чтобы было полное представление я сделал интерактив в Фигме. В Фигме сидят все и там же я получил комментарии. Возможно в Марвеле можно комментировать (не пробовал), но не факт что все ее юзают.

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

По поводу создания векторной графики все субъективно. Я знаю что Фигма сделает базовую графику, знаю что Скетч сделает больше базы и уверен что Люстра сделает вообще любую графику. В ней и работаю. Дело привычки

Ответить
Развернуть ветку
Илитный Иксперт

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

Ответить
Развернуть ветку
Максим Мостовой

Уже третий радизайн РЖД в этом году - вы там все с тендера идете?

Ответить
Развернуть ветку
Дмитрий Разломов

Как то предлагали работу в конторе которые главный портал для РЖД делают. После общения выяснилось что они после релиза записывают его на CD!!! диск и передают лично в руки заказчику в лице РЖД. После этого желание работать отпало, и я понял почему при покупке билетов через их сайт я матерюсь раз 5. Про карту лояльности я вообще молчу, UI сделан так что бы никто и никогда её не зарегистрировал и не получил бонусы.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Bagrat Bagdasarov

и что в итоге? отправили им? или делали чисто для себя?

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

Отправили. Их устраивает существующее приложение

Ответить
Развернуть ветку
Alex Ronin

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

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

Их в концепте нет. Пришлось опустить самые очевидные экраны.

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

Ответить
Развернуть ветку
1 комментарий
Voin Mraka

кстати новый сайт ржд таки синхронизировали со старой базой данных, щас зашел и смог залогиниться и посмотреть старые заказы. а месяц назад не работало.
ну и вообще (с осторожностью) признаю, что сайт радует глаз.
https://ticket.rzd.ru/en#/

Ответить
Развернуть ветку
Дмитрий Мущинский

Хороший подход и очень неплохой дизайн, но простите меня за задротство: контурная иконка Ленинградского вокзала как-то подозрительно похожа на Казанский вокзал, а между тем Ленинградский и Московский - здания близнецы. Может тут как-то по-другому обыграть?

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

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

Ответить
Развернуть ветку
Andrey Vasilev

У Busfor прям зеркальное отображение официальной ржд приложеньки. Кто у кого стянул?

Ответить
Развернуть ветку
Анатолий Б.

3 дня в Москве это пытка. Нужен другой кейс.

Ответить
Развернуть ветку
Палец Дзюбы

Проделана огромная работа, но результат ничем не лучше предыдущего.

Ответить
Развернуть ветку
Макс Пирогов

Плохо. Много работы проделано, но столько же много важных моментов упущено. Лучше проработать 2/3 Самых Важных кейса со всеми нюансами и на основании этого сделать Look and Feel концепт. Тогда, можно будет оценить на сколько круто сделано. Сейчас, кажется, что если в этот концепт добавить функционала из жизни — то всё сломается. Например, в жизни фильтр ну никак не будет тэгами)) Как выбрать тэгами время с 21 до 12 ночи в пятницу?

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

В прототип есть пример экрана с выбором фильтров (выбор времени там есть). И он реализован не тегами. Собственно фильтры в виде тегов отображаются после применения фильтра.

Ответить
Развернуть ветку
1 комментарий
Dima Mistu

Отлично выступил с этим проектом в субботу, было интересно послушать про него после того, как прочитал здесь!

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

Спасибо! рад что понравилось =)

Ответить
Развернуть ветку
Степан Краснов

Хороший крепкий кейс!

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

спасибо)

Ответить
Развернуть ветку
Константин Вознесенский

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

отказ от «dribbble-дизайна» 🤦🏻‍♂️

Ответить
Развернуть ветку
52 комментария
Раскрывать всегда