Концепт редизайна сайта РЖД: сделать удобно, когда продаёшь услуги по запутанным правилам

Компания Ratio сделала прототип воображаемого сайта РЖД. Нас никто не просил, дизайнер Катя Шведюк вызвалась сама.

Давайте честно: настоящий rzd.ru нам не нравится, потому что он запутанный. Купить билеты сложно. Ещё сложнее заказать дополнительные услуги, когда нужно перевезти собаку, шкаф или автомобиль (да, так можно).

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

Четыре причины, почему сайт неудобный

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

Вспомните своё первое столкновение с rzd.ru, наверняка разобраться было трудно. Мы выделили четыре причины этого.


  1. Сайт не заботится о постоянных клиентах. Паспортные данные не сохраняются, каждый раз приходится вбивать заново.
  2. Запутанный выбор поездов, вагонов и мест. Много информации, но выбрать быстрее она не помогает.
  3. Сайт плохо рассказывает о дополнительных услугах. Их никогда не найдёшь, если не знаешь, где искать. Компания упускает выгоду: пассажирам не приходит в голову, что поездом можно перевезти автомобиль или крупную бытовую технику.
  4. Нет мобильной версии. Есть приложение, но вряд ли кто-то держит его в смартфоне, если билет нужен раз в полгода.

На rzd.ru много справочной информации. Обидно, что её нет рядом, когда она нужна.

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

Делаем лучше: форма поиска с тремя полями

Форма поиска в разделе «Пассажирам» перегружена. Нелогичное разделение по вкладкам, много опций, раскиданных по экрану — как будто в кабину настоящего электропоезда попал.

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

На главной странице другая крайность. Форма поиска маленькая и теряется на фоне баннеров и рекламных объявлений. Мы убрали всё лишнее: на первом экране осталась простая форма с тремя полями.

Главная страница rzd.ru
Главная страница прототипа

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

Делаем лучше: информация на главной странице

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

С особым удовольствием мы убрали огромное меню слева.

Информация на главной странице rzd.ru
Информация на главной странице прототипа

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

Делаем лучше: выбор поезда и вагона

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

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

Карточки поездов на rzd.ru
Карточки поездов в прототипе
Карточка вагона на rzd.ru
Карточка вагона в прототипе

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

Заказ билетов организован по логике интернет-магазина, справа корзина и общий счёт.

Пользователя сопровождают поп-ап подсказки. Больше не придётся искать ответы в FAQ — информация появляется, когда нужна.

Делаем лучше: мобильная версия

Чтобы заказывать билеты было удобно на любом устройстве, мы сделали мобильную версию сайта.

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

В трудных местах мы всё же оставили подсказки, но они короткие — и помогают, а не запутывают.

Делаем лучше: личный кабинет

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

Ссылки на прототипы

Мы расставили всё по своим местам, чтобы билеты оформлялись на раз-два. Кажется, у нас получилось — но судить вам.

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

0
95 комментариев
Написать комментарий...
Sergey Yevseev

Увидел на скриншотах нового дизайна обычный интерфейс tutu.ru - не понял, что же вы нового нарисовали. Но все равно красиво.

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

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

Ответить
Развернуть ветку
Dima Baychapanov

А у вас в прототипах можно купить два нижних места в одном купе одновременно?)

Ответить
Развернуть ветку
Ratio
Автор

С точки зрения дизайна проблем с этим нет)

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

Ответить
Развернуть ветку
Mark Rapida Gromov

оно на ржд через задницу сделано ведь? в приложении диапазон приходится выбирать, и потом явно указывать, что нужны нижние

Ответить
Развернуть ветку
5 комментариев
Михаил Стерлин

Это вроде как не по правилам РЖД, так что если только читами.

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

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

Ответить
Развернуть ветку
Mark Rapida Gromov

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

Ответить
Развернуть ветку
Mark Rapida Gromov

в приложении осталась фича, но цена не всегда появляется

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

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

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

Как там, у вас в будущем, понимают что в тексте ссылка а что нет?

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

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

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

Ничего себе, вы из будущего. Пока мы в 21 веке, вы уже в 2019 веке. Там поезда вообще ещё есть?

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

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

Ответить
Развернуть ветку
Ratio
Автор

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

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

Ответить
Развернуть ветку
Михаил Занкович

проблема группировки мест по купе в вагоне стала хуже.

не зная, как идет нумерация - сложно понять какие места в одном купе: 3-6 или?

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

Ответить
Развернуть ветку
Сергей Низовцев

На фото АСУ "Экспресс-3", которая отвечает за все бронирования пассажирских поездов в СНГ. Согласно публичной информации, с 2005 работает на AlphaServer 1200 c процессором 533 Mhz, 4GB RAM и 63 GB диска.

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

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

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

Когда что-то нормально без глюков работает, его лучше не трогать, а менять систему целиком уже когда нагрузки не тянет. А у меня ни разу не было глюков на сайте РЖД

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

А в аэропорту CDG внутренняя система управления полетами не менялась с 80х и выглядит примерно как мс-дос. И работает. Что ж с того?

Ответить
Развернуть ветку
Андрей Тишкин

"Паспортные данные не сохраняются"
Вот тут сложно сказать, минус ли это, или наоборот плюс, а то как выложат потом в энтих самых интернетах базу пассажиров...
Номер документа запоминает браузер, фамилию-имя тоже, остаётся отчество, пол, дата рождения. Для редких поездок ничуть не критично, а для частых может как раз и должно использоваться мобильное приложение? С локальным хранением данных.

Ответить
Развернуть ветку
Ratio
Автор

Сохранять или не сохранять — на усмотрение пользователя. Но сам я порадуюсь, если такая возможность появится)

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

У всех, кому нужно, наши с вами паспортные данные уже есть, к сожалению. Поэтому сохранить данные пассажира чтобы в 1 клик покупать следующие билеты, это прекрасно.

Ответить
Развернуть ветку
Виталий

база по купленным билетам и совершенным поездкам полюбому есть и хранится.

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

Как будто они их не хранят;)

Ответить
Развернуть ветку
Андрей Тишкин

"Двигайте в стороны, чтобы увидеть весь вагон"
Хм. Может лучше на смартфоне развернуть схему вагона на 90 градусов для портретной ориентации устройства?
Или это слишком смелое предложение. Как по мне, воспринималось бы нормально, если экран не мизерный.

Ответить
Развернуть ветку
Екатерина Шведюк

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

Ответить
Развернуть ветку
Ratio
Автор

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

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

Из РЖД сделали UFS? Молодцы!

Ответить
Развернуть ветку
Слава Богомолов

Войти или Зарегистрироваться можно заменить на Авторизацию. Регистрацию добавить внутрь авторизации

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

"Авторизация" - технический термин. Такого не должно быть в интерфейсе пользователя.

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

Отчасти соглашусь, но старшему поколению будет понятнее такое разделение.

Ответить
Развернуть ветку
Mark Rapida Gromov

за «авторизацию» обычно расстреливают

Ответить
Развернуть ветку
Vladimir Kliuiko

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

Ответить
Развернуть ветку
Ratio
Автор
Ответить
Развернуть ветку
Mark Rapida Gromov

Вот такая смена стиля при наведении — не очень хорошая практика :(

Ответить
Развернуть ветку
Dmitry Galkin

Это конечно все здорово,но!
Как уже было сказано выше, это только упрощает покупку билетов. Казалось бы, основная задача сайта, но остальные страницы сделаны будто для кучности. Такого рода сайты, это огромное количество тестов, аналитики и т.д
Дизайн зайдёт простым обывателям.
7/10
Нияего особенного

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

Даже страшно себе представить, что такое редизайн сайта в таком "монстре" как ржд))) тем кто после этого остается в живых дают Владимира всех степеней и пожизненную пенсию от президента России:))))

Ответить
Развернуть ветку
Mark Rapida Gromov

пожизненное питание и кров...

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

У них за последние несколько лет в покупки билетов было уже 3 редизайна....

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

Предположим, я иностранец который хочет купить билет у ржд из Москвы к Казань. Переходя на англ версию сайта - окно выбора дат поездки пропадает. Ну ок, буду вручную переводить рус версию в гугле. Но если попробовать печатать название города НЕ кириллицей, например Mos.... чтобы выбрать Moscow или Москва, сайт не предложит выпадающий список. Значит, если у меня нет установленного русского языка, то и билет я не куплю....

Ответить
Развернуть ветку
Андрей Мединцов

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

Ответить
Развернуть ветку
Рома Алёхин

Так и появляются супер кейсы для РЖД и ГАЗПРОМ

Ответить
Развернуть ветку
Боря Бро

Как сделать «супер кейс» из посредственности? Правильно - нарегать левых аккаунтов ради единственного комментария, что это супер кейс!👌🏻

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

Хорошо, но немного поздно( Уже несколько месяцев обновлённый сайт РЖД доступен в бете на ticket.rzd.ru. Очевидно, скоро выкатят.

Ответить
Развернуть ветку
Ratio
Автор

Ничего, может теперь быстрее выкатят)

Ответить
Развернуть ветку
Voin Mraka

логин не работает или в новый сайт заново регаться надо?

Ответить
Развернуть ветку
2 комментария
Sasha Belichenko

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

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

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

В дизайне, адаптированном "под смартфоны" почти везде так.

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

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

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

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

Ответить
Развернуть ветку
Nikolay Lebedev

что не сделай, все лучше будет, чем сейчас

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

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

Ответить
Развернуть ветку
Альбина Никитченко

Очень похоже на туту)

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

У вас скриншоты старой версии - они (РЖД) уже обновились.
И новый дизайн как раз и ориентирован больше на мобильные устройства.
И он очень похож на то, что вы нарисовали.

У меня правда претензии к функциональности - например пересадки предлагает только при отсутствии прямых поездов. Но например я могу не хотеть билет на СВ и согласиться на пересадку.
Плюс этот вариант может быть удобный по времени. (например СПБ Нижний Сапсан+Ласточка , если хочешь приехать днем)

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

Кстати, по сравнению с авиабилетами правила имхо совсем не запутанны

Ответить
Развернуть ветку
Alexey Bulgakov

Картинка норм, интерфейс не рабочий. Где классы обслуживания?

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

Вы придумали новые стили, зато UX не перетрясли, оставили кучу лишнего, не внесли нужного. А красные подчеркивания выглядят как ошибки после проверки орфографии. )

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

Вы сделали то, что уже давно сделал OneTwoTrip ;)

Ответить
Развернуть ветку
Ruslan Volynkin

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

Ответить
Развернуть ветку
Наблюдающий За-Наблюдателями

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

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