DRI — Digital Readiness Index

Overview

The Digital Readiness Index (DRI) is an internal, country-level budget evaluation platform designed for UNESCO policymakers. The tool translates complex economic and infrastructural data into a dynamic 3D environment, allowing users to visualize and calculate the effectiveness of budget allocations across national sectors. I designed and built it end to end as the sole developer — from the concept pitches and 3D interface design to the API, database and deployment.

The Challenge

The initial Software Requirements Specification outlined the need for a “gamified” data visualization tool that calculates budget scores from ten critical inputs. But the client lacked a concrete vision for the look, feel and user experience. The challenge: conceptualize a visual system that makes abstract economic variables intuitive and engaging for policymakers — without oversimplifying the underlying mathematical formulas.

The Solution

After three iterations of pitching and prototyping, I conceptualized and secured approval for a “living city” interface: a 3D city divided into four distinct quadrants, each representing a primary economic pillar. Instead of standard charts, the data inputs manipulate the 3D environment directly — adjusting the budget for the Schools pillar visually scales the educational infrastructure, grounds and buildings, in real time — while Theatre.js-choreographed camera flights carry users between districts.

• Electricity
• Schools
• Multilingual Support
• Teaching Resources

Key Features

Three systems working together turn a raw calculator into a simulation policymakers can actually explore:

• Dynamic data visualization — 10 interconnected inputs, organized into parent and child categories, that visually alter their respective city sectors as users interact.
• Budget simulation tools — interactive sliders for tweaking individual values, plus an AUTO / MANUAL distribution toggle for dynamic budget allocation.
• Algorithmic scoring — a background calculation engine that processes the ten critical inputs into a standardized DRI score between 0.0 and 1.0, an immediate read on a country's budget efficacy.

Technical Highlights

Under the hood, the challenge was keeping an entire animated city, a scoring engine and a dense control panel in lockstep without dropping frames:

• Authored camera work — district-to-district navigation is built as Theatre.js sequences played back programmatically, so every flight through the city feels choreographed rather than free-flown.
• One source of truth — Redux Toolkit holds all ten inputs; the scoring engine and the react-three-fiber scene both subscribe to the same store, so a single slider change updates the math, the panel and the 3D city in the same frame.
• Cheap re-renders — city districts respond to budget changes by scaling and swapping pre-built building variants instead of re-mounting geometry, keeping interaction smooth even during rapid slider scrubbing.
• Full-stack delivery — a Node.js/Express API with MongoDB persists country profiles and saved simulations behind the WebGL frontend.

The Outcome

The project was successfully delivered and deployed as an internal UNESCO tool. By transforming a raw data calculator into a tangible, gamified 3D environment, the platform bridged the gap between complex economic formulas and accessible, actionable insight for policymakers. (As this is a confidential internal tool, most visual assets are protected under NDA.)