Case study · Education

A school site parents can navigate, in two languages.

A bilingual school website built so the Arabic edition is the equal of the English one.
Start a projectAll case studies
Client
DIYAFAH
Sector
Education
What we built
A bilingual school website, English and Arabic, built right to left from the start.
Platform
Strapi CMS with two full language editions.

In short

Most bilingual builds treat Arabic as a translation layer bolted on at the end, which shows up as broken layouts and stranded English. This was built right to left from the first commit, with its own typography and its own content, so an Arabic visitor gets the designed experience rather than a mirrored one.

The brief

The Arabic edition had to be the equal of the English one.

Most bilingual builds treat Arabic as a translation layer bolted on at the end. It shows: broken layouts, stranded English, a mirrored page nobody designed.

What had to be true

  • Right to left from the first commit

    Layout, spacing and reading order designed for Arabic, not flipped from English afterwards.

  • Its own typography

    An Arabic type system chosen and set for Arabic, with sizes and leading that fit the script.

  • Its own content

    Written for an Arabic reader, not translated word for word from the English page.

  • Editable in both languages

    The team updates either edition without a developer and without breaking the other.

What we did

We built two editions of one site, not one site and a translation.

Every component was designed in both directions before it was built once.
01

Designed in both directions

Each screen was laid out for Arabic and for English before build, so the right to left version is the designed one, not the mirrored one.

No layout was fixed after the fact.

02

Two type systems

Arabic and Latin faces chosen to sit together, each set at its own sizes and leading.

Arabic is not Latin type pointed the other way.

03

Content as a first class edition

The CMS holds two editions with their own copy, images and structure, edited independently.

Neither language is the fallback.

The work

Pictures from the build.

A father and daughter browsing the Diyafah International School website on a laptop
A father and daughter browsing the Diyafah International School website on a laptop
DIYAFAH: A parent on the school site
DIYAFAH: A parent on the school site
A parent reading the Al Diyafah High School page on a tablet
A parent reading the Al Diyafah High School page on a tablet
Parents comparing the Diyafah fee structure page on a laptop
Parents comparing the Diyafah fee structure page on a laptop
The Diyafah leadership team section open on a laptop beside a school bag
The Diyafah leadership team section open on a laptop beside a school bag

What changed

An Arabic visitor gets the designed experience.

What equal actually means here.

399+

conversions recorded since the new website launched

2

full language editions, each with its own content and type

RTL

from the first commit, not a mirror applied at the end

Technology

What this was built with.

Chosen to fit the problem and the team who owns it now.

01Web

  • Strapi
  • React
  • Next.js
  • TypeScript
  • Node.js

02Marketing and tracking

  • GA4
  • Google Tag Manager
  • Search Console
  • Meta Pixel
  • Looker Studio

More case studies

Modon HoldingA listed developer's platform built to survive an investor relations audit.The Gorgeous FlowerA same day florist whose checkout takes a delivery date and window before payment.Star CinemasTicketing across 100+ screens, rebuilt around the seat map.

Tell us what the business needs. We will tell you what to build first.

Schedule a free consultation and get a written recommendation, with costs, before you commit to anything.

Get in touch

PROVEN RESULTS

4.7 / 5verified reviews on Google