What problems do designers face when creating a service for Arab users?

I am a designer at UULA, a Kuwaiti company that makes an educational platform for schoolchildren, helps them prepare for exams and even publishes their own textbooks.

99% of our users are Arabic-speaking children and teenagers. At the same time, our design and development teams are almost entirely Russian-speaking.

In this article, I'll talk about the problems designers face when creating a service for people who read backwards.

Design process

From right to left

Arabic, unlike English and Russian, goes from right to left. You can immediately substitute Arabic into layouts, but it is very difficult for both the designer and the developer to use them: it is not clear which buttons do what.

At first, we prepared an English version for development, where all elements were designed for the usual direction of view – from left to right.

But this created a lot of complications – all the elements in the design system are duplicated, you need to have a version from left to right and from right to left.

Well, and also try to redraw the big flow completely. It took a lot of time and effort.

In the end, we came to the decision to draw the right-to-left version straight away, but substitute English text for the Arabic.

This helps the development team understand what is happening in the mockup and not do duplicate work. Although if you need to test on users, you still have to prepare a separate version in Arabic.

It takes time to get used to this design. I tried to follow the direction, but the usual left-to-right still crept through.

For example, the screen was oriented correctly and the button animation went from left to right.

It's easy to put a cross in the wrong corner or mix up the Cancel and Confirm buttons.

Another non-obvious thing: the flow of screens in Figma should also go from right to left! Otherwise, the arrows constantly go around the screen and it is difficult to follow them.

But there is one nuance: despite the reading direction, users often hold the phone with their right hand. That is, it is easier for the user to reach the right side of the screen. Therefore, it is impossible to simply mechanically mirror the interface.

We don't flip the header, it has the logo on the left side and the icons on the right, because the user may often need to read QR codes from tutorials.

Font and layout features

In Arabic, most vowels are shown using special symbols above and below the main block of text.

Because of this feature, Arabic text requires large line spacing, i.e. the default line spacing cannot be reduced, only increased. Because of this, Latin blocks look rather loose.

Also, the point of Arabic fonts is quite small. English text of the same point size as Arabic looks larger and more readable. Apple for this programmatically increases all Arabic inscriptions by 2 points.

Also, Arabic text is usually more compact and shorter than English.

It is also more difficult to keep track of dangling prepositions in Arabic. To improve readability, prepositions in English are tied to the word that follows them. Arabic also has short words, but it is not always clear whether it is worth putting a non-breaking space between them and the next word.

Icons

Icons, like the general layout of the application, also need to be flipped from right to left. But not all of them.

There are icons with some established sign, for example, Bluetooth, we do not turn them over. Or, for example, the social network icon.

But those icons that have a metaphor for movement – an airplane, for example, a car, or a sound – they need to be flipped to be perceived normally.

UX editor

I had different projects: in some, the designer was fully responsible for the texts in the interface, in some, the editor checked the text at the final stages, and in others, he participated in the creation of the feature on an equal basis with the designer.

But in all these cases, as a designer, I could discuss with the editor – do we need a more formal or more informal text? I could offer my own version. I could understand whether the text was definitely ok.

If you are not a native speaker, you can only translate the suggested options through a translator and a GPS chat. This helps to understand the general meaning, but the nuances are lost.

For example, the beautiful Saved from Noushen and Saved will be translated the same way. But these are very different section names!

Kuwait is a rather unique country. Children and teenagers are a little more integrated into the international context than adults, but still.

We have an Arabic-speaking researcher in our company who tries to immerse us in the context as best she can: she makes reports on what Kuwaiti children watch, play, and are interested in.

Part of the team goes to strategy sessions in Kuwait to sort things out on the spot.

But, nevertheless, this does not help, for example, to come up with culturally conditioned metaphors.

For example, UULA has a section called “oil”.

This section is a summary of the course, the most important things to quickly prepare for the exam. This metaphor is from an established expression, something like “Give me the most butter”, which means tell me the most important thing.

Or, for example, the closer to exams, the more often we show students a duck.

This is an exam duck. The words duck and failure in Arabic are similar in pronunciation: بط (bat) and بُط (buṭ). So it turns out something like Exam Destroyer. So the duck is a warning that if you don't pull yourself together now, the exams will be difficult.

The analogue for a Russian-speaking audience would probably be an ominous waffle.

There is also another cultural context: it is better not to use human mascots (the Koran does not like images of people) and dogs (the Koran does not like them either).

One of my mistakes at the beginning was, for example, using the name Saddam as a placeholder in the user profile interface. For me, it's a fairly neutral name, on par with Mohammed, but a person from Kuwait perceives it in about the same way as if the interface of the friends list included Masha, Petya, and Adolf. It seems like nothing special, but it's strange.

The main thing here is not to slip into a simplified understanding of a foreign culture. We held several brainstorms about the visual language and the first ideas that designers come up with are something colorful, bright, oriental.

When we showed these options to the Kuwaitis, they said that the feeling from such pictures was like from “cranberry”. As if for Russia they were showing Khokhloma, vodka and bears. It is important for a designer to look for more subtle and profound references and not to perceive a foreign culture in a simplified way.

One of the tools I have tried to use for this is results Hofstadter's survey

The feeling of inequality between people (power distance index) in Russia and the Gulf countries is quite similar.

In our service, the power is teachers. In Kuwait, teachers are very respected people. How did this knowledge influence the design?

We created a personal page for teachers, where the student had the opportunity to rate the teacher using the thumbs up and down buttons.

But we removed those buttons along the way because they felt too dismissive.

But the cultural context affects not only the visual language, but also the functionality of the application. For example, in our profile there is no function to upload an avatar, because among the students there are many girls who do not show their faces.

Or, for example, we cannot create a common video room for conversations between students of the same year, again due to the separation of genders.

There are also differences in the research process: respondents almost always do not turn on the camera.

conclusions

UULA has been around for over 5 years and during this time most of its designers have had no Arabic background.

If you look at the most popular apps in Kuwait, it's Google and Meta (and TikTok). Gulf users are accustomed to all the usual user patterns, and are generally quite integrated into Western culture.

If you are a UX designer who has previously done projects for the Russian, European and American markets, it will take you quite a bit of time to retrain for projects for Arab users.

P.S. Yes video recording of the story based on this article, if you prefer to listen