Sovereign Investment Country Dashboard

A three-tier country intelligence dashboard for a sovereign investor: external country picture → internal exposure picture → actionable engagement plays. Designed for principal-level scrutiny.

1. The problem

A sovereign investment institution needed a country-level dashboard consolidating assessment metrics alongside opportunities and risks, as part of a broader engagement covering 10–15 priority countries. The dashboard was one deliverable inside a larger programme - a centralised engagement playbook meant to guide how the institution engages, coordinates, and responds to risk across markets.

The genuine difficulty was not technical. It was information architecture under executive constraint: a country picture involves macro indicators, domestic and international policy priorities, strategic-resource dependencies, regulatory landscape, competitive activity from other states, existing exposures, ongoing investments, relationships, and an action layer - and all of it has to be navigable by a principal in minutes, not explored over an afternoon.

Get the hierarchy wrong and you produce either a wall of numbers or an oversimplified surface that a sophisticated user immediately distrusts.

2. The three-tier architecture

I structured the dashboard as three progressively narrowing panes, which became the organising decision for the whole build:

Tier 1 - Country View (the external picture)

• Macro indicators - FX spreads, country risk premium, linked trade flows, foreign direct investment
• Domestic priorities - public-private partnerships, privatisation programmes
• International priorities - outbound investment posture, inbound FDI attraction
• Strategic-resource reliance - critical minerals, food security
• Government and regulatory landscape - peer sovereign funds, pension funds, other stakeholders
• Competitive activity - how other states are positioning in the same market
• Country presence in the home market and wider region

Tier 2 - Institutional View (the internal picture)

Current exposures, status of ongoing international investments, portfolio needs and opportunities, and relationship mapping.

Tier 3 - Country Playbook (the action layer)

• Play identification - investment opportunities across strategic priorities, commercial investments, and the government-to-government agenda; inward FDI attraction; implications for existing exposures
• Play detailing - direct investments, funds, partnerships and collaborations
• Play activation - stakeholder management plan, operating model and governance, risk-management actions

The three tiers answer three different questions in order - what is true about this market? where do we already stand? what do we do? - and that sequencing is what makes a dense dataset tractable for an executive.

3. Build and engineering

Frontend. React 19 + Vite + TypeScript with Tailwind v4 and shadcn/Base UI components. Custom visualisation work included a world map view, an ecosystem/relationship view, a macroeconomic profile with trade as a hero metric, and bespoke primitives - sparklines, year-on-year delta pills, and fit-score rings - built because off-the-shelf chart components don’t carry the density-to-legibility ratio an executive surface needs.

Deployment. Azure Static Web Apps with single-tenant enterprise identity, so access is restricted to the organisation without building an auth layer.

Iteration under review. The build went through six versions, with successive rounds rebuilding the world map and ecosystem views in response to reviewer feedback, and restructuring toward a genuinely three-tier executive architecture rather than a flat metric grid. The dashboard was reviewed at principal level and iterated against that feedback directly.

Component reuse as a deliberate strategy. The design-system layer, deployment pipeline, auth pattern, and card/KPI primitives from this build were carried into subsequent dashboards - while domain types, calculations, and visualisations were deliberately rebuilt each time, because a strategy-objective model is genuinely not an asset-portfolio model and pretending otherwise produces a worse product. Knowing which layers to reuse and which to rebuild is the reusable skill.

4. What this is, and what it isn’t

It is a mockup, and a large one. ~22,300 lines across 113 files, roughly a dozen top-level screens plus ten detail pages (GDP, ESG, economic, trade, legal, population, geopolitical deep-dives), and about twenty bespoke chart components - Mekko, tariff heatmap, age pyramid, rank-slope, credit-rating timeline among them. The engineering weight sits in chart layout mathematics and information hierarchy, not in domain computation.

The data is illustrative, and labelled as such in the source. Data modules are marked as mock and illustrative, including a small generator that produces plausible sparkline curves. No real institutional figures are present - which is correct for a pre-engagement mockup whose purpose was to establish what views should exist before any data pipeline was commissioned.

There is a scripted chat panel, not a working assistant.

Two things worth being straight about: there are no tests, and there is no deployment configuration in the repository (deployment was done to cloud static hosting outside it). For a client-facing mockup iterated at speed under review, absent tests is a defensible trade - but it is a gap, not an oversight I’d defend as ideal.

The value delivered here was the information architecture and the visual vocabulary, validated with senior stakeholders before anyone built a backend. Judged as a mockup it is strong; judged as a product it would need a data layer, tests, and auth hardening.

5. What I’d highlight

• Information architecture as the primary deliverable. The three-tier structure - external, internal, action - is the actual intellectual contribution; the code implements it.
• Designing for principal-level scrutiny, where a sophisticated user rejects both density and oversimplification.
• Custom visualisation primitives built where standard components couldn’t carry the required information density.
• Sustained iteration against senior review across six versions without losing structural coherence.
• Disciplined reuse - infrastructure and design system carried forward, domain logic rebuilt.

6. Skills demonstrated

executive information architecture · data-dense dashboard design · React 19 / TypeScript · custom data visualisation · geospatial and relationship views · design-system development · Azure Static Web Apps · enterprise single-tenant authentication · iterative delivery under senior stakeholder review