How we made an application for an affiliate platform with which anyone can make money from tourism. Case Travelpayouts

Would you like to have a ready-made application that you can adapt to your brand in a couple of clicks? We've already done it!

Travelpayouts, a company that brings together influencers and travel brands, came to us with the idea of ​​​​creating such a product. The customer needed a digital product that would help them expand their partner platform in the direction of mobile applications, and the partners themselves would further monetize incoming traffic, earning commissions for each booking.

This is how the application appeared White Label App — a native application template for searching and booking airline tickets and hotels around the world with extensive configuration options. It comes in two versions: the main one – White Label App – an application with ready-made functional modules, and White Label SDK – a set of ready-made screens that can be built into your own application. Any of the formats can be customized to suit different brand styles. This solution will also be much cheaper and faster than developing your own application for travel business.

More details about formats:

• White Label App — application template for iOS and Android with a ready-made interface. To release it, the partner will not need to involve developers, since he will be able to assemble the application according to the instructions. This option allows you to release your own application in a very short time, but the partner will be limited by the functionality of the ready-made solution.

• White Label SDK — individual modules that a partner can transfer to their own application. In this case, the partner can connect ready-made modules for searching tickets and hotels, and is not limited in the further development of the application.

What did the customer ask for?

The Travelpayouts platform helps partners monetize their travel projects using affiliate tools from 100+ travel brands. Thus, program participants can earn money on their websites, mobile applications and pages on social networks. Since 2011, the company has attracted more than 400 thousand users and paid out more than 3 billion rubles in remuneration.

One of these Travelpayouts tools is the White Label App – a template for creating your own mobile product with search functions, buying air tickets and booking hotels.

The essence of the tool is that a partner can take a ready-made mobile application template, indicate their name, add a logo, choose a style and upload it to the store as their own product.

The task from Travelpayouts was to develop an application with a flexible and simple configurator, i.e., with wide customization capabilities for any brand, but without requiring development knowledge to configure it. Simply put, anyone should be able to assemble it following detailed instructions. Additionally, it was necessary to provide the ability to integrate separate modules for searching for airline tickets or hotels into existing partner applications via the White Label SDK.

‎SDK is a library or set of tools for platform-specific developers. In our case, it works like this: these tools allow you to embed the functionality of one application into another. For example, let's say you have a car rental app and want to add a hotel booking screen. To do this, just take the required module from the White Label SDK library and connect it to your own application project – this is how this system works.”

Alena Sorokina, CleverPumpkin analyst

We started by preparing technical specifications and studying the application features

At this point, the design stage begins, in which it was necessary to provide:

• new template application;

• configurator for simple and flexible customization of the application style;

• functions for searching air tickets and booking hotels with convenient filtering;

• ability to use individual functions via SDK.

Everything had to be thought through so carefully that for any adaptations and changes made the application or its individual module ended up looking beautiful and harmonious.

For such a large project, we decided to stick to the native application format, that is, we wrote each of its versions separately for Android and iOS. We chose this type of application because it has greater long-term viability, better performance, and provides a better user experience. In addition, in native applications, various types of configuration, code transfer and assembly of applications on the customer’s side, as well as the RTL format (writing from right to left) work faster, more stable and more reliably. The UI in White Label applications complies with the guidelines from Google and Apple, which helps the user better interact with the application due to a more familiar and convenient interface.

Initially, Travelpayouts sent us a draft technical specification, in which they indicated which sections were required, added screenshots of interesting functions and partially the logic that they would like to implement. Based on this document, our own practice and previous conversations with the customer, we have compiled a list of the main sections, subsections and blocks of the application. At the same time, the designer created a screen map to demonstrate the structure of the application, the relationship between screens, and the logic of transition between them.

After agreeing on the key points, preparation of the final technical specifications for design and development began. In this document, we have already described in detail the placement of specific data on screens, the logic of user interaction with the application, error handling format, design preferences, support for languages ​​and localizations – all the necessary details for full development.

We separately specified the tasks of the configurator: what exactly and how a partner can change in their application in order to completely adapt it to their brand.

Analyzed and described each network request

The stage of creating technical specifications and project documentation in general has become one of the most complex and voluminous in the entire project cycle. And here's why.

The application has functions for ordering air tickets and for booking hotels. They are different in their specifics, and accordingly, the APIs for them are different.

Together with the customer’s team, we wrote extensive documentation for the API of both functions almost from scratch. We closely communicated with the Travelpayouts team and “on the go” described some of the ways of interaction between the application and servers with databases. We had to improvise—sometimes we came up with and designed user requests ourselves. We also completely recreated and described all the business logic of the product.

41 pages of technical specifications and another 120 pages of documentation for the API alone – this was the result of the design phase.

How we created an interface design suitable for any travel application

After we decided on the internal part of the application and the mechanisms of its operation, we began designing the interface and thinking through the design.

To make it more convenient for Travelpayouts partners to adapt the application to their needs, we have included three main styles of UI elements and several icon styles.

To eliminate errors in assigning colors, we have defined several constant shades for the dark and light themes of the application. The partner determines the main shade of the application, and additional colors are selected automatically based on the harmony of the created palette.

To ensure consistency between all interface elements, we have prepared separate sets of icons that are combined with each other. There are icon sets for a theme with rounded shapes and for a theme with rectangular interface elements.

We also provided for localization of the interface to the RTL format for residents of Middle Eastern countries, where they write and read from right to left – therefore texts, inputs, service tips, sliders, icons with a direction of movement are adapted to this format.

We have provided the entire configuration so that partners can independently develop a unique interface design, make it modern and stylish, while maintaining UI and harmony. We will tell you more about how we created the interface design for White Label applications in another article.

How we designed a configurator that simultaneously creates native applications for iOS and Android

After we completed all the basic work, we needed to create a configurator that would allow the partner to quickly customize the application for himself and assemble an assembly for publication in the application store.

The configurator itself became another non-standard solution in development. The program configuration file, common for platforms, contains lines with values ​​in which general settings are specified. The application is native, so our programmers unified all their scripts so that, as a result of working with one configurator file, two versions of the application could be automatically created: for Android and for iOS.

This approach greatly reduces the time for adapting applications for different platforms, saves resources of partner companies, and when publishing them in the application store, it allows you to reach an audience of potential users from both platforms. That is, when a partner makes changes to one document, the settings will change on both Android and iOS.

In addition, if the customer wants to improve the configuration process, based on this file it will be possible to create an additional UI interface, with which it will be even more convenient to customize the application.

The White Label App has added the ability to conduct detailed analytics of user interaction with the application when connecting it to Firebase. This function makes it possible to track how often a particular block or filter is used in the application, and which sections are not used at all. And based on the collected statistics, transform the functions and settings: remove unnecessary filters, buttons, or add those that will convert the client’s request into a purchase.

What happened as a result

After completing all the work, the customer received a native application template that can be used to attract new partners to the Travelpayouts platform.

Thanks to a convenient system for adapting and localizing the interface, including for the RTL format, the product makes it possible to collaborate with partners from any country and expand the customer’s partner geography.

White Label applications include:

• A template project with the interface of the main screens, functions and filters for searching and purchasing air tickets and hotel bookings.

• Built-in configurator with a wide range of design adaptation options.

• An SDK library with modules similar to those of the application. The partner can separately add any of the functions to his application and customize the style. As a result, new functions and another way of monetization appear in his application.

• Step-by-step plan-instructions on how to assemble and customize an application without knowledge of development and publish it on Google Play or the App Store.

How to create your own application based on White Label App

White Label App easy to create, even if the partner has no experience in development. We have written detailed instructions for partners on customizing the White Label App for any brand. It is posted on the website Travelpayouts. With it, anyone can take the necessary files and assemble the application literally step by step: from downloading the archive with the application project, setting up the working environment, changing the style and design to the final assembly, uploading to the application store and creating the correct description on the application store page.

The Travelpayouts program is suitable for bloggers, travelers, travel brands and anyone who wants to monetize their traffic using affiliate commissions.

To view tariffs and receive instructions for setting up the application, you need to leave a request at website programs.