How we built interface in Arabic without knowing Arabic

Alexey Yanchuk
Jun 5 · 7 min read

Disclaimer: By Arabic language, we mean all the RTL languages. Apart from Arabic, we translated interface into other RTL languages.


Travelpayouts is an affiliate network in the travel niche, but not in the classic sense. Normally, such networks are mediators between webmasters and advertisers. We are a product-focused organization, and our main advantage is product development. One example is the White Label solution (WL) for airline ticket and hotel searches.

Even though we are an almost autonomous team within Aviasales (Russian brand of JetRadar), we are fully responsible for running the affiliate-channel of Aviasales. In the case of WL, we offer an opportunity to anyone willing to build their own research engine for airline tickets and hotels to generate income.

In 2017 we happened to receive an inflow of localization requests for Middle Eastern countries. Clearly, we needed the RTL language support ourselves to test the waters in the new market. This task had been postponed before, but finally, its time had come, and we initiated work in that regard.

The first problem — nobody on our team had any knowledge of Arabic

Interface texts were translated by affiliate-volunteers (they used the Crowdin platform) and then proofread by translators to the best possible extent, without having the interface itself.

We started looking for a person who’d help us do the design part. We didn’t know anyone personally for this job, so I resorted to UpWork services. In 2017, we were already developing design solutions on Figma, so having experience of working with it was an important point, but not a requirement. Most applicants for the job had never used Figma, and their “yes I can” didn’t inspire my confidence. As for their experience with RTL languages, it consisted of translating a few small context projects into Arabic. And on top of that, the communication process wouldn’t be flawless and smooth, because we’d have to speak English only, which would definitely hamper the process of development (all our software engineers are Russian speakers).

The second problem — we wrote texts for the layouts in Russian

However, we got lucky and found Vladislav who was living in Belarus at that time. He knew Arabic and had experience localizing interfaces into RTL languages. Even though he never dealt with Figma, it wouldn’t be a problem to switch from Sketch to Firma. Match.

And other problems

  • Astonishingly enough, RTL is not always RTL. Arabic languages are bidirectional languages. Arabic numerals are the ones that we use in English and other languages, they are written from left to right. Although, it is possible to write them according to Arabic language rules which implies a right-to-left script. Moreover, even when you stumble upon English words or numbers in an RTL language, they are written as is, not backwards.
  • We used the UAE Arabic language as a basis because of its popularity. By the way, Arabic comprises six dialects. Native speakers of other dialects still write to us saying “our” Arabic texts are not correct.

What the designer contributed to the project

In the end, we happened to have about 70 hours of paid work of our designer, including both RTL layouts of WL and widgets, as well as consultations during the working process. As you can see, the layout preparation itself didn’t take much time.


Development process

We used the following framework features:

  • comments in CSS. Markings reflect changes necessary for displaying the RTL style. For CSS parsing, the framework applies changes according to comments. These changes are implemented in the build process (re-building is possible only when the version is being altered). You can find the full description of the framework commands in the RTLCSS paperwork.

Advantages of using RTL CSS as comments:

  • Doesn’t change the main CSS-marking.
  • It’s possible to erase comments at any given time.
  • No need for specific changes for a special text recording.

Naturally, CSS is not omnipotent, so we had to insert some kludges in cases of JS use.


Difficulties

No uppercase

The “Hamza” symbol broke down the search logic

These differences in writing hampered the air tickets search process. The system would choose a wrong country or would not show a hint for airports.

In the end, we had to bring changes to our autosuggest service, so it could understand all the variations of “hamza” writing. However, this problem popped up only at the end of the development process.

Translation issues


Working on feedback

We didn’t receive too many comments, but the ones that we got helped us find mistakes. Our designer was checking on them as well. The most important suggestion was to change the font which we did. In the end, we opted for Cairo from Google Fonts. We were choosing between Cairo and Droid Kufi, but Cairo had all the necessary symbols and even more (Extra Light, Light, Regular, Semibold, Bold, Black), while Droid included only Regular and Bold.

After choosing Cairo, we realized that Figma didn’t support some symbols of the Cairo font in layouts. However, the working project didn’t show any mistakes.


Results and statistics

Flights, English version

Flights, Arabic version

Hotels, English version

Hotels, Arabic version

We sent a letter notifying the release to all the users who have ever requested the Arabic version. After that, we saw an increased number of views of search forms for air tickets and hotels in Arabic. The percentage of active affiliates from Middle East countries continues to grow, as well as the number of bookings made by users from Middle East.

The number of views of search forms for air tickets and hotels in RTL languages

The number of bookings made by users from the Middle East

The percentage of active affiliates from the Middle East in comparison to the overall number of active affiliates

Alexey Yanchuk

Written by

Product Manager in Travelpayouts affiliate network