Как улучшали пользовательский опыт покупки билетов на поезд
Продуктовая линейка Едем.рф включает сервисы по перевозке людей, посылок и грузов. Площадка посредничает в поиске попутчиков (карпулинг), грузоперевозчика, аренде авто и трансфере. А еще продает билеты на автобус и поезд
Едем.рф запустили новое направление: продажа билетов на поезд. Этим компания закрывает еще одну потребность пользователя — поездки на дальние маршруты, а не только по межгороду
Едем.рф позиционируется как помощник путешественникам, посредник в междугородних поездках, аренде и трансфере, доставке посылки или груза
МВП разрабатывалось в строгих ограничениях. Решение получилось технически рабочим, но не конвертировало трафик в покупки — пользователи путались, допускали ошибки при выборе и оформлении. Бросали сценарий
Сервис работает на технологиях РЖД и МВП разрабатывался в строгих ограничениях, по гайдам. Это было необходимо для аттестации, несмотря на то что предложенные сценарии запутанные и сложные для понимания, а пользовательские паттерны устарели
За время разработки и аттестации сервиса, дизайн-стандарты сильно апдейтнули — поменялись некоторые паттерны, обновился стиль. Продукт запустился на легаси. Нужно обновлять
Получил вводные от заказчика, изучил проблему, сформулировал цель и миссию проекта и список предстоящих задач
Повысить конверсию в покупку билета и снизить отток пользователей на этапах выбора и оформления. Снизить затраты на поддержку и ошибки пользователей
Сделать интерфейс консистентнее. Сократить затраты на его разработку. Повысить узнаваемость бренда
Улучшить сценарии покупки и возврата билета. Повысить поведенческие и качественные показатели — чтобы пользователь дошел до цели, остался доволен, вернулся и порекомендовал сервис другим
Цель минимум — рост конверсии. Цель максимум — увеличить ретеншн
Потенциальных пользователей. Именно такая аудитория Едем.рф на момент старта проекта
Провести Юикс-экспертизу, исследовать обратную связь, изучить конкурентов. Выявить проблемные места интерфейса
Предложить гипотезы по улучшению. Приоритизировать и взять в работу, с целью повысить конверсию и снизить отток пользователей
Разработать Юай-концепцию: обновить прикладные компоненты и паттерны, сохранить консистентность продукта с экосистемой и узнаваемость бренда
Привести интерфейс к дизайн-стандартам
Провел Юикс-экспертизу, собрал обратную связь, сделал конкурентный анализ. На основе этих данных определил проблемы, с которыми сталкиваются пользователи
Изучил основные сценарии, это покупка билета и покупка билетов в обе стороны. Кроме основных выявил дополнительные:
Покупка билета по специальному тарифу
Выкуп целого купе
Покупка безвозвратного билета
Покупка билета в гендерное купе
и тд, всего 10 штук
В рамках этого проекта занимался только основными сценариями. К дополнительным вернемся позже, они требуют больше исследований
В поддержку пользователи в основном обращаются с двумя проблемами: как им вернуть билет и как исправить в билете ошибки. Исправить их нельзя, значит нужно минимизировать их появление
Также у пользователей возникают проблемы с интерфейсом и они обращаются за помощью. Основная проблема это покупка билета в обе стороны
Верхнеуровневое понимание проблемы есть, пошел смотреть основных и косвенных конкурентов, чтобы понять как эти проблемы решили они и каких еще функций не хватает нашему продукту
Конкурентный анализ также дает понять к каким паттернам привыкли пользователи и какого пользовательского опыта они ожидают от схожего продукта
Проанализировав данные собрал список проблем интерфейса. Вот основные
Изучая флоу, обратную связь и конкурентов мы уже понимали с какими проблемами сталкиваются пользователи. На основе собранной информации сформулировал гипотезы и обрисовал их черновыми макетами
Если отказаться от экрана классов обслуживания, это сократит количество шагов до цели и повысит конверсию
Если классы обслуживания перенести на экран выбора мест и сделать их быстрыми фильтрами, это снизит количество возвратов и сделает интерфейс удобнее, а выбор мест быстрее
Если перенести выбор обратного поезда сразу после выбора поезда туда, то сценарий станет логичнее и снизится отток пользователей
Если добавить прогресс-трекер, это сделает сценарий предсказуемым, контролируемым и менее тревожным, поможет пользователю сориентироваться и с большей вероятностью завершить покупку
Были другие интересные идеи по решению этой проблемы. Например некоторые пользователи, покупающие билет отказывались потому-что им привычнее паттерн как на сайтах покупки авиабилетов, когда сразу видно рейс туда, обратно и итоговую цену. Это позволило бы сократить флоу еще на шаг. Но в процессе бенчмарка нам не удалось найти ни одного похожего решения. Интересно почему, возможно это нельзя реализовать по техническим причинам. Запомнили ее и отложили в бэклог
Если выбор поездов в обе стороны сделать на одном экране, сгруппировать их по стоимости и показать общую сумму, это сократит количество шагов и сделает интерфейс нагляднее и проще
Если обогатить список вагонов данными, сделать миниатюрные схемы с рассадкой и свободными местами, это повысит информативность экрана, поможет пользователю быстрее сориентироваться и сделать выбор
Если переделать карточку вагона, показать схему целиком и дорисовать недостающие, это повысит ее информативность, поможет пользователю быстрее принять решение и уменьшит отток
Если добавить автозаполнение полей, это сократит время на заполнение формы, уменьшит количество ошибок, увеличит процент пользователей завершивших этап и повысит их удовлетворенность от взаимодействия с сервисом
Если хранить данные пассажиров, это повысит скорость заполнения данных при повторной покупке, общую удовлетворенность пользователя и его возвращение
Если в календарь поисковой формы добавить предварительные цены, это повысит информативность, поможет пользователю с выбором, уменьшит количество возвратов к поисковой форме и повысит лояльность пользователей к сервису
Если вместо тупикового экрана «Ничего не найдено» показывать расписание поездов без мест и предлагать пользователю пути решения — выбрать другую дату или подписаться на изменения — уменьшит количество возвратов на предыдущий шаг и отток пользователей
Если в поисковую выдачу добавить миниатюрный календарь с соседними датами, это уменьшит количество возвратов на предыдущий шаг и отток пользователей
Если показывать другие варианты поездки на дату, которую мест на поезд нет, это позволит продвигать другие продукты и не потерять клиента
Если в конце сценария добавить экран с красочным завершением, это усилит положительные впечатления от продукта, побудит вернуться и порекомендовать сервис другим
После изучения гипотез мы приоритизировали их по формуле ценность/сложность. Поделили их на итерации. Часть отправилась в бэклог
Приоритетные гипотезы взяли в работу. Предстояло поправить сам флоу, сократив кол-во шагов и пересмотреть их порядок. Переделать лейаут — сделать шаблоны адаптивными для изменений. Точечно внести изменения на каждый экран — убрать все лишнее и наоборот, добавить недостающую для принятия решения информацию
У компании две библиотеки стандартов. Юай покупки билетов был собран на легаси, но нужен плавный переход на некст, что сократит затраты на поддержку и разработку интерфейса в будущем
Но в рамках этого проекта некст мы решили не делать. Нужно было быстро внести улучшения чтобы не терять клиентов
Над юаем я думал параллельно. На основе новой библиотеки стандартов я разработал концепцию, прикладные решения и паттерны для интерфейса 2.0, с целью повышения удобства и роста поведенческих показателей. Все макеты в кейсе представлены в новой концепции
А еще обновил интерфейсные иконки, сделав их консистентными, сбалансированными по массе и с понятными метаформами
Разработали и поэтапно запустили улучшения в прод. Улучшения внедрялись постепенно, в 2 итерации. В первой переработали лейаут, флоу и обогатили его данными. Во-второй внесли изменения в поиск
Новый лейаут
Чтобы отказаться от неинформативного представления вагонов в формате витрины и показывать схемы целиком без горизонтального скролла, пересмотрел лейаут. Саммари переехало из правой колонки вниз экрана, освободившееся место заняли новый, обогащенный данными список и карточки вагонов
Новый лейаут получился удачным и без проблем применяется на всех экранах сервиса
Схемы
У половины вагонов вовсе не оказалось схем. Выбрать места в таком случае можно только по параметрам. Это не подходит большинству пользователей
Нагуглили исследование по схемам, которое проводили в Туту. Забрали себе лучшие практики. Отрисовали недостающие схемы, всего на проекте их 400 штук!
После веб версии взялся за обновление приложения. Новая мобильная версия флоу покупки билетов спроектирована с учетом обновленной iOS 26 и гайдов HIG
Собрал прототипы, потестили среди сотрудников. В этой итерации решили сэкономить время и ускорить релиз. На следующие запланировали глубокое исследование аудитории и ее взаимодействие с сервисом. Для него подготовил дизайн юзабилити-тестирования
Наблюдаем, собираем фитбэк. Есть множество доп. сценариев которые требуют доработки и возможного дальнейшего развития. Появляются новые гипотезы
Юикс-экспертиза и поиск проблем
Анализ конкурентов
Анализ обратной связи
Низкоуровневое проектирование и гипотезы
Приоритизация гипотез с командой
Высокоуровневое проектирование
Разработка юай-концепции и визуального стиля
Отрисовка интерфейсных иконок
Проектирование прикладных компонентов
Прототипирование в Фигме
Дизайн-ревью
Моя роль
Старший дизайнер (я)
Младшие дизайнеры
Продакт-менеджер
Фронт-энд
Бэк-энд
Команда
Веб
Мобильное приложение
Платформы
