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