UI/UX Design for a GCC HR Intelligence SaaS Platform

HRhub is a comprehensive HR platform built to give business leaders, HR professionals, and business owners in the GCC a single, reliable source of HR intelligence. Instead of scattering compensation data, competency frameworks, and learning resources across spreadsheets and disconnected tools, HRhub consolidates them into one searchable product that supports strategic decisions and talent management.

The platform is a "one-stop shop" for the power of HR solutions across the GCC region. It draws on multiple structured data banks — a Compensation & Benefits bank, a Competencies bank, a KPI bank, and a Learning & Development bank — all kept current for the fast-changing regional market. Users search by job title and instantly see the full picture for that role.

Our job was to turn a large, data-heavy framework into a product that feels approachable: clean navigation, a scannable dashboard, and detail views that make complex HR data easy to read, compare, and export.

HR data is dense by nature. A single job role carries qualifications, behavioral and functional competencies, education levels, dozens of KPIs with their own formulas and units, salary benchmarks segmented by nationality group, and curated learning paths. The core design challenge was to present all of this without overwhelming the user.

Three constraints shaped every decision:

Depth without clutter. Each role page needed to expose a lot of structured information while staying calm and readable.

A credit-based model. Searches consume credits, so the interface had to make credit balance and usage visible and predictable, and confirm actions that spend them.

Regional relevance. Data is classified to Saudi Arabia's ISCO08 occupation codes and segmented for GCC nationality groups, so the UI had to surface those distinctions clearly.

Give users a fast, guided path from search to insight for any of 5,000+ job titles.

Make the five HR domains – Competencies, Salary Benchmarking, Job Classification, Performance Management, and Learning & Development – consistent and easy to move between.

Build a scalable design system so the product could grow across web and mobile without visual drift.

Keep the credit economy transparent at every step.

We started in low fidelity to focus on functionality and on solving real user pains before committing to visuals. Wireframing the marketing site, onboarding, dashboard, and each domain view let us settle information hierarchy, flows, and edge cases early – and validate the credit-confirmation pattern before it touched the high-fidelity UI.

The layouts run on an 8-column grid with a 16px gutter and 88px margins, giving the data-rich pages a consistent rhythm and predictable alignment across breakpoints.

To keep a product this large coherent, we defined a reusable system:

Buttons — primary, secondary, disabled, and status variants (including the color-coded "Degrees & Qualifications" style tags).

Icons — a two-state set (active/inactive) covering search, competencies, KPIs, benefits, and navigation.

Cards — the workhorse of the product, used for competencies, education levels, KPI blocks, training programs, and salary segments.

Color palette: a primary set of #00AFD0 (cyan), #FF7C3A (orange), #00A19A (teal), #5B5AA4 (purple), and #4D8480 (sage), balanced by a six-step secondary gray scale for text and surfaces.

Typography: Poppins for display and headings, with Noto Sans and Open Sans handling UI and body text for clean, legible data tables and long-form detail views.

The landing experience leads with a clear value proposition – HR solutions for GCC business leaders – backed by product previews of the dashboard on both desktop and mobile. Feature sections walk through the platform's scale (1,000+ KPIs, 300+ competencies, 5,000+ job titles, 3,000+ learning resources) and each of the five domains, ending in a three-tier pricing table: Free, Professional, and Agency.

Account creation is split into digestible steps – personal details, then organization information (company name, role, size, sector, website) – with a progress indicator and an international phone selector, mirrored for both web and mobile.

The dashboard gives users a visual snapshot of their activity: popular job searches, saved and exported profiles, and remaining-credits status. Context chips (organization sector, organization size) and a prominent credit balance keep the user oriented, and a confirmation modal makes it clear when a search will spend credits.

Once a role is selected, the product opens into consistent, tabbed detail views:

Competencies – degrees and qualifications, minimum and favorable education levels, and top behavioral and functional competencies, each with proficiency levels and expandable detail.

Key Performance Indicators – a card grid of KPIs, each with its intended purpose, formula, and unit, so teams can track and benchmark performance precisely.

Compensation & Benefits – yearly salary data segmented by nationality group (National, Arab, Asian, Europeans & US) across quartiles, with comparative analytics charts and a benefits overview.

Learning & Development – curated top-three training programs, self-study online courses, and recommended readings for each competency.

Job Classification – roles mapped to ISCO08 occupation codes for the Saudi market.

A dedicated history view stores every search so users never lose a role they've viewed, with sorting, a save-list feature, and export options – reinforcing the platform as a working tool rather than a one-time lookup.

The result is a single, coherent HR intelligence product that turns a sprawling data framework into something a business leader can actually use day to day. The design system gives HRhub a consistent visual language across web and mobile and a foundation that scales as new roles and data banks are added, while the transparent credit model keeps usage predictable.

Figma for UI, prototyping, and the design system.

HRhub is a comprehensive HR platform designed to provide HR professional services to Support Business Transformation. HRhub was established to provide a reliable, quality source of data, analysis and practical assistance for HR professionals, in order to support their strategic decisions and talent management. HRhub is an innovative, convenient and efficient HR solution designed to provide HR professionals, business owners and individuals with a reliable source of comprehensive HRM knowledge in five key domains: 1) Competencies; 2) Salary Benchmarking; 3) Job Classification; 4) Perfomance Management; 5) Learning and Development.