White Label App — шаблон мобильного приложения для туристической сферы

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

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

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

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

Дополнительно требовалось предусмотреть возможность встраивать в существующие приложения партнёра отдельные модули поиска авиабилетов или отелей через White Label SDK.

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

Он исполнен в двух вариантах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                            Три варианта стиля интерфеса White Label App

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

           Как подбирается палитра элементов интерфейса на основе базового цвета

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

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

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

Так что сам конфигуратор стал ещё одним уникальным решением в разработке. 

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

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

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

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

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

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

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

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

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

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