Работаем с 2021

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

Заказчик

Travelpayouts — партнёрская платформа для монетизации туристического трафика

Услуга

Технологии

Разработка мобильных приложений под ключ

MVVM

Figma

Дизайн

Архитектура iOS

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

Задача

Swift

Язык iOS

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

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

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

YouTrack

Менеджмент

Kotlin

Язык Android

Android Studio

IDE Android

Подробнее о проекте Travelpayouts

IDE iOS

Xcode

Архитектура Android

MVI

Решение

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

White Label выпущен в 2 форматах

White Label App — приложение, которое партнёр Travelpayouts может легко настроить под любую стилистику.

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

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

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

У приложения White Label есть некоторые особенности, которые отличают его от «классических приложений». Например, его можно использовать в двух вариантах — как готовый шаблон приложения и отдельные экраны.

В случае White Label App партнёр делает копию приложения, задаёт стилистику и выпускает под своим брендом.

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

Алёна

Аналитик

Функциональные возможности конфигуратора White Label

Интерфейс

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

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

Базовый стиль

Острый стиль

Круглый стиль

Иконки

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

Для всех стилей иконок предусмотрено 3 вида вариаций: с заливкой, линейные и тональные.

Иконки с заливкой

Линейные иконки

Тональные иконки

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

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

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

Сергей

Руководитель проекта

Цвета

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

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

Основной цвет

Локализация

White Label поддерживает много разных языков и локализаций, в том числе под языки стран Ближнего Востока с письменностью Right-To-Left. В таком случае меняется не только написание текста, но и изменяется навигация, типографика, расположение и направление некоторых иконок, отображение времени и валюты, инпуты и другие элементы.

Функциональность White Label

Модуль поиска авиабилетов

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

По мере набора названия аэропорта или города приложение будет подбирать подходящие варианты.

Финальная стоимость рассчитывается в зависимости от возраста и количества пассажиров и класса обслуживания.

Поиск билетов

Поиск аэропортов

Пассажиры

Результаты поиска содержат карточки авиабилетов с основной информацией о перелёте.

Фильтры помогают сузить область поиска и найти подходящие билеты под определенные требования.

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

Результаты поиска

Фильтры

График цен

На экране билета отображается подробная информация о перелёте. При необходимости можно посмотреть предложения других продавцов.

Экраны билета

Модуль отелей

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

Чтобы найти подходящие варианты проживания, достаточно выбрать даты в календаре.

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

Поиск отелей

Календарь

Выбор отеля

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

Информация об отеле

Пример приложения
cо встроенными модулями White Label SDK

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

Travelpayouts помогает тревел-блогерам зарабатывать
с известными брендами!