HomeCompanyPortfolioServicesSoftware & AIMobile AppsIndustriesLocationsPricingBlogContact
Englishالعربية
Home  /  Blog  /  Design
DesignApr 18, 2026·11 min read

Bilingual Website UX: Language Switching That Doesn't Lose Users

IW
IITWares Editorial Team
Digital Strategy & Search
Bilingual Website UX: Language Switching That Doesn't Lose Users

Bilingual website ux is one of those subjects where the advice online is either three years out of date or written for a market that isn't this one. Here is how it actually works in Saudi Arabia in 2026.

Bilingual, mobile-first and fast is the baseline in this market, not the ambition. The differentiation happens in the details — typography that respects Arabic, layouts that mirror properly, and conversion paths that match how Saudi buyers actually behave.

What bilingual website ux actually means in practice

Most teams arrive at bilingual website ux 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.

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.

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.

Content-first, not template-first

Design around real copy, real product names and real image assets. Layouts built on placeholder text collapse when Arabic headings run longer than the English mock or a product name has fourteen words. Ask for the content before the visual sign-off; it changes the design, and it changes it far more cheaply at that stage than after development.

Design for a mid-range Android on a moving connection

Internet penetration reached roughly 99% of the population at the end of 2025 and around three-quarters of people can reach a 5G device, but the median handset is not a flagship and a large share of sessions happen in transit. Design to that reality: generous tap targets, minimal script, images sized for the viewport actually served, no layout dependent on hover, and a first meaningful paint under two seconds. Test on a throttled mid-range device before signing off, not on the designer's laptop.

RTL is a layout system, not a text direction

Setting dir="rtl" flips text and starts the argument. Navigation order, breadcrumbs, progress steps, sliders, form alignment, icon direction, chart axes and animation origin all need deliberate decisions. Meanwhile numerals, telephone numbers, email addresses, currency codes and Latin brand names stay left-to-right inside a right-to-left sentence. Use logical CSS properties — inline-start and inline-end rather than left and right — and the two directions can share one stylesheet honestly.

Speed is not a technical metric here. It is the difference between an enquiry and a bounce on a mid-range phone.

Typical project shape

StageTypical windowWhat you should see
Discovery and content2–3 weeksUsually the critical path, not development
Design system and key templates3–4 weeksBilingual from the first artboard
Build and integrations4–8 weeksVaries most with third-party systems
QA, RTL testing and launch1–2 weeksReal devices, throttled connections

Windows assume consistent execution and a market of ordinary competitiveness. Treat them as planning ranges, not commitments.

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.

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.

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.

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.

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.

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.

What to verify first

Rebranding: justified or vanity?

Legitimate triggers include a genuine change in what you sell, a merger, a market you can no longer credibly address, or an identity that fails technically in digital contexts. Boredom is not a trigger. When it is justified, plan the migration seriously: domains, redirects, profiles, signage, documents, email, app listings and directory entries all move together, or the equity you built leaks away during the transition.

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 Saudi market is moving quickly enough that a decision deferred by two quarters is usually a decision made by a competitor instead. Choose the smallest useful version and start.

[ Key Takeaways ]
Guidelines people actually use
Trust signals Saudi buyers look for
Test the big thing, not the button colour
What bilingual website ux actually means in practice
Share

Frequently asked questions

Do we need separate designs for Arabic and English?+

One design system, two directional treatments. Layouts mirror, typography scales differently, and some components need genuinely different behaviour — but it should be a single system, not two projects.

How long does a website project take?+

A focused business site typically runs eight to twelve weeks; a bilingual site with integrations and a CMS runs twelve to twenty. Content readiness is usually the critical path, not development.

WordPress or custom?+

WordPress where content changes often and requirements are standard. Custom where business logic is distinctive or integrations are heavy. The wrong answer is a heavily customised WordPress build imitating custom software.

What actually improves conversion most on Saudi sites?+

In our experience: page speed, visible trust signals, a WhatsApp route to a human, and shorter forms — usually in that order.

Do you work with businesses outside Jeddah and Riyadh?+

Yes. We work across the Kingdom including Makkah, Madinah, Taif and the Eastern Province, and much of the work runs remotely with on-site sessions at the points where they add value.

Keep Reading

All Articles →

Ready to put these ideas to work?

Start a Project →