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

Мы — 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. Не нужно вводить данные по карте, что дополнительно упрощает процесс покупки билета.
  • Возможность возврата билета онлайн. Если изменились планы, можно будет легко вернуть свои деньги.

В путь

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

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

Написать
{ "author_name": "Виталий Лялин", "author_type": "self", "tags": [], "comments": 19, "likes": 8, "favorites": 25, "is_advertisement": false, "subsite_label": "design", "id": 107457, "is_wide": true, "is_ugc": true, "date": "Mon, 17 Feb 2020 18:26:35 +0300", "is_special": false }
0
19 комментариев
Популярные
По порядку
Написать комментарий...
3

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

Ответить
–2

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

Ответить
1

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

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

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
1

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

Ответить
0

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

Ответить
–1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

Прямой эфир