1. Project snapshot
Gulf Worker is a recruitment portal that connects expatriate talent with employers across the GCC. The responsive web‑and‑mobile experience offers advanced search filters, rich profiles and an employer dashboard, all designed to streamline hiring and boost engagement.
2. Goals & success metrics
- Workforce integration — improved conditions for foreign workers via skills programmes and cultural‑sensitivity training.
- KPIs: completed job placements, discovery searches, applications, repeat visits.
3. Core problem
Low engagement stemmed from a confusing interface, unverified vacancies and language barriers that excluded non‑native speakers.
4. Solution highlights
- UI overhaul with clear navigation and powerful filters.
- Listing‑verification workflow to build trust.
- Multilingual support for broader access.
5. Design process
| Phase | Key activities |
|---|---|
| Research & Empathy | Stakeholder interviews, competitor scan, empathy maps to surface user pain points. |
| User Flow & Wireframing | Journeys mapped; low‑fi wireframes defined structure of critical screens. |
| Visual Design | High‑fi UI crafted to match brand and accessibility best practice. |
| Prototyping & Testing | Interactive prototypes validated with real users; feedback loop for refinement. |
| Final Handoff | Dev‑ready specs, assets and style guide delivered for smooth build‑out. |
6. Insight‑driven questions
Discovery sessions homed in on workflows, pain points, auth/privacy needs, third‑party integrations, localisation and scalability.
7. Empathy map highlights
- Thinks: “Will this site actually solve my problem?”
- Says: “I just want something simple and fast.”
- Does: Skims pages, clicks around; bounces if confused.
- Feels: Frustrated by complexity yet hopeful for quick results.
8. Technology stack
| Layer | Implementation |
|---|---|
| Frontend | React JS + Tailwind CSS; shared components web & mobile. |
| Backend | Node JS & Express REST APIs for auth, listings, profiles. |
| Database | MongoDB for performant job & user queries. |
| Admin panel | Role‑based dashboard for recruiters, admins, workers. |
| Responsive strategy | Mobile‑first with full breakpoint coverage. |
9. Visual language
- Typography: Poppins — Regular, Medium, Semi‑Bold, Bold; hierarchy 32 px H1 → 10 px overline.
- Palette: Primary blues #085BD7 → #5EBFF5; neutrals #F2F4FA, #03091D, #FFFFFF.
- Grid: 1440 px desktop (12 × 120 px cols, 24 px gutters) • 375 px mobile.
10. Outcome & next steps
The redesign is set to raise verified‑listing count, increase application conversions and shorten time‑to‑hire. Post‑launch analytics will benchmark placements and engagement against baseline KPIs.