Дизайн Дмитрий Ковалев
8 876

Концепт редизайна приложения «РЖД Пассажирам» для 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 — анимация.

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Дмитрий Ковалев", "author_type": "self", "tags": [], "comments": 53, "likes": 84, "favorites": 70, "is_advertisement": false, "subsite_label": "design", "id": 65207, "is_wide": true, "is_ugc": true, "date": "Wed, 24 Apr 2019 09:10:45 +0300" }
SMS-чат для клиентов
{ "id": 65207, "author_id": 285794, "diff_limit": 1000, "urls": {"diff":"\/comments\/65207\/get","add":"\/comments\/65207\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/65207"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

53 комментария 53 комм.

Популярные

По порядку

Написать комментарий...
12

А поездом управлять можно?

Ответить
10

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

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

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

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

Ответить
1

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

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

Ответить
1

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

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

Но в любом случае для концепта это не принципиально

Ответить
0

Крутой дизайн! Вы можете помочь улучшить юзабилити до социального проекта?

DonorSearch.org - очень было бы круто.

Ответить
1

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

Ответить
0

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

Ответить
8

Через год чекните изменения в сторах, есть вероятность точечного заимствования.

Ответить
2

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

Плюс этого концепта в простоте и в том что автор мыслит сценариями. А там, судя по всему, мыслят не сценариями, а фичами и попытками в тренды позапрошлогодней давности.

Ответить
0

Насколько я понял — был реальный заказ и автор опубликовал кейс https://www.behance.net/gallery/52398135/RZD-Mobile-App

Возможно после утверждения не было авторского надзора и получилось то что получилось.

Ответить
0

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

Ответить
0

Любые корпораты это головная боль. И старперы РЖД/Аэрофолот и вроде бы диджитальные Альфа/Тинькофф (и проч.). Их нужно уметь готовить, поддержать и через полгода после сдачи уметь получить свою копеечку. Те еще истории, короче.

Ответить
0

Я только за!) Все для людей, пускай заимствуют

Ответить
0

Я такого же мнения был, потом после третьего упертого кейса я посчитал, что мог бы иметь вместо нуля миллиона полтора и стал продавать по-другому =)

Ответить
0

все к этому придем =)

Ответить
1

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

Ответить
2

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

Ответить
0

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

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

Ответить
0

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

Ответить
1

Не устаю повторять. За долго до выпуска "официального" приложения, на андройде было вот это
https://play.google.com/store/apps/details?id=ru.rzd&hl=ru
Которое в миллион раз удобнее чем официальное приложение, в том числе предложенного вами. Это одно из немногих приложений, в котом можно купить билет в экстремальных условиях, настолько там всё удобно.

Ответить
0

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

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

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

Ответить
3

В качестве оправдания скажу что этому дизайну уже около 6и лет.

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

Спасибо за пост - изучу подробно :)

Ответить
1

можете смело брать на вооружение идеи из концепта) буду только рад

Ответить
0

Да, вот нужно простое приложение :)

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Запись на cd - обычное требование заказчиков и не только государственных, а не конторы. Скажите, вот если вы закажете приложение, как бы вы хотели получить исходный код от разработчика?

Ответить
6

На распечатках А4.

Ответить
1

Ну а как нынче хипсторы проекты сдают?)

Ответить
0

Мож под CD имелось ввиду Continuous Deployment?

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

Ответить
1

За 6 лет работы ни один пользователь не попросил добавить выбор времени.

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Еще раз посмотрел и прото и биханс-презентацию: не нашел макет с фильтром. Можно ссылочку, интересно же

Ответить
0

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

Ответить
0

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

Ответить
–1

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

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }