Сайт по поиску и продаже билетов на автобус

Мы — Hands App, студия веб- и мобильной разработки. Одна из наших недавних работ — сайт рязанского автовокзала, задача, в которой нам удалось применить несколько интересных инструментов проектирования и разработки.

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

Сам автовокзал при этом не является перевозчиком, он лишь управляет потоками и должен делать это наилучшим образом. Однако до конца 2019 года у автовокзала был вот такой сайт — не слишком привлекательный, не оптимизированный для мобильных браузеров (хотя аудитория на 70% пользовалась именно ими) и требующий от пользователей слишком много действий даже для простых операций.

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

Целевая аудитория

Проектирование мы начали с традиционного исследования ЦА. Изначально мы считали, что билеты на автобус через интернет покупают более молодые пользователи.

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

CJM

Следующим пунктом в нашем проектировании была разработка Customer Journey Map. Мы попытались понять, как в отсутствии полноценного сайта потенциальные «пользователи» автовокзала покупают билеты на автобусы.

Нашими референсами стали не только сайты других центров продажи билетов, но и другие туристические сервисы, в первую очередь Busfor — крупнейший в мире сервис продажи билетов на автобусы, который работает и в России, «общие» продавцы билетов, вроде Aviasales или Tutu.ru.

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

Проектирование сайта

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

В нашем случае (по результатам составления Customer Journey Map) для MVP мы предусмотрели одну ключевую концепцию — ее суть заключалась в том, что максимальное количество пользователей должно увидеть необходимую информацию о рейсах на первой же странице, а следующим действием должна стать покупка билета.

Мы изучили карту переходов по текущему сайту и собрали статистику о самых часто запрашиваемых рейсах. Например, 85% пользователей автовокзала в Рязани ожидаемо запрашивала билеты на рейс Рязань — Москва. Для них мы отобразили на первой странице ближайшие рейсы по направлению Рязань — Москва и тем самым убрали сразу как минимум 4 действия по управлению фильтрами.

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

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

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

Технологии

В качестве бэкенда использовали NodeJS, нашу стандартную технологию бэкенд-разработки, а в качестве фронтенда — Vue.js.

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

Рынок таких решений огромен, выбрать одно подходящее (или несколько) — непростая задача. Мы рассматривали несколько вариантов. С учетом специфики задач и подходов к разработке оптимальным для нас решением стал фреймворк Vue.js. Он был выбран по следующим причинам:

  • Низкий порог вхождения, что позволяет делегировать больше задач разработчикам разного уровня.
  • Естественная работа с разметкой и стилями, что позволяет не только использовать привычные подходы и инструменты для верстки макетов, но и облегчает перенос старого кода на новый фреймворк.
  • Универсальность. Vue.js может использоваться для проектов любой сложности (от простейших до крупных), также поддерживает разные подходы к реализации сайтов: традиционные или SPA (Single Page Application, одностраничные).
  • Легковесность. Для реализации минимальной функциональности с помощью Vue.js требуется подключение всего одного небольшого скрипта.
  • Масштабируемость. Для Vue.js существует множество расширений, готовых плагинов, компонентов, дополнений, в том числе официальных. Также фреймворк легко взаимодействует с другими сторонними библиотеками.
  • Быстродействие. Множество тестов сравнения Vue.js с другими популярными фреймворками показывает, что по скорости выполнения и эффективности Vue.js не уступает, а в некоторых моментах превосходит аналоги.

Это не все преимущества Vue.js, но выделили наиболее важные для нашего подхода к процессам и проектам.

На создание первой версии сайта наша студия потратила 50 рабочих дней. Новый сайт был готов в конце года, но запущен (по очевидным причинам) в работу в начале января.

Итого

Спустя неделю после релиза мы получили увеличение конверсии в покупку билетов до 30% и собрали фидбэк для следующих итераций, ведь MVP становится успешным продуктом только тогда, когда он развивается в соответствии с пожеланиями пользователей и анализом метрик.

В планах:

  • Сделать сохранение пассажиров. Как показывает статистика, более 50% пассажиров покупают билеты на автобус более 1 раза, поэтому, чтобы не вводить все данные по пассажиру, планируется реализовать функциональность сохранения пассажиров.
  • Добавление функциональности выбора места в автобусе. Теперь можно будет сидеть у окошка.
  • Визуализация автобуса, который будет на рейсе. Для того чтобы каждый пассажир знал, на каком автобусе он поедет.
  • Возможность покупки билета через Apple Pay. Не нужно вводить данные по карте, что дополнительно упрощает процесс покупки билета.
  • Возможность возврата билета онлайн. Если изменились планы, можно будет легко вернуть свои деньги.

В путь

Даже казалось бы такое «простое» дело, как сайт автовокзала, может дать вам пищу для размышлений и еще раз обкатать ваш конвейер разработки.

0
19 комментариев
Написать комментарий...
Yuri Istomin

"Ни одного рейса не найдено". Это я вечером смотрел)))
Если нет рейсов на сегодня, принято предлагать ближайшие. Зачем мне сайт, который ничего не продает?

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

Сходите пешком до вокзала, если удобней. Москва не сразу строилась. А автовокзалы это, что то удивительно отсталое пока.

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

Зашел, посмотрел. Обычное купи-гуся-продай-гуся.

Где пожрать? Где посрать? Где отдохнуть?

"Мы этого делать не стали, так как это все отвлекало бы пользователей от главное цели — покупки билета."

Пользователю автовокзала нужно где-то пожрать. Где-то посрать. Где-то отдохнуть.

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

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

Для Российских вокзалов, скорее покинуть их, главная задача после поездки)
А для регионального вокзала, кейс очень неплох!

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

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

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

Сразу видно дизайнеры на diribble и behance вдохновлялись.

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

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

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

Дизайн элементов, очень похоже на большинство макетов с dribble и behance

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

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

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

Дизайнеры при знакомстве обнюхивают портфолио друг друга.

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

Хотел сказать что дизайнеры особо не парились над созданием

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

Немного косяки присутствуют.

Не совсем понятно почему из Рязани в Москву можно уехать а обратно нет?))

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

Дело чисто в бизнесовой логике, увы обратно нельзя пока.(
По косякам, правим) Спасибо)

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

Тема автобусных перевозок мало пока проработана в сервисной поддержке. Если интересно, могу предложить совместную проработку
 - единый билет от двери до двери, т.к. часто до и от междугороднего аатобуса добираемся на такси или маршрутке ( есть наработки по своему сервису вызова такси и интеграции с чужими апи такси );
 - бронирования мест в автобусе ( есть свой сервис бронирования с выбором мест посадки );
 - пользовательское приложение показывающее движение автобусов ( готовое, свежее и открытое ПО на флаттере с успешными внедрениями );
 - темы возврата билета;
 - темы маршрута по требованию ( набралось нужное количество ) поездка совершается, не набралось, не гоняем порожняк

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

А номер дома и этаж?

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

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

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

А чем вы лучше тех, кто купил бумажный билет?

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

Да, раньше на Рязанском автовокзале так и было, более того за распечатку брали деньги))
Теперь можно просто показать билет с мобильного устройства или бесплатно распечатать в кассе.

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

насколько слышал - с "показать с мобильного" могут возникнуть вопросы у контроллера, и вокзал советует их таки распечатывать на кассе.

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

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

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