Case study
Making RTA's top tasks take one screen, in two languages
RTA's website carries hundreds of services, but most visits are for a handful: paying for parking, checking a nol card, paying fines, planning a trip. I redesigned the slice that serves those people, end to end, in English and Arabic, as an unofficial concept.
Ali Al-Janabi · research, IA, interaction and visual design, front-end build
- links on the home page
- 254
- links on the home page
- page height on a phone, about 8 screens
- 6,717 px
- page height on a phone, about 8 screens
- links reading “click here”, “read more” or “learn more”
- 19
- links reading “click here”, “read more” or “learn more”
- fixed buttons floating over content on mobile
- 5
- fixed buttons floating over content on mobile
Measured on rta.ae home page, 19 Oct 2026, headless Chrome at 390 × 844
What's wrong today
- 01
Promotion comes first, tasks second
On a phone the first screen is a carousel about a plate-number auction. The quick links to fines and nol balance start below it.
- 02
“Most popular” mixes daily and rare tasks
Pay Vehicle Fines sits next to NOC for Works Within the Rail Right-of-Way and a permit for over-weight vehicles. One list serves commuters and contractors equally, so it serves neither well.
- 03
The common task is buried in the rare ones
The parking services page lists more than 25 services. Topping up a parking account sits among reservations for banks, mosques, hotels and contracting companies.
- 04
One task, several sites
Paying fines opens a different domain. Managing a nol e-wallet asks you to log in to a separate portal. Each hop changes layout, language state and trust signals.
- 05
Links that don't say where they go
Nineteen links on the home page read as some form of “click here”. A screen reader user browsing by links hears the same phrase again and again.
- 06
Arabic is solid, with small cracks
The Arabic site sets lang and direction correctly, which many government sites don't. But headlines use decorative tatweel (أمـــان لـهـم), which breaks search and screen-reader pronunciation.
Principles
- 1Start from the task, not the org chart.
- 2Show the price before the pay button, and keep it visible.
- 3Design every state. Errors say whose fault it is and what to do next.
- 4One product in two languages. Arabic is designed, not translated last.
- 5Signage, not marketing. Colour carries information, like the line colours on a metro map.
Information architecture, before and after
Today: by audience and department
- Home
- Driver and Car Owner
- Parking › Parking Services (25+)
- Public Transport
- nol › e-wallet (separate login)
- Business and Corporate
- People of Determination
- Services catalogue › service-details?serviceId=521
- Fines › opens another domain
Concept: by task, then by life moment
- Home: one search + 8 top tasks
- Flow: pay parking · nol · fines · plan a trip
- Services, by life moment
- Getting around · Parking · Driving
- Owning a vehicle · Business and permits
- Service guide: needs, fees, steps, time, channels
- Start › the same flow, same domain
Key decisions
A search that understands codes
Typing “365C”, “top up nol 50” or “Union to Dubai Marina” opens the right flow with the zone, amount or stations already filled in. People copy these from signs and cards, so the search treats them as first-class input.
Guest first, sign-in optional
Balance, fines and parking work with a card number or plate. Signing in should add history and saved vehicles, not stand between someone and a AED 4 parking payment.
Ask about the driver only when it matters
The black points declaration appears only when a selected fine carries points. Deselect that fine and the question goes away.
Western digits for codes in Arabic
Plates, zone codes, card numbers and SMS commands use Western digits on the street, so the Arabic UI does too. Each code is isolated as left-to-right so “365C” never reorders inside an Arabic sentence.
Mirror the interface, not the world
Layout, arrows and progress mirror in Arabic. The network schematic, plates and clocks don't. Flipping the map would put Deira on the wrong side of the city.
Honest data
The status board says “sample data, not live” on its face. Fares use RTA's published nol bands; anything invented is labelled where it appears and listed below.
Design tokens
One TypeScript file defines every value. The root layout writes them out as CSS variables, Tailwind reads those, and this page renders straight from the same file. Contrast is computed, not eyeballed.
--c-paper
#F4F3EF
--c-surface
#FFFFFF
--c-sunken
#EAE8E2
--c-ink
#15181B
--c-ink2
#3C4248
--c-muted
#5A6168
--c-line
#D9D6CE
--c-line-strong
#8A9096
--c-signage
#1B1F23
--c-focus
#005FCC
--c-danger
#B0122A
--c-success
#1D7330
Line colours
--line-red
#E21836 · text #B0122A
7.1:1
--line-green
#3FA535 · text #1D7330
5.9:1
--line-tram
#0089A8 · text #006A82
6.2:1
--line-bus
#C76A00 · text #8A4A00
6.9:1
--line-marine
#1F5FA8 · text #1F5FA8
6.4:1
Contrast (WCAG AA)
| Use | Sample | Ratio | Needs |
|---|---|---|---|
| Body text | Text 365C | 16.1:1 | 4.5:1 |
| Secondary text | Text 365C | 9.2:1 | 4.5:1 |
| Hints, metadata | Text 365C | 6.3:1 | 4.5:1 |
| Primary button | Text 365C | 17.8:1 | 4.5:1 |
| Status board detail | Text 365C | 8.5:1 | 4.5:1 |
| Error text | Text 365C | 6.1:1 | 4.5:1 |
| Success text | Text 365C | 5.1:1 | 4.5:1 |
| Warning text | Text 365C | 6.3:1 | 4.5:1 |
| Input borders (non-text) | Text 365C | 3.2:1 | 3:1 |
Type
IBM Plex Sans and IBM Plex Sans Arabic were drawn as one family, so mixed lines keep the same weight and rhythm. Plex Mono sets codes and plates.
radius sm 4px · md 6px · lg 10px · pill 999px
What I'd do next
- Test the four flows with ten residents, five per language, on their own phones.
- Replace sample status with RTA open data and show its age honestly.
- Add UAE PASS sign-in for saved vehicles, cards and receipts.
- Have a native Arabic editor review all copy before anything ships.
Data notes
What is real, what is paraphrased and what is invented in this concept.
- From rta.aenol fare bands (Silver AED 3 / 5 / 7.50, Gold 6 / 10 / 15, Red ticket 4 / 6 / 8.50) and travel pass prices, from RTA's nol fares page at time of research.
- From rta.aeFine payment steps, including declaring the driver for black points, paraphrased from the Pay Vehicle Fines service page. The parking service list and the 121st plate auction date are from rta.ae.
- Indicativenol card prices (AED 25 Silver or Gold, AED 70 Blue, each including credit) and the AED 7.50 minimum balance for metro entry are commonly published figures. Verify before relying on them.
- IndicativeFine amounts (AED 300 for up to 20 km/h over, AED 800 and 4 black points for phone use, AED 150 for unpaid parking) follow commonly published UAE schedules. Dates, places and IDs are invented.
- SampleParking tariffs, paid hours, zone areas and the SMS format are sample values modelled on older published tariffs. Public parking is now run by Parkin, with current pricing that includes peak hours.
- SampleNetwork: station names follow public lists but change under naming-rights deals. Positions are schematic, the fare zone map is simplified, and times are estimated at 2.2 min per metro stop, 3 min per tram stop and 6 min per change. Tram line colour is approximated.
- SampleNetwork status, nol cards, plates, fines, references and payment outcomes are invented. No request leaves the browser.
- From rta.aeSalik is operated by Salik Company with time-based pricing; this concept shows no Salik prices. App names (RTA Dubai, S'hail, nol Pay) are RTA's.