Как мы сделали приложение для партнёрской платформы, с которым любой может зарабатывать на туризме
- Заказчик
- Travelpayouts — партнёрская платформа для монетизации туристического трафика
- Задача
- Заказчик обратился к нам за реализацией приложения-шаблона, которое партнёры программы могут брать за основу и выпускать собственное приложение самостоятельно.
С идеей создания такого продукта к нам пришла компания Travelpayouts, объединяющая инфлюенсеров и тревел-бренды в сфере туризма. Заказчик обратился к нам за реализацией приложения-шаблона, которое партнёры программы могут брать за основу и выпускать собственное приложение в магазин приложений самостоятельно.
Так появился White Label App — шаблон нативного приложения для поиска и бронирования авиабилетов и отелей по всему миру с обширными возможностями настройки интерфейса. Он исполнен в двух вариантах.
White Label App — готовое приложение-шаблон. Для его выпуска партнёру не нужно будет привлекать разработчиков, так как он сможет собрать приложение по инструкции.
И White Label SDK — набор функций, которые партнёр может перенести в собственное приложение по отдельности. Любой из форматов можно кастомизировать под разные стилистики брендов. А ещё это решение будет гораздо дешевле и быстрее разработки собственного приложения для тревел-бизнеса.
С чем обратился заказчик
С Travelpayouts мы сотрудничаем с 2021 года. За разработкой приложения-шаблона обратились в CleverPumpkin.
Платформа Travelpayouts помогает партнёрам монетизировать свои тревел-проекты с помощью партнёрских инструментов от 100+ тревел-брендов. Таким образом, участники программы могут зарабатывать на своих сайтах, мобильных приложениях и страницах в соцсетях. С 2011 года компания привлекла более 400 тысяч пользователей и выплатила более 3 миллиардов рублей вознаграждения.
Одним из таких инструментов Travelpayouts является приложение White Label App – шаблон для создания собственного мобильного продукта с функциями поиска, покупки авиабилетов и бронирования отелей.
Суть инструмента в том, что партнёр может взять готовый шаблон мобильного приложения, указать своё название, добавить логотип, подобрать стиль и загрузить в стор как собственный продукт.
Наша задача состояла в том, чтобы разработать приложение с гибким и простым конструктором-конфигуратором, т.е. с широкими возможностями кастомизации под любой бренд, но чтобы для его настройки не требовалось знаний в разработке. Проще говоря, его должен суметь собрать любой человек по подробной инструкции. Дополнительно требовалось предусмотреть возможность встраивать в существующие приложения партнёра отдельные модули поиска авиабилетов или отелей через White Label SDK.
Начали с подготовки технического задания и изучения особенностей приложения
На этом моменте начинается этап проектирования, в котором нужно было предусмотреть:
- новое приложение-шаблон;
- конфигуратор для простой и гибкой настройки стилистики приложения;
- функции поиска авиабилетов и бронирования отелей с удобной фильтрацией;
- возможность использования отдельных функций через SDK.
Следовало продумать всё настолько тщательно, чтобы при любых адаптациях и внесённых изменениях приложение или отдельный его модуль выглядел в итоге красиво и гармонично.
Для такого большого проекта мы решили остановиться на формате нативного приложения, то есть писали каждую из его версий отдельно для платформ Android и iOS. Мы выбрали именно такой тип приложения потому, что он имеет бóльшую жизнеспособность в долгосрочной перспективе и обеспечивает лучший пользовательский опыт, а ещё у него выше производительность. Кроме того, в нативных приложениях быстрее, стабильнее и надёжнее работают разные типы конфигурации, передача кода и сборка приложений на стороне заказчика, а также формат RTL (написание справа налево). UI в приложений White Label App соответствует гайдлайнам от Google и Apple, что помогает пользователю лучше взаимодействовать с приложением за счёт более привычного и удобного интерфейса.
Изначально Travelpayouts прислали нам черновик с техническим заданием, в котором указали, какие требуются разделы, добавили скриншоты интересных функций и частично логику, которую хотели бы реализовать. На основе этого документа, собственной практики и предыдущих бесед с заказчиком мы сформировали список основных разделов, подразделов и блоков приложения.
Одновременно с этим дизайнер составил карту экранов, чтобы продемонстрировать структуру приложения, взаимосвязь между экранами и логику перехода между ними.
После согласования ключевых моментов началась подготовка чистового ТЗ на дизайн и разработку. В этом документе мы уже детально прописывали размещение конкретных данных на экранах, логику взаимодействия пользователя с приложением, формат обработки ошибок, предпочтения по дизайну, поддержку языков и локализаций — все необходимые детали для полноценной разработки.
Отдельно прописывали задачи конфигуратора: что конкретно и как может менять партнёр в своём приложении, чтобы полностью адаптировать его под себя.
Проанализировали и описали каждый сетевой запрос
Этап создания технического задания и в целом проектной документации стал одним из самых сложных и объёмных во всем цикле проекта. И вот почему.
В приложении есть функции для заказа авиабилетов и для бронирования отелей. Они разные по своей специфике, соответственно, и API для них разные. Вместе с командой заказчика мы написали масштабную документацию к API обеих функций практически с нуля. Плотно общались с командой Travelpayouts и «на ходу» описывали некоторые способы взаимодействия между приложением и серверами с базами данных. Приходилось импровизировать — иногда сами придумывали и проектировали запросы пользователей. Также мы полностью воссоздали и описали всю бизнес-логику продукта.
41 страница технического задания и еще 120 страниц документации одного только API — таким был результат этапа проектирования.
Как мы создали дизайн интерфейса, подходящий любому приложению
После того как определились с внутренней частью приложения мы приступили к проектированию интерфейса и продумыванию дизайна. Чтобы партнёрам Travelpayouts было удобнее адаптировать приложение под себя, мы заложили в него три основных стиля UI-элементов интерфейса и несколько стилей иконок.
Три варианта стиля интерфеса White Label App
Для исключения ошибок в назначении цветов мы определили несколько постоянных оттенков для тёмной и светлой тем приложения. Партнёр определяет основной оттенок приложения, а дополнительные цвета подбираются автоматически, исходя из гармоничности созданной палитры.
Как подбирается палитра элементов интерфейса на основе базового цвета
Мы также предусмотрели локализацию интерфейса под формат RTL для жителей стран Ближнего Востока, где пишут и читают справа налево — поэтому тексты, инпуты, сервисные подсказки, слайдеры, иконки, имеющие направление движения, адаптированы под этот формат.
Различие интерфейсов для стран с направлением письма слева направо и справа налево
Мы предусмотрели всю конфигурацию так, чтобы партнёры смогли самостоятельно разработать уникальный дизайн интерфейса, сделать его современным и стильным, при этом сохранив UI и гармоничность.
Как проектировали конфигуратор, который одновременно делает нативные приложения под iOS и Android
После того как мы завершили все основные работы, нужно было создать конфигуратор, который позволит партнёру быстро настроить приложение под себя и собрать сборку для публикации в магазине приложений.
Сам конфигуратор стал ещё одним уникальным решением в разработке. В едином для платформ файле конфигурации программы указаны строки со значениями, в которых задаются общие настройки. Приложение нативное, поэтому наши программисты унифицировали все свои скрипты, чтобы в результате работы с одним файлом конфигуратора автоматически могли создаваться два варианта приложения: для Android и для iOS.
Такой подход сильно сокращает время на адаптацию приложений под разные платформы, экономит ресурсы компаний-партнёров, а также при публикации их в магазин приложений позволяет охватить аудиторию потенциальных пользователей с обеих платформ. То есть, когда партнёр вносит изменения в один документ, то настройки изменятся и на Android, и на iOS.
Добавили в White Label App возможность вести подробную аналитику взаимодействия пользователя с приложением при подключении его к Firebase. Такая функция предоставляет возможность отслеживать насколько часто в приложении используется тот или иной блок, фильтр и какие разделы не используются совсем. И на основе собранной статистики трансформировать функции и настройки: убрать лишние фильтры, кнопки или же добавить те, что сконвертируют запрос клиента в покупку.
Что получилось в результате
Пример партнёрского приложения на основе White Label SDK
После завершения всех работ заказчик получил шаблон нативного приложения, который можно использовать для привлечения новых партнёров на платформу Travelpayouts.
Благодаря удобной системе адаптации и локализации интерфейса, в том числе под формат RTL, продукт даёт возможность сотрудничать с партнёрами из любых стран и расширить партнёрскую географию Travelpayouts.
Приложения White Label включают:
- Шаблонный проект с интерфейсом основных экранов, функциями и фильтрами для поиска и покупки авиабилетов и бронирования отелей.
- Встроенный конфигуратор с большим спектром возможностей адаптации дизайна.
- Библиотеку SDK c аналогичными модулями, что у приложения. Любую из функций партнёр может отдельно добавить в своё приложение, настроить стилистику. По итогу в его приложении появляются новые функции и ещё один способ монетизации.
- Пошаговый план-инструкцию о том, как собрать и кастомизировать приложение без знаний в разработке и опубликовать его в Google Play или App Store.
Как создать своё приложение на основе White Label App
Приложение на базе White Label App легко создать, даже если у партнёра нет опыта в разработке. Мы написали детальную инструкцию для партнёров по кастомизации White Label App под любой бренд. С ней любой может взять необходимые файлы и собрать приложение буквально по шагам: от скачивания архива с проектом приложения, настройки рабочей среды, изменения стилистики и дизайна до финальной сборки, загрузки в магазин приложений и создания корректного описания на странице магазина приложений.
Программа Travelpayouts подойдет блогерам, путешественникам, тревел-брендам и всем, кто хочет монетизировать свой трафик с помощью партнёрской комиссии. Для просмотра тарифов и получения инструкции по настройке приложения нужно оставить заявку на сайте программы.