interface design of a mobile application template for Travelpayouts partners

Imagine you download a template application and want to customize it for yourself. Will there be the right colors, icons, buttons and themes? Will it be convenient to use after all the manipulations?

We at CleverPumpkin thought about these questions when we were designing the interface for White Label App — a template for a native mobile application for searching and purchasing air tickets or booking hotels for the Travelpayouts company. This is an affiliate platform that allows travel brands and influencers to earn income from advertising campaigns of famous travel brands and services.

In the article, our interface designer Fedor Mironov talks about how he thought through the design of the application in such a way that partners could download the template and customize the application to any style and maintain visual harmony.

A few words about the project

White Label App is an application template with ready-made functional modules. With its help, Travelpayouts partners can create their own unique application – its interface can be easily customized to fit any brand book or style you like. To do this, just select one of the preset styles and set the interface color palette. And then publish the finished application on Google Play or the App Store with your own name and icon.

In the last article, we talked in detail about the process of creating a project and developing its two versions (White Label App and White Label SDK) and a convenient configurator for simultaneous configuration of the interface for iOS and Android. But this project is also unique from a design point of view, so we decided to write in detail about how it was created.

What did you consider when creating the design?

To make it easier to adapt the application to the Travelpayouts partner, we have included three main styles of UI elements and the same number of icon styles. We provided for automatic generation of a palette of shades harmonious for each style and customization of icons for each interface style in order to customize the application to the desired colors of the partner’s brand. Of course, we provided dark and light themes for the White Label App.

Interface styles

The basis for customizing the template application is the styles, which differ from each other in the options for displaying interface elements.

• Basic style. In it, the corners of buttons and cards have rounded shapes of average values. The theme is used in many applications and is familiar to the user's eye.

• Round style. Interface elements in the theme have maximum rounded corners (where possible). This visual style is increasingly found in commercial interfaces and is becoming trendy.

• Edgy style. Brutal elements without roundings are quite rare, but they also have their fans.

Different icon styles

For visual consistency of the interface, we have prepared sets of icons suitable for any interface style. For basic We created a common set of icons for the round and round styles, and a separate one for the sharp style. But that's not all. Icon styles also have variations that you can choose when setting up your solution.

The partner can choose one of three icon styles:

• With filling. The style is used by default in the application – the inner area of ​​the icon is completely filled with color.

• Linear. A minimalistic option that uses only outlines of one given color.

• Tonal. Icons of this type are similar to filled symbols, but differ in that in this case some of the icon elements have different transparency.

To create icons, we took the basic set of Materia Symbols and supplemented them with the necessary icon options. Travel apps traditionally use a lot of icons, especially on hotel screens. Each hotel and room type has its own advantages.

It took a lot of time and effort to draw icons for all styles – 235 icons were prepared for just one of them. And in total for all styles there were 1410 pieces. We have never designed such a large number of icons in our applications!

Harmony of color palette

To create a palette and eliminate errors in assigning colors, we have defined several constant shades for the light and dark themes of the application. The partner determines the main color scheme of the application, and additional colors are selected automatically. This way, you can change the text colors, screen background, and “tailor” the application to your brand, but not disrupt the color harmony.

We made it so that the palette of the main selected color is converted into certain values, which always have optimal tone and contrast parameters. According to the HSL model, it is a color model in which the color coordinates are hue, saturation and lightness.

For example, the color .primary, which is the main color of actions in the interface, will have a value of 50 on the light scale. Thus, we eliminated the possibility of creating overexposed color styles or too dark interfaces in partner applications.

Features of application interfaces for Middle Eastern countries

We had to solve another non-standard task of localizing the application interface for the RTL letter type – right-to-left. This style of writing and reading text “from right to left” is characteristic of Hebrew and Arabic writing.

Guided by general rules for adapting design to RTL. For example, icons with obvious direction were made to be mirrored, and the “Back” button should point to the right.

The cultural characteristics of the countries were also taken into account. For example, potentially problematic icons such as a piggy bank symbol representing frugality or a glass of champagne representing a restaurant are inappropriate for countries in the Middle East.

In total, the application has been translated into 26 languages. But localization for RTL languages, in our opinion, turned out to be the most difficult. It was necessary to take into account many nuances – features of writing, differences in reading, orientation, fonts, numbers, dates, and not just make the interface and text writing “mirror”.

The work carried out on interface localization makes it possible for Travelpayouts partners to create an application for the Middle Eastern market and attract a wider audience – without releasing a separate application for this market.

Collaboration with customer designers

The White Label App was designed by Travelpayouts designers. Considering the meticulousness with which we thought through the entire interface, there were few edits and the layouts were approved quickly. But together we actively worked on texts for screens of empty states (or zero dates) – empty pages, loading or errors. Here the guys from Travelpayouts helped write good texts.

Despite the fact that the customer has its own designers, all stages of the project were taken over by the CleverPumpkin team. For years we have been working on all the interaction processes of the design-development link, which has a great effect on the speed of work and easy communication.

How to use the template

An application based on a White Label App is 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.