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
[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.
[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