Ночной режим и сравнение цен во вкладках — что умеет сайт 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 комментариев
Написать комментарий...
Andrey Azarov

Посчитать время захода солнца по координатом это волшебство?

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

Да, это самая настоящая компьютерная магия =)

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

Ничего себе, сам хед оф дизайн снизошел минусануть. Валера, подставить 2 координаты и дату в формулу (которую ты не выводил) это не волшебство, это математика уровня 7 класса. К чему этот пафос, вроде вы решили сложнейшую инженерную задачу?

Ответить
Развернуть ветку
3 комментария
Valera Nazarov
Ответить
Развернуть ветку
Paul Hitchens

https://gyazo.com/a01595352b2b4d7638b696908850e545 - там маленький баг в сафари с выбором дат

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

Спасибо, скоро все поправим )

Ответить
Развернуть ветку
Филипп Концаренко

Кнопку «К сравнению», чтобы можно было добавить интересные рейсы по одному направлению на отдельную страницу и на ней в удобном формате сравнить плюсы и минусы каждого перелета.

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

Уже в процессе ) Функционал «Избранные билеты» появится в одном из следующих апдейтов.

Ответить
Развернуть ветку
3 комментария
Kirill Kuritsyn

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

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

Всегда пожалуйста )

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

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

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

Я ищу на гугле, а покупаю там, где дешевле. В том числе через авиасеилс. Зачем себя ограничивать

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

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

Ответить
Развернуть ветку
2 комментария
НечеловеческаяЛогика

ахахахахаахххахахаахаахаахаххахаха мамкин эксперт.
после того ка кты купишь в этом гугле найденный рауднт трип - тебе медаль дадут.

на самом деле не купишь, потому что они просто показывают совпадения :) ну и кэша у них до ануса :)

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

И как ночная тема повлияла на конверсию?

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

+1 интересно.
АвиаСейлс - вы ее считаете после каждой правки или уже просто делаете правки, потому что решили что это полезно?

Ответить
Развернуть ветку
3 комментария
Mikhail Komlev

Было бы круто, если бы сервис умел находить "ручные" стыковки. Например, нельзя найти и купить единый билет маршрутом Екатеринбург - Пекин - Ванкувер. Но можно отдельно ручками купить билеты Екатеринбург - Пекин и Пекин - Ванкувер, каждый из которых находится в поиске на aviasales.

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

Возможно, но в чем смысл? Ведь все равно придется покупать 2 отдельных билета, раз в сложном поиске их не стыкует ни одно агентство.

Ответить
Развернуть ветку
3 комментария
Александр Павлов

Заметил такую вещь. Если искать на OneTwoTrip - одна цена, а если через Aviasales покупать у OneTwoTrip, то будет дешевле плюс возможность накопить трипкоины (раньше при переходе со сторонних поисковиков на OneTwoTrip, трипкоины не начислялись). Почему бы Авиасейлс не завести свою бонусную программу? Хотя бы при покупке на сайте без перехода? Мелочь, а приятно)

Ответить
Развернуть ветку
Максим Ростокин

Трипкоины - это триппер бонусом к путешествию )

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

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

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

Раньше было приложение, Corner что ли называлось, где выдавался список городов и стран по цене, начиная с самой низкой. Можно было спонтанно куда-нибудь улететь пока дёшево. Потом он продался и закрылся. Больше ничего подобного не встречал, кто-нибудь знает подобный сервис?

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

Если выбрать «Куда угодно» в поле «Куда» на Авиасейлс, то получите примерно такой же список + карту с ценами.

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

Подписка на дешёвые билеты "куда угодно"

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

Есть такая ) Подписаться можно в Боте низких цен в онлайн-мессенджерах или во вкладке "Путешествия" в мобильном приложении.

Ответить
Развернуть ветку
5 комментариев
Ollie Wutash

Иногда рейс Москва - Хабаровск - Владивосток оказывается дешевле, чем Москва - Хабаровск, хотелось бы видеть и такие варианты

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

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

Ответить
Развернуть ветку
Роман Тютюнов

Почему нет выбора периода?

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

Почему нет? Очень даже есть, попробуйте через Календарь https://www.aviasales.ru/calendar

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

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

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

Привет! А есть примеры таких рейсов?

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

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

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

А что у вас за компания? =)

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

Хотелось бы иметь возможность задать такой параметр: если у рейса есть стыковки и, то сегменты менее 3-х часов искать экономом, а те что более 3-х часов бизнесом. Короткие перелеты я готов потерпеть, а вот длинные хочется лететь с комфортом, а сейчас либо все сегменты эконом либо все бизнес, нет поселковых вариантов в которых можно немного сэкономить.

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

Привет! К сожалению, авиакомпании не умеют выписывать одним билетом разные тарифы, поэтому в таком случае придется покупать разные билеты. Однако есть агентства, которые могут так делать, поэтому в данном направлении мы уже думаем, спасибо!

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

Нет хватает пересадок/выбора другого аэропорта по близким аэропортам в разных городах, например, Братислава и Вена. Между ними ехать час, мне все равно, в какой лететь. Отчасти конкретно этот кейс закрывает Победа своим трансфером, но это если из Москвы лететь, а не по Европе.

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

А ещё прям голубая мечта: куда угодно по Европе/Азии/России/и тд в несколько городов.
Например, у меня отпуск 2 недели, за это время я хочу посетить от 2 до 5 городов Европы. Мне примерно все равно куда ехать, и я готова подстроиться под дешевые билеты и часть сегментов вообще закрыть автобусом. Но это, наверное, слишком сложный поиск

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