Разработка

Концепт редизайна сайта РЖД

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

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

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

Цель этого прототипа — показать, каким простым может быть сайт, если убрать лишнее и выделить важное.

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

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

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

1. Сайт не заботится о постоянных клиентах. Паспортные данные не сохраняются, каждый раз приходится вбивать заново.

2. Запутанный выбор поездов, вагонов и мест. Много информации, но выбрать быстрее она не помогает.

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

4. Нет мобильной версии. Есть приложение, но вряд ли кто-то держит его в смартфоне, если билет нужен раз в полгода.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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