Skip to main content
Back

Ministry Sector KPI Dashboard

A multi-screen analytics dashboard tracking poultry, table-egg, and livestock sector KPIs, built with Chart.js, a Saudi regional choropleth, and full BRD requirement traceability.

Role
UI/UX Designer & Front-End Developer
Year
Platform
Web (desktop)
Team
NSG Geospatial Services

Context

Sector analysts and decision-makers at the ministry needed a single view of production, supply, and price indicators across the poultry, table-egg, and livestock sectors. Existing reporting lived in spreadsheets and static exports, with no regional breakdown.

The brief called for a multi-screen Arabic dashboard with charts, tables, and a map of Saudi regions.

Constraints

  • Every screen had to map back to a numbered requirement in the Business Requirements Document, so requirement traceability was a deliverable, not a nice-to-have.
  • The build had to run offline for demonstrations and on restricted networks, which ruled out CDN dependencies and live map tiles.
  • Charting defaults do not suit Arabic content: axis direction, legend order, tooltip alignment, and number formatting all had to be handled deliberately.

Design decisions

  1. [PLACEHOLDER] Decision 1 — replace with the key design decision

    [PLACEHOLDER] Why this option was chosen over the alternatives. To be written by Mohammed; interview material.

    Rejected alternative: [PLACEHOLDER] What was considered and rejected, and why it lost.

  2. [PLACEHOLDER] Decision 2 — replace with the second decision

    [PLACEHOLDER] Reasoning goes here.

    Rejected alternative: [PLACEHOLDER] Rejected alternative goes here.

Outcome

A multi-screen dashboard covering the three sectors, with Chart.js visualisations, a Saudi regional choropleth for geographic comparison, and a traceability matrix linking each component to its BRD requirement.

An offline-capable build that runs from a local folder with no network access.

Retrospective

The traceability matrix paid for itself in review meetings: every question about 'why is this here' had a requirement ID behind it. Next time I would build the chart conventions as a shared library before the first screen, rather than solving them screen by screen.

  • Dashboard
  • Data visualisation
  • Analytics
  • Chart.js
  • GIS
  • Offline-first