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

С идеей создания такого продукта к нам пришла компания 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-элементов интерфейса и несколько стилей иконок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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