Northwind Commerce · demo · 2026 · React · Recharts · Vite

Northwind FP&A

A financial planning portal a director reads in 10 seconds.

Northwind FP&A

An FP&A portal with executive summary, budget vs actual, forecast, scenarios, profitability and an AI analyst. Built as a business case for a Senior Financial Analyst role.

$11.4M
Revenue (vs $6.2M budget)
+83.2%
Variance vs Budget
ES / EN
Bilingual

Context

A portfolio demo that had to prove two things at once: FP&A command and product judgment.

The design problem

Financial data is dense by nature. A director should read the state of the business at a glance, without giving up the depth an analyst needs to defend every number.

Design decisions

01

KPI cards with a gradient top accent bar (green → blue)

The color bar separates revenue from margins from variances without extra lines or boxes.

02

Actual vs Budget vs Forecast in one long time series

The comparison IS the FP&A product. One chart anchors the whole narrative.

03

Bilingual ES / EN toggle

A case for an international role is defended in two languages.

Visual system

  • Dark navy theme; tabular typography for figures
  • Cards with a gradient top border as a section code
  • Fixed sidebar + scrollable work area

The highlight

Financial-dashboard density without noise: hierarchy is carried by accent color and space, not borders.

More work