Travelpayouts: как мы помогли перезапустить инструмент для поиска авиабилетов

Что за проект

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

Что такое White Label?

White Label — это технология, которая позволяет встроить готовый сервис (например, поиск авиабилетов) на сайт другой компании, при этом пользователь даже не заметит, что за интерфейсом стоит сторонний продукт.

Пример:

Вы — тревел-блогер, у вас есть сайт о путешествиях. Вы хотите, чтобы читатели могли сразу покупать билеты, но не хотите разрабатывать свою систему бронирования. Тогда вы подключаете White Label от Travelpayouts — вставляете виджет на сайт, настраиваете цвета и шрифты под свой бренд, и все: сервис выглядит как ваш собственный, но работает на технологиях Travelpayouts.

Зачем это нужно:

• Не нужно создавать продукт с нуля;

• Можно начать зарабатывать на продаже билетов или отелей буквально за день;

• Брендинг — полностью ваш: логотип, стили, домен.

Почему решили обновить

Продукту было больше 10 лет. Он давно не обновлялся: дизайн устарел, API — неактуальный, функциональность ограниченная. К тому же клиенты просили больше гибкости, чтобы управлять контентом. Все это подтолкнуло к редизайну и переработке платформы.

Бизнес-гипотеза: если обновить UX и расширить возможности настройки — вырастет конверсия. А значит, и доход клиентов, и доход Travelpayouts, т.к. сервис работает по модели revenue share.

Что такое revenue share?

Revenue share — это модель разделения дохода: вы зарабатываете процент от каждой успешной транзакции, которая проходит через ваш White Label-сервис.

Пример:

Читатель блога нажал на кнопку «Купить билет», ввел данные и оформил покупку. Допустим, билет стоит 10 000 рублей, и комиссия Travelpayouts с продажи составляет 10%. Из этой суммы Travelpayouts отдает вам, как партнеру, например, 5%.

Почему это удобно:

• White Label подключается по подписке, вся разработка и поддержка на стороне  сервиса;

• Не занимаетесь выпуском билетов и технической поддержкой клиентов – покупка авиабилетов совершается на стороне гейта (например, авиакомпании или туристического агентства);

• Чем выше конверсия — тем больше доход у вас и у платформы.

Что сделали мы

Amiga подключилась на этапе разработки. Мы отвечали за весь фронтенд и реализацию ключевых функций:

1. Разработали новый фронтенд виджета на React для размещения на сайтах партнеров: поисковая строка, результаты поиска с карточками билетов.

Настроили изоляцию стилей через Shadow DOM, чтобы виджет стабильно отображался на любых внешних сайтах.

Как это работает?

• Настроили связь с личным кабинетом. Пользователь может зарегистрироваться, создать свой виджет, задать цвет кнопок, шрифты, фоны — и встроить эту настройку на сайт по уникальному коду. А если актуальных цветов недостаточно, клиент может обратиться в Amiga, и специально для него мы разработаем кастомный дизайн виджета.
  
  Важно (и приятно): вся настройка полностью no-code — в личном кабинете можно быстро настроить, как нравится, и в виджете сразу все поменяется, magic!

• Провели интеграцию с системой локализации Crowdin. Виджет поддерживает 61 язык. Переводы подтягиваются автоматически в зависимости от выбранной локации или настроек пользователя. Если нужно ограничить вывод языков в виджете, это можно настроить в ЛК (например язык виджета по умолчанию).

• Возможность разделять блоки поиска и выдачи по разным страницам. Помимо вывода блока цельным виджетом, можно настроить еще двумя способами, где именно на сайте будут располагаться поисковая форма и результаты поиска:
  
  

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

2. На отдельных страницах. Поисковая форма находится на одной странице, а после ввода запроса пользователь перенаправляется на другую страницу, где уже находятся результаты поиска.

Что было сложно

• Локализация. Crowdin оказался негибким. Мы использовали его для перевода интерфейса, но столкнулись с рядом технических трудностей. Crowdin должен автоматически отправлять изменения переводов в Git, но по факту эта автоматизация не работала. При изменении переводов много времени приходилось тратить просто на доставку этих обновлений до Git. Какие-то языковые изменения не хотели прогружаться в код, и приходилось их вручную синхронизировать — это приводило к задержкам и дополнительной нагрузке на команду.
  
  Еще одной сложностью стала адаптация верстки под арабский язык. Чтобы не получилось, как в данетке: в арабском городе установили щит с рекламой прохладительного напитка, разделенный на 3 фото. На первом фото — человек в пустыне, умирающий от жары. На втором — этот же человек пьет напиток. На третьей — счастливо улыбается. Все бы хорошо, но арабы читают справа налево.
  
  Вот и нам для поддержки арабского языка потребовалась дополнительная работа по адаптации верстки. Простое автоматическое переключение направления текста делало виджет некорректным: скругленные углы элементов отображались неправильно, и общий вид портился. Мы переработали стили и структуру виджета, чтобы отображение на арабском языке было корректным, и сохранилась эстетичность интерфейса.

• Shadow DOM. Технология требовала нестандартных решений и ограничивала гибкость интерфейса.

• Синхронизация с API. Старые и новые версии API конфликтовали. Работа шла сразу с несколькими командами клиента: core, маркетинг, разработка — это замедляло процесс.

A/B-тестирование и метрики

В марте 2024 запустили A/B-тест на ограниченную аудиторию, чтобы подтвердить (или опровергнуть) гипотезу о росте конверсии. Сейчас продукт доступен для новых клиентов, в июне–июле планируется перевести и старых пользователей.

По результатам теста будет принято решение о полной миграции.

Важно: в app-версии на новом API уже наблюдается рост конверсии, поэтому ожидается аналогичный эффект и в вебе.

Результат

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

Мы гордимся этим проектом и ждем финальных данных по A/B-тестированию, чтобы подтвердить главный результат — рост конверсии и эффективности продукта.

Период работы: с лета 2023 по настоящее время.