The Digital Services Gateway moves a diplomatic mission's consular work online: passport renewal, document attestation, and other official requests, each handled as a guided, ticket-backed service order — fully in Arabic, on both web and app.
The challenge
Consular services are bureaucratic by nature: every request has its own rules, documents, and conditions, and citizens abroad often face the choice of an in-person visit or an opaque email thread. The portal had to make that process self-serve without losing the rigor — present each service clearly, state its terms up front, collect the right documents, and give the applicant a tracked request they can follow.
Two constraints shaped everything. The product is Arabic-first, so the entire layout, flow, and components are designed right-to-left. And it had to work as both a public website (discover services, read news) and a focused application for placing and tracking orders.
The approach
I structured the gateway around a catalog of services and a single, repeatable service-order flow. Browse or search the catalog, open a service, read its terms, then step through data entry, document upload, and review before submitting. A queue ticket ties the request to a trackable number, so "I sent it and heard nothing" becomes "request 125463, in progress".
The same service model powers two surfaces from one design system: a public website that markets the mission and its services, and the application where the actual work happens — consistent components, RTL throughout.
The service-order flow
Each request follows the same spine, so a citizen learns it once:
- Discover — a searchable catalog of consular services, each with a clear summary.
- Terms — the conditions and required documents stated before any data entry.
- Apply — guided steps for applicant data and document upload.
- Review & submit — confirm everything, then receive a tracked ticket.
Try the prototypes
The real Figma flows — the application and the public website.
Selected screens
Across the portal — website, service catalog, and the order flow. Drag to scrub, click any screen to enlarge.
The result
A self-serve consular portal that turns scattered, in-person bureaucracy into a clear online flow: a searchable catalog, terms stated up front, document capture in-flow, and a tracked ticket per request — Arabic-first, on web and app, from one shared design system.
- RTL by design
- Arabic-first
- One service system
- Web + app
- Trackable requests
- Ticketed
- Every consular service
- 1 catalog
