Сайт по поиску и продаже билетов на автобус
Мы — 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. Не нужно вводить данные по карте, что дополнительно упрощает процесс покупки билета.
- Возможность возврата билета онлайн. Если изменились планы, можно будет легко вернуть свои деньги.
В путь
Даже казалось бы такое «простое» дело, как сайт автовокзала, может дать вам пищу для размышлений и еще раз обкатать ваш конвейер разработки.
"Ни одного рейса не найдено". Это я вечером смотрел)))
Если нет рейсов на сегодня, принято предлагать ближайшие. Зачем мне сайт, который ничего не продает?
Сходите пешком до вокзала, если удобней. Москва не сразу строилась. А автовокзалы это, что то удивительно отсталое пока.
Зашел, посмотрел. Обычное купи-гуся-продай-гуся.
Где пожрать? Где посрать? Где отдохнуть?
"Мы этого делать не стали, так как это все отвлекало бы пользователей от главное цели — покупки билета."
Пользователю автовокзала нужно где-то пожрать. Где-то посрать. Где-то отдохнуть.
Ну это я так, повторяюсь. Чтобы до ваших мозгов дошло, что пользователю автовокзала - главное не сдриснуть побыстрее с гадюшника. Ему какой-никакой комфорт нужен.
Для Российских вокзалов, скорее покинуть их, главная задача после поездки)
А для регионального вокзала, кейс очень неплох!
Сразу видно дизайнеры на diribble и behance вдохновлялись.
Просто узнать, для себя. Что именно натолкнуло вас на такую мысль?
Не знаю ни одного более менее профи дизайнера, у которого нет акк на этих порталах, поэтому не понятно что хотели этим сказать. По мне дизайн чистый и понятный. Есть конечно над чем работать, но тут надо ещё учитывать бюджет и тз клиента