Introducing RTL support was a comprehensive process that involved the entire team. We started with extensive research to understand the nuances of RTL languages and their impact on user experience. Following the research phase, we organized a series of targeted workshops with design, engineers, growth, marketing and comms teams. Following the process, we designed, developed and shipped a seamless experience for RTL users.
This initiative gave incredible results:
Onboarding Email Comms gave ↑33% lift in email opens
Arabic Organic Growth max ↑+22%
RTL Design Process
( Strategic exploration )
Overview
Responsibilities
Team Leadership
Design Supervision
Quality Control and Usability
Localization and Integration
Team
1 Design Director
7 Product Designers
2 Product Owners
4 Engineers
Goals
Implement comprehensive RTL support to enhance Arabic user experience
Ensure seamless RTL integration across all app components
Boost engagement in RTL markets through culturally adapted design
Why we are doing that?
( Core question )
It’s important to understand that designing for RTL is not just an edge-case. Arabic is the fourth most popular language in the world. While only 5% of online content is in Arabic, 60% of Arabic speakers would prefer to browse content in Arabic. That figure jumps to 97% when polling just Saudis.
What is RTL?
In RTL languages, writing and reading is done from right to left. This directional change affects the structure of the app, as well as typography, icons, and images.
To design an RTL project, we use a principle that seems simple at first. We flip or mirror every piece of content, with a few key exceptions.
Mirroring UI elements
Reversing the layout of the user interface to support right-to-left (or RTL) scripts is part of the localization process, during which you can provide language- and region-specific assets like images, audio, video, and translated text.
Text Alignment
Adjust text alignment to match the interface direction. However, special attention should be given to the spacing between words and characters to avoid awkward gaps.
Punctuation marks in RTL languages follow the text direction. For example, commas, periods, and question marks are placed to the left of the preceding word, unlike in LTR languages.
Paragraph Alignment
Adjust text alignment to match the interface direction. However, special attention should be given to the spacing between words and characters to avoid awkward gaps.
Punctuation marks in RTL languages follow the text direction. For example, commas, periods, and question marks are placed to the left of the preceding word, unlike in LTR languages.
Numbers
Don’t reverse the order of numerals in a specific number. This means that while the text flows from right to left, the numbers themselves read from left to right. Examples: In Arabic, 2024في (meaning: in 2024)
Regardless of the current language or the surrounding content, the digits in a specific number always appear in the same order.
More Examples
But...
Reverse the order of numerals that show progress* or a counting direction (e.g. progress bars, sliders, volume, and rating controls) — never flip the numerals themselves.
*Do not mirror media playback buttons and the media progress indicator as they refer to the direction of tape being played, not the direction of time (e.g. youtube).
Controls
Flip controls that show progress from one value to another (e.g. toggle).
Flip controls that help people navigate or access items in a fixed order. As an example ←Back button that is typically on the left side in LTR interfaces should be on the → right side in RTL interfaces.
Typically, the primary action button is on the left in LTR and should be on the right in RTL.
More Examples
Images
Place ads banners in positions that align with the user’s natural reading flow in RTL. Ads should be right-aligned or placed in areas that attract attention in an RTL layout.
Use images that are culturally relevant and sensitive to the audience’s context. Avoid imagery that may be misinterpreted or offensive in the specific cultural context.
Thumbnails in image galleries should also be right-aligned, and the scrolling direction should be adjusted.
Icons
Icons within images, like play buttons or directional arrows, should be mirrored if they are part of the image content. Flip an icon that shows forward or backward motion.
Dropdown arrows and other navigation indicators should point in the correct direction to signify expandable menus. Flip glyphs & icons that represent text or reading direction.
Dont’s
Avoid center-aligning paragraphs of text. Right-aligning is more natural for RTL languages.
Don’t flip logos or universal signs and marks. In general, don’t flip glyphs that depict real-world objects.
Before flipping a complex custom glyph, consider its individual components and visual balance.
Don’t misplace buttons. Primary action buttons should be on the right in RTL layouts, not on the left as in LTR
Summary
This project focused on implementing comprehensive RTL support to enhance user experience. Through extensive research and cross-team workshops, we developed and launched a culturally adapted design with seamless RTL integration. The initiative yielded impressive results: a 33% increase in onboarding email open rates and up to 22% growth in Arabic organic user acquisition. This successful implementation significantly improved user experience and expanded the app's reach in Arabic-speaking markets.