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

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

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

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

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

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

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

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

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