RHC Employee Portal

An Arabic-first employee portal for 30,000 Royal Hashemite Court staff.

Government · Web portal · Jordan

·

Royal Hashemite Court

Scroll to explore

var(--variable-lVkmgb23s)

RHC Employee Portal

An Arabic-first employee portal for 30,000 Royal Hashemite Court staff.

Government · Web portal · Jordan

·

Royal Hashemite Court

Scroll to explore

var(--variable-lVkmgb23s)

Scroll to explore

RHC Employee Portal

An Arabic-first employee portal for 30,000 Royal Hashemite Court staff.

Government · Web portal · Jordan

·

Royal Hashemite Court

var(--variable-lVkmgb23s)

RHC Employee Portal

An Arabic-first employee portal for 30,000 Royal Hashemite Court staff.

Government · Web portal · Jordan

·

Royal Hashemite Court

Scroll to explore

var(--variable-lVkmgb23s)

PROJECT OVERVIEW

CLIENT

Royal Hashemite Court

MY ROLE

Design Lead, via Plexable

SCOPE

Research, the full Arabic interface for ten sections, prototype testing and the design system behind it.

VALIDATION

Prototype testing with RHC employees, plus figures RHC reported after launch.

TIMELINE

November 2023 to August 2024

TEAM

Delivered through Plexable with the Royal Hashemite Court team. The interviews and the prototype tests were run as shared work.

The context

Leave, travel and other everyday requests run through an internal portal at the Royal Hashemite Court, and staff open it daily. Many had learned it on their own or from colleagues.

It serves 30,000 staff. The brief had four parts. Show each person what needs their action, keep personal and work requests apart, report every request's status, and lead in Arabic.

My responsibility

Our organising idea was the request. Each screen answers one of three questions: what needs my action, what did I ask for, and where has it reached.

A written list of fixes came out of the interviews, and the three questions decided where each fix landed.

Three pillars carried the work: Arabic first, action before information, and two sides of one request. Each was written as a plain sentence, so any screen could be checked against it.

When a screen and a pillar disagreed, the pillar decided. That is what kept the home page from filling back up.

01

What I owned

The interface decisions: what an employee sees first on opening the portal, how far a request travels before it needs a person, and which of their own records stay one tap away.

01

What I owned

The interface decisions: what an employee sees first on opening the portal, how far a request travels before it needs a person, and which of their own records stay one tap away.

02

How I led

Testing and the design system came last on purpose. Tokens and component states were only fixed once the screens they describe existed.

02

How I led

Testing and the design system came last on purpose. Tokens and component states were only fixed once the screens they describe existed.

CONSTRAINTS & TRADE-OFFS

This was a working tool with daily users, not a new product. The redesign had to reorganise what was already there.

Arabic could not be a translation layer either. Mirroring an English design would leave Arabic reading as the exception, so Arabic set the layout.

01

The constraint

The old home page repeated itself. The same information appeared in more than one place, and staff called it cluttered.

01

The constraint

The old home page repeated itself. The same information appeared in more than one place, and staff called it cluttered.

02

The trade-off

Something had to leave the first screen, and it was reporting. Status and detail now sit on the request, which costs a click and buys a home page that only asks for decisions.

02

The trade-off

Something had to leave the first screen, and it was reporting. Status and detail now sit on the request, which costs a click and buys a home page that only asks for decisions.

● RESEARCH & CONTEXT

What staff told us

Staff told us two things that changed the structure, not the styling. Personal and work requests sat in one list, with some field labels that were unclear. And where a request stood was something they found out by email.

Neither was a wording problem. Both were about where information lives, so both became structure decisions.

● PRODUCT DECISIONS

The status palette

In the palette, status comes first. Green, amber and red say where a request stands.

Blue #0A77FF marks what you can act on, and soft greys hold the surfaces behind it, so one color does the pointing.

01

01 Research

Seven interviews with staff in different roles, a guide in English and Arabic, three personas and an empathy map.

01

01 Research

Seven interviews with staff in different roles, a guide in English and Arabic, three personas and an empathy map.

02

02 Interface

Wireframes, flows and final screens for the home page, services, requests, tasks, profile and the team calendar.

02

02 Interface

Wireframes, flows and final screens for the home page, services, requests, tasks, profile and the team calendar.

03

03 Testing and design system

Prototype tests with four RHC employees, then a design system of tokens and component states.

03

03 Testing and design system

Prototype tests with four RHC employees, then a design system of tokens and component states.

● PROCESS & EVIDENCE

What the sessions proved is narrow and real: every task set in them was completed.

That is the hard evidence from the design stage. It says the flows can be followed. It does not say they are the shortest ones possible.

01.

Arabic first

Every screen was laid out right to left in Arabic, with a language switch in the header.

04.

Request and follow up

Staff pick a service, fill in a short step-by-step form for themselves or a colleague, then see who is working on it.

02.

Action before information

The home page puts the tasks that need a decision next to quick links for new requests and the ones in progress.

05.

Tasks and the team calendar

A task list with status tags and filters, and a calendar that shows managers who on the team is on leave.

03.

Two sides of one request

The person who asks and the staff who handle the booking each see their own steps and actions.

06.

Light and dark

The color tokens come in light and dark values, and buttons, fields and menus each have their own states.

01.

Arabic first

Every screen was laid out right to left in Arabic, with a language switch in the header.

03.

Two sides of one request

The person who asks and the staff who handle the booking each see their own steps and actions.

05.

Tasks and the team calendar

A task list with status tags and filters, and a calendar that shows managers who on the team is on leave.

02.

Action before information

The home page puts the tasks that need a decision next to quick links for new requests and the ones in progress.

04.

Request and follow up

Staff pick a service, fill in a short step-by-step form for themselves or a colleague, then see who is working on it.

06.

Light and dark

The color tokens come in light and dark values, and buttons, fields and menus each have their own states.

01.

Arabic first

Every screen was laid out right to left in Arabic, with a language switch in the header.

02.

Action before information

The home page puts the tasks that need a decision next to quick links for new requests and the ones in progress.

03.

Two sides of one request

The person who asks and the staff who handle the booking each see their own steps and actions.

04.

Request and follow up

Staff pick a service, fill in a short step-by-step form for themselves or a colleague, then see who is working on it.

05.

Tasks and the team calendar

A task list with status tags and filters, and a calendar that shows managers who on the team is on leave.

06.

Light and dark

The color tokens come in light and dark values, and buttons, fields and menus each have their own states.

01.

Arabic first

Every screen was laid out right to left in Arabic, with a language switch in the header.

03.

Two sides of one request

The person who asks and the staff who handle the booking each see their own steps and actions.

05.

Tasks and the team calendar

A task list with status tags and filters, and a calendar that shows managers who on the team is on leave.

02.

Action before information

The home page puts the tasks that need a decision next to quick links for new requests and the ones in progress.

04.

Request and follow up

Staff pick a service, fill in a short step-by-step form for themselves or a colleague, then see who is working on it.

06.

Light and dark

The color tokens come in light and dark values, and buttons, fields and menus each have their own states.

OUTCOMES

Fewer tickets, more work done

After the redesigned portal launched, RHC reported 90% fewer support tickets and 35% more tasks completed per employee a day. Both figures are the court’s own, counted once the portal was in daily use.

7

Interviews

The sessions that set the structure, held in November 2023.

10

Sections

Counted across the portal, from the page you land on to the team calendar.

4

Test sessions

Held in July and August 2024, after the final screens were drawn.

WHAT I’D IMPROVE

What I would change

Timing each task is the change I would make first, and four people is a thin sample to judge a flow on.

Status now lives in the portal, but nobody checked whether people stopped going to their inbox for it.

WHAT I LEARNED

What I took from it

Arabic first is a layout decision for a day. After that it is a content decision about label length and where a status word sits.

An internal tool is judged by how often someone asks for help. That is why I read the ticket drop first.

HIRING A HEAD OF PRODUCT DESIGN?