The Challenge
Government institutions in MENA operate within a complex digital mandate: serve Arabic-speaking citizens as the primary audience, while communicating in English to international partners, NGOs, and diplomatic contacts. Most institutional portals treat this bilingual requirement as a translation problem, producing English content and reverse-engineering Arabic versions that read poorly in RTL layouts.
This entity's existing site had been built by a regional web agency that had prioritised design aesthetics over function. The result was a visually polished portal that failed basic accessibility tests, had no mobile optimisation, and loaded in 8+ seconds on the mobile connections most citizens were using. The Arabic version was essentially an afterthought, the same layout, with right-to-left text crammed into a left-to-right design system.
The brief required a complete rebuild: 40+ pages, true bilingual architecture with content designed in both languages simultaneously, WCAG 2.1 AA compliance, sub-3-second load times on mobile, and a content management system that empowered the internal team to update content in both languages without developer support.
"A government portal that is not accessible is a broken promise. Every citizen excluded by poor design is a failure of the institution it represents."
The Approach
Bilingual Architecture First
The site architecture was designed simultaneously in Arabic and English, not sequentially. Information architecture, navigation labels, page titles, and content priorities were developed in both languages from day one, with a native Arabic copywriter involved throughout. The RTL layout was not a mirror of the LTR layout; it was a genuinely Arabic-native design that shared underlying components.
WCAG 2.1 AA Compliance Framework
Accessibility was built into every design decision: colour contrast ratios verified at 4.5:1 minimum across all text/background combinations, all interactive elements keyboard-navigable with visible focus states, ARIA labels on every icon button and complex widget, skip-to-content links, logical heading hierarchies, and descriptive alt text guidelines provided to the content team. Automated and manual WCAG audits were conducted before launch.
Mobile-First Performance Build
Given that 74% of the target audience accessed government services via mobile, the build was mobile-first by constraint rather than convention. Page weight was kept below 400KB for above-fold content, images were lazy-loaded with priority hints, fonts were self-hosted and preloaded, and the CMS was configured to enforce image compression policies. Average LCP on mobile improved from 8.2s to 2.1s.
40+ Page Content Architecture
The full portal covered: institutional overview, mandate and history, seven programme areas, resource library, news and announcements, events calendar, contact directory, open data portal, partner organisation listings, and citizen service guides. Each section was mapped against user needs research, citizens seeking services, NGOs seeking partnership information, and researchers seeking data and reports.
CMS Training & Editorial Handover
A structured handover programme trained the entity's communications team to manage all content updates independently, in both Arabic and English. Custom CMS workflows were built to enforce content quality standards: mandatory alt text, accessibility checklist completion before publishing, and automatic broken link detection. The team was equipped to maintain the portal to the standards it was built to without any developer dependency.
Results
AA
WCAG 2.1 Level
40+
Pages Built
2.1s
Mobile LCP
+63%
Task Completion
Accessibility & Performance Scores, Before vs After
Traffic by Language (Post-Launch)
Monthly Sessions, 6 Months Post-Launch
“The portal Rima delivered is something we are proud to present to international partners and citizens alike. The Arabic experience is genuinely first-class, not a translation of an English site. Our team manages all content updates independently, which was a critical requirement.”
Key Deliverables
Full bilingual site architecture (AR/EN simultaneously)
40+ pages designed, built, and content-populated
WCAG 2.1 AA compliance, automated & manual audit
LCP 2.1s mobile, full performance optimisation
GovernmentService, WebSite & BreadcrumbList schema
hreflang implementation for AR/EN language targeting
Custom CMS with accessibility enforcement workflows
Communications team training, AR/EN content management
Institutional Digital Projects
Build a portal your institution is proud of
Accessible, bilingual, built to last, and maintained by your team.
Related Case Studies