Ночной режим и сравнение цен во вкладках — что умеет сайт Aviasales

Рассказ о неочевидных функциях сайта и истории их создания.

Ночной режим

Изменение цветовой темы со светлой на тёмную.

Эту функцию мы придумали на внутреннем хакатоне. Мы выяснили, что в зависимости от времени года от 20% до 53% запросов приходится на тёмное время суток. Значит, можно сделать процесс поиска билетов более комфортным для пользователей.

Технически для решения задачи можно было собирать отдельные файлы стилей для светлой и тёмной темы. Так, например, делает Twitter. Это экономит несколько килобайт (в сложных случаях — десятков килобайт) размера файла, но такой подход плохо масштабируется и не очень удобен в разработке. Поэтому мы поменяли все хардкодные значения цветов, шрифтов и всего того, что может поменяться в ночной теме, на CSS-переменные. Благо, их поддерживают почти все браузеры.

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

Конечно, нам захотелось, чтобы ночная тема умела включаться-выключаться автоматически в зависимости от наличия на улице солнца. Положиться на одно только локальное время нельзя — вечереет в разных широтах в разное время. Но, получив примерные координаты пользователя по IP, можно сделать запрос в специальный сервис, который вернёт фазу суток для заданных координат-времени.

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

Артём Варт, фронтенд-разработчик Aviasales

Бронирование билета без перехода на сайт авиакомпании

Облегченная версия страницы с самыми нужными кнопками.

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

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

Тестируя самую первую версию мы поняли, что, помимо интерфейсных задач, нам нужно решить проблему доверия пользователя — подготовить его к тому, что оформлять билет он будет не на привычном аэрофлотовском сайте, а прямо на Aviasales. В России пользователи раньше не сталкивались с таким решением и не знают, что такое assisted booking и как он работает.

Всё просто — мы передаём указанные пользователем данные «Аэрофлоту» и уже на стороне авиакомпании происходит оплата и оформляется билет. То есть с точки зрения безопасности и надёжности нет разницы, бронируете вы на Aviasales или на сайте «Аэрофлота».

Чтобы донести это до пользователей, мы разместили краткую информацию о работе быстрых бронирований на окнах ожидания, сняли видео-инструкцию и продвигали её через маркетинговые каналы. Параллельно шла работа над интерфейсом: появилось больше брендинга «Аэрофлота», форма стала двухстраничной — шаг оплаты уехал на отдельную страницу. Появился сайдбар с информацией о пассажирах и рейсе, пользователи получили возможность сохранять данные пассажиров и быстро подставлять их в форму при последующих бронированиях. Добавили выбор тарифов и класса.

В результате, конверсия на нашей странице была выше, чем на сайте авиакомпании, а на мобильных устройствах — превзошла в разы.

Иван Барышев, продакт-менеджер Aviasales

Фильтрация билетов с понравившимся сегментом

Смотреть билеты только с удобным вариантом пересадки.

Сервис появился как решение наших собственных проблем. Бывает так, что рейс «туда» подходит идеально, а обратно попадаются долгие стыковки, неудобное время вылета и вообще не то. Особенно часто подобная ситуация встречается на рейсах в Латинскую Америку.

Мы реализовали классический кейс в стиле «путешественники для путешественников» — первыми заметили неудобство и решили его с помощью фильтра сегментов.

Иван Барышев

, продакт-менеджер Aviasales

Сравнение цен на разные перелеты

Разница цен на перелёты считается на отдельных вкладках Aviasales автоматически.

Мы заметили, что пользователи открывают несколько вкладок, чтобы сравнить стоимость билетов. Это, конечно, не самый частый в мире кейс, но «боль» очевидна. Нет никакой формулы «если 10% юзеров делают так — пили фичу». Разработчикам было интересно и совсем несложно сделать нотификации во вкладках, которые позволяют найти самый выгодный вариант.

Иван Барышев

, продакт-менеджер Aviasales

Сравните стоимости билетов на самолёт и на поезд

Купить билеты на «Сапсан» можно на Aviasales.

Это, скорее, сезонная фишка, которая нужна во время сражения поездов с самолётами за пассажиров. Действительно, иногда бывает дешевле поехать «Сапсаном». Для обработки таких кейсов и появился блок с ж/д билетами.

Все железнодорожные варианты отличаются только временем отправления и иногда ценой, поэтому собраны в одном месте. Такие билеты отображаются во время поиска в одну сторону и только для взрослых пассажиров. Это связано с пользовательскими предпочтениями на маршруте Москва – Санкт-Петербург.

Иван Барышев,

продакт-менеджер Aviasales

У Aviasales есть ещё несколько функций, которые делают заказ билетов удобнее. Можно:

  • Сохранить настройки фильтров для поиска билетов и использовать их в будущем. Например, показывать билеты варианты конкретной авиакомпании в определённый промежуток времени.

  • Узнать стоимость билетов на соседние дни без изменения даты в запросе. Они отображаются в календаре.

  • Авторизоваться через социальные сети в личном кабинете, чтобы получить скидки от партнёров и сэкономить на поездке.
  • Улучшить на сайте класс обслуживания и пересесть в более удобное кресло.

  • Заранее узнать об удобствах на борту и статистике опозданий рейса. Можно посмотреть, есть ли в самолёте розетки или Wi-Fi.

  • Зафиксировать пересадку в определённом аэропорту.
  • Выбрать продолжительность пересадки.

  • Выбрать ближайший прямой перелёт без пересадок.

Расскажите в комментариях, каких функций вам не хватает на Aviasales.

0
60 комментариев
Написать комментарий...
Алексей Благих. Бизнес ТРИЗ

Скорость поиска билетов в 10 раз ниже Google flight, поэтому использую его.

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

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

Ответить
Развернуть ветку
Алексей Благих. Бизнес ТРИЗ

Попросили написать, я написал. Результат для меня как клиента одинаковый, а время тратить на каждое обновление параметров поиска. Ездите на лошадях, не так уж и медленно, зато выбор пород больше. Но вы просто медленнее приедете, но в тоже самое место. Я готов ждать 45 секунд, если реально результат будет выше.

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

Спасибо за фидбек, безусловно, мы всегда стремимся к совершенству =)

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