Everything below is written for decision-makers who need figma to code handoff to produce commercial results, not for people collecting best practices.
A website in Saudi Arabia has to work twice: once in Arabic and once in English, on a mid-range phone, for a buyer who will check your commercial registration before filling in a form. Design decisions here carry commercial weight that they simply do not in single-language markets.
The short version
Most teams arrive at figma to code handoff after something stopped working: enquiries fell, a competitor became visible, or a target was missed. That context matters, because the right first move differs depending on whether you are fixing a decline or building from a standing start. Diagnose which situation you are in before applying anything below — the sequence changes completely, and applying a growth playbook to a decline problem wastes a quarter.
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.
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.
Translated content ranks like translated content. Written content ranks like written content. The gap is visible in the numbers within a quarter.
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.
Trust signals Saudi buyers look for
A visible commercial registration number, a national address, a landline in addition to mobile, a Maroof badge for ecommerce, named team members with photographs, real client logos with permission, and a WhatsApp route to a human. Saudi buyers verify before they enquire, and the absence of these elements costs more conversions than any amount of aesthetic refinement recovers.
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 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 fonts are a performance decision
A full Arabic typeface can weigh several hundred kilobytes because of the glyph count and contextual forms. Subsetting to the ranges you actually render, using font-display: swap, self-hosting rather than calling a third-party origin, and preloading only the weights above the fold together take a second or more off first paint on a mid-range Android device — which is what most of the Kingdom is browsing on.
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.
Hreflang without the usual mistakes
Use ar-SA and en plus an x-default. Every annotation must be reciprocal — if the Arabic page points to the English one, the English page must point back, or the whole set is discarded. Point at canonical URLs only. Do not mix hreflang with a canonical that points to the other language. And remember hreflang selects between versions; it does not create authority. A thin Arabic page still ranks like a thin page.
Test the big thing, not the button colour
With modest traffic volumes you cannot detect small effects. Test changes large enough to move behaviour meaningfully: a different offer, a restructured page, a removed step, a changed payment option, a new proof element. Colour and copy micro-tests belong to sites with tens of thousands of weekly sessions; below that they generate noise that gets misread as insight.
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.
What to verify first
- Place the language switch top-right in English and top-left in Arabic, preserving the current page
- Confirm numerals, phone numbers and Latin brand names stay left-to-right inside Arabic text
- Give form fields visible labels and visible focus states
- Validate Saudi mobile number formats without rejecting valid ones
- Set correct language attributes so screen readers pronounce Arabic properly
- Use logical CSS properties — inline-start and inline-end — instead of left and right
Bilingual identity from the first sketch
A logo designed in Latin script and later 'given an Arabic version' almost always produces a mismatched pair: different weights, different optical sizes, different personalities. Design both simultaneously so the marks share proportion, stroke logic and spirit. Test them side by side, stacked, in one colour, at favicon size and embroidered. In the Saudi market both versions will be used constantly, often in the same document.
Social proof that reads as real
Named clients with logos used by permission, quantified outcomes, photographs of actual work, video testimonials in Arabic, and review counts pulled live rather than typed as static text. Vague claims — 'trusted by hundreds' — reduce credibility rather than build it. Specificity is the whole mechanism: the more precise the claim, the more it is believed.
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.
None of this is complicated. It is, however, cumulative — the results come from doing the whole sequence for several quarters rather than doing the exciting parts for one. Start with the measurement baseline, fix what is broken, then build.
