Как мы сделали приложение для партнёрской платформы, с которым любой может зарабатывать на туризме. Кейс Travelpayouts

Хотели бы вы иметь готовое приложение, которое можно адаптировать под свой бренд за пару кликов? Мы его уже сделали!

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

Так появилось приложение White Label App — шаблон нативного приложения для поиска и бронирования авиабилетов и отелей по всему миру с обширными возможностями конфигурации. Он исполнен в двух вариантах: основной — White Label App — приложение с готовыми функциональными модулями, и White Label SDK — набор готовых экранов, которые можно встроить в собственное приложение. Любой из форматов можно кастомизировать под разные стилистики брендов. А ещё это решение будет гораздо дешевле и быстрее разработки собственного приложения для тревел-бизнеса.  

Подробнее про форматы:

  • White Label App — шаблон приложения для iOS и Android с готовым интерфейсом. Для его выпуска партнёру не нужно будет привлекать разработчиков, так как он сможет собрать приложение по инструкции. Этот вариант позволяет в очень короткий срок выпустить собственное приложение, но партнёр будет ограничен функциональностью готового решения. 

  • White Label SDK — отдельно взятые модули, которые партнер может перенести в собственное приложение. В этом случае партнёр может подключить в него готовые модули для поиска билетов и отелей, и при этом не ограничен в дальнейшем развитии приложения.

С чем обратился заказчик

Платформа Travelpayouts помогает партнёрам монетизировать свои тревел-проекты с помощью партнёрских инструментов от 100+ тревел-брендов. Таким образом, участники программы могут зарабатывать на своих сайтах, мобильных приложениях и страницах в соцсетях. С 2011 года компания привлекла более 400 тысяч пользователей  и выплатила более 3-х миллиардов рублей вознаграждения.

Одним из таких инструментов Travelpayouts является приложение White Label App — шаблон для создания собственного мобильного продукта с функциями поиска, покупки авиабилетов и бронирования отелей.

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

Задача от Travelpayouts состояла в том, чтобы разработать приложение с гибким и простым конфигуратором, т.е. с широкими возможностями кастомизации под любой бренд, но чтобы для его настройки не требовалось знаний в разработке. Проще говоря, его должен суметь собрать любой человек по подробной инструкции. Дополнительно требовалось предусмотреть возможность встраивать в существующие приложения партнёра отдельные модули поиска авиабилетов или отелей через White Label SDK. 

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

Алёна Сорокина, аналитик CleverPumpkin

Начали с подготовки технического задания и изучения особенностей приложения

На этом моменте начинается этап проектирования, в котором нужно было предусмотреть:  

  • новое приложение-шаблон;

  • конфигуратор для простой и гибкой настройки стилистики приложения;

  • функции поиска авиабилетов и бронирования отелей с удобной фильтрацией;

  • возможность использования отдельных функций через SDK. 

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

Для такого большого проекта мы решили остановиться на формате нативного приложения, то есть писали каждую из его версий отдельно для Android и iOS. Мы выбрали именно такой тип приложения потому, что он имеет бóльшую жизнеспособность в долгосрочной перспективе, выше производительность и обеспечивает лучший пользовательский опыт. Кроме того, в нативных приложениях быстрее, стабильнее и надёжнее работают разные типы конфигурации, передача кода и сборка приложений на стороне заказчика, а также формат RTL (написание справа-налево). UI в приложений White Label  соответствует гайдлайнам от Google и Apple, что помогает пользователю лучше взаимодействовать с приложением за счёт более привычного и удобного интерфейса.

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

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

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

Проанализировали и описали каждый сетевой запрос

Этап создания технического задания и в целом проектной документации стал одним из самых сложных и объёмных во всем цикле проекта. И вот почему. 

В приложении есть функции для заказа авиабилетов и для бронирования отелей. Они разные по своей специфике, соответственно, и API для них разные.  

Вместе с командой заказчика мы написали масштабную документацию к API обеих функций практически с нуля. Плотно общались с командой Travelpayouts и «на ходу» описывали некоторые способы взаимодействия между приложением и серверами с базами данных. Приходилось импровизировать — иногда сами придумывали и проектировали запросы пользователей. Также мы полностью воссоздали и описали всю бизнес-логику продукта. 

41 страница технического задания и еще 120 страниц документации одного только API — таким был результат этапа проектирования.

Как мы создавали дизайн интерфейса, подходящий любому тревел-приложению

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

Чтобы партнёрам Travelpayouts было удобнее адаптировать приложение под себя, мы заложили в него три основных стиля UI-элементов интерфейса и несколько стилей иконок.

Стили интерфейсов White Label App

Стили интерфейсов White Label App

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

Как происходит подбор цветов интерфейса на базе основного в приложении White Label App

Как происходит подбор цветов интерфейса на базе основного в приложении White Label App

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

Разные стили иконок для разных стилей интерфейса приложения

Разные стили иконок для разных стилей интерфейса приложения

Мы также предусмотрели локализацию интерфейса под формат RTL для жителей стран Ближнего Востока, где пишут и читают справа налево — поэтому тексты, инпуты, сервисные подсказки, слайдеры, иконки, имеющие направление движения, адаптированы под этот формат.

Различие интерфейсов для стран с направлением письма слева направо и справа налево

Различие интерфейсов для стран с направлением письма слева направо и справа налево

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

Как проектировали конфигуратор, который одновременно делает нативные приложения под iOS и Android 

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

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

Такой подход сильно сокращает время на адаптацию приложений под разные платформы, экономит ресурсы компаний-партнёров, а также при публикации их в магазин приложений позволяет охватить аудиторию потенциальных пользователей с обеих платформ. То есть, когда партнёр вносит изменения в один документ, то настройки изменятся и на Android, и на iOS.

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

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

Что получилось в результате

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

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

Пример партнерского приложения на основе White Label SDK

Пример партнерского приложения на основе White Label SDK

Приложения White Label включают:  

  • Шаблонный проект с интерфейсом основных экранов, функциями и фильтрами для поиска и покупки авиабилетов и бронирования отелей.

  • Встроенный конфигуратор с большим спектром возможностей адаптации дизайна.

  • Библиотеку SDK c аналогичными модулями, что у приложения. Любую из функций партнёр может отдельно добавить в своё приложение, настроить стилистику. По итогу в его приложении появляются новые функции и ещё один способ монетизации.

  • Пошаговый план-инструкцию о том, как собрать и кастомизировать приложение без знаний в разработке и опубликовать его в Google Play или App Store.

Как создать своё приложение на основе White Label App

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

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

Для просмотра тарифов и получения инструкции по настройке приложения нужно оставить заявку на сайте программы. 

© Habrahabr.ru