This is a field guide to rtl design system for the Saudi market. No theory you can't act on, and no advice that assumes a US search landscape.
Most website problems presented as design problems are actually structure, speed or trust problems. Getting those three right does more for enquiry volume than any amount of visual refinement applied afterwards.
Framing the problem properly
The honest starting point for rtl design system is an audit rather than a plan. Half of what most Saudi businesses need is already present and broken — a profile nobody maintains, pages nobody links to, data nobody reconciles. Fixing existing assets typically returns faster than building new ones, and it is considerably cheaper. Build only after you have exhausted the repairs.
Performance budgets prevent slow decay
Agree a maximum page weight, a maximum number of third-party scripts and a target for Interaction to Next Paint before development begins, then enforce them in review. Sites do not become slow in one release; they accumulate a chat widget here and a tracking pixel there until a fast build is a slow site two years later. A written budget is what stops that drift.
Accessibility is legibility for everyone
Contrast ratios that survive sunlight on a phone screen, focus states that are visible, semantic headings, labelled form fields, alt text in the page language, and no information conveyed by colour alone. In Arabic, ensure screen readers receive correct language attributes so pronunciation is right. Accessible pages are also cleaner for crawlers and AI extraction — the same structural discipline serves both.
Forms: ask for less, get more
Every field you add costs completions. Name, phone and one open field is usually enough to start a conversation; qualification can happen in the call. Support Arabic input properly, validate Saudi mobile formats without rejecting valid ones, offer WhatsApp as an alternative to the form entirely, and confirm submission with a message that says what happens next and when. Silent success screens are why prospects call competitors.
Navigation that reflects how customers think
Organise by the problem the customer has, not by your internal departments. Keep the top level to five or six items. Make the primary conversion route visible on every screen without a scroll. Mega-menus are useful for large service portfolios but become a liability on mobile — design the mobile navigation as its own artefact rather than a collapsed version of the desktop one.
The language switch is a conversion element
Put it top-right in the English view, top-left in Arabic, label it in the target language, and preserve the current page rather than dumping users on the homepage. Remember the choice. Default by browser preference on first visit but never trap: a visitor who wants English must always be one click away from it. This small component is one of the most frequently mishandled details on bilingual Saudi sites.
Arabic typography deserves its own scale
Arabic script has no capital letters, taller ascenders and connected letterforms, so it needs roughly 10–15% more line height and often a slightly larger optical size than Latin text at the same nominal point size. Choose a family with a genuine Arabic cut rather than a Latin face with bolted-on glyphs. Test with real content at real lengths — Arabic translations commonly run shorter than English, which breaks layouts tuned to the wrong measure.
The businesses that win in Saudi search are rarely the biggest. They are the ones that did the unglamorous work consistently for four quarters.
Guidelines people actually use
A hundred-page PDF nobody opens protects nothing. Ship a short, practical system: logo files in every format with clear-space rules, a defined type scale for Arabic and Latin, a colour palette with accessible pairings, real examples of correct and incorrect application, and templates for the five documents the company produces weekly. Distribution and templates are what create consistency; the document alone never does.
Typical project shape
| Stage | Typical window | What you should see |
|---|---|---|
| Discovery and content | 2–3 weeks | Usually the critical path, not development |
| Design system and key templates | 3–4 weeks | Bilingual from the first artboard |
| Build and integrations | 4–8 weeks | Varies most with third-party systems |
| QA, RTL testing and launch | 1–2 weeks | Real devices, throttled connections |
Windows assume consistent execution and a market of ordinary competitiveness. Treat them as planning ranges, not commitments.
Positioning before aesthetics
Identity work that begins with mood boards produces decoration. Begin with the commercial question: who exactly is the customer, what alternatives do they weigh, what do we credibly do better, and what will we deliberately not claim. Once those four answers are written and agreed, visual decisions become straightforward and arguments about colour largely disappear.
Crawl, render, index, rank — in that order
Every technical problem sits in one of four stages, and diagnosing the stage saves weeks. If the URL is not crawled, look at robots.txt, internal links and server response. If it is crawled but not rendered, look at JavaScript and blocked resources. If rendered but not indexed, look at quality, duplication and canonicals. Only when a page is indexed does ranking work apply. Teams that skip this order end up rewriting content for a page that Googlebot never fetched.
Diagnose before you test
Running experiments without a hypothesis wastes traffic that most Saudi mid-market sites cannot spare. Start with session recordings, funnel drop-off in GA4, heatmaps and five customer interviews. You are looking for the one screen where intent dies. Nine times out of ten it is a form, a price ambiguity, a missing trust signal or a mobile layout failure — and it is visible within an afternoon of watching real sessions.
The short audit
- Test the Arabic layout for correctly mirrored navigation, breadcrumbs and progress steps
- Give form fields visible labels and visible focus states
- Increase Arabic line height by roughly 10–15% relative to the Latin scale
- Set correct language attributes so screen readers pronounce Arabic properly
- Confirm numerals, phone numbers and Latin brand names stay left-to-right inside Arabic text
- Use logical CSS properties — inline-start and inline-end — instead of left and right
- Validate Saudi mobile number formats without rejecting valid ones
- Subset and self-host Arabic fonts, and preload only above-the-fold weights
Monitoring so problems surface in days, not quarters
Set up uptime checks, a weekly crawl with change alerts, Search Console coverage alerts, and a Core Web Vitals field report reviewed monthly. Most catastrophic SEO losses in this market trace back to a deployment that added a noindex, a robots rule or a broken canonical, and sat unnoticed for a full quarter because nobody was watching the right dashboard.
Redirects, migrations and the cost of getting it wrong
Map every old URL to its closest new equivalent one-to-one; never bulk-redirect to the homepage. Use 301s, not 302s. Keep the old sitemap live for a few weeks so the redirects are discovered. Preserve internal links, then update them. Watch Search Console coverage daily for the first fortnight. Migrations that lose traffic almost never lose it to bad content — they lose it to missing redirect mappings nobody checked.
Where to start this week
Test your site on a throttled mid-range Android. Time it. Then check the Arabic version for mirrored layouts, correct typography and a language switch that preserves the page. Add the trust elements Saudi buyers look for — registration number, national address, real photographs, a WhatsApp route. Most sites gain more from that afternoon than from a full redesign.
The competitive advantage in this market is still consistency. Most competitors will read something like this, agree with it, and change nothing. The gap that creates is the opportunity.
