Right-to-left Arabic and English onboarding for a mobile banking app

Sadeem wants customers to open an account on their phone in under 8 minutes: choose a language, enter a mobile number, scan an Emirates ID, take a selfie, answer a few questions and set a passcode. The first prototype was designed in English and then "flipped" for Arabic by a vendor. In an internal test with 12 staff, Arabic speakers abandoned the flow nearly twice as often as English speakers. Progress bars ran the wrong way, phone numbers were mirrored, icons with arrows pointed backwards, and some Arabic text was cut off because it needed more height than the English.

The product owner wants Arabic treated as the primary language, not a translation. Her requirements: - the full onboarding flow (9–12 screens) designed in Arabic right to left and in English left to right, from the same Figma components; - correct mirroring: layout, navigation and directional icons flip, but numbers, phone numbers, media controls and logos do not; - Arabic type that is readable at small sizes, with line heights tested on real Arabic content, not lorem ipsum; - a test with at least 6 people you recruit (at least 3 native Arabic readers), with time to complete and errors recorded; - a handover document that developers can follow for every screen.

You will write the content yourself in both languages, ideally with a native Arabic speaker checking it. Do not use real Emirates ID numbers or photos; design the ID-scan step with placeholders.

Done looks like a Figma file with both directions, a mirroring rulebook, test notes and results, and a handover file.