HumanBuiltAI
Aon/Product design/Data visualization/2018

Rethinking how we see risk.

For Aon, I reimagined a data-heavy climate risk tool as a modern, visual experience, with all the complexity underneath kept intact.

Climate models are complicated enough. The interface didn’t need to be.

Role
Experience Designer / Front-End Developer
Focus
Data visualization, interaction design, prototyping, AI-assisted exploration
Deliverables
Product concept, wireframes, UI system, interactive states
Platform
Desktop web
Built with
Designed in Figma, then built as a React.js and three.js prototype

The original work is internal and proprietary to Aon. The visuals and prototype on this page are recreations.

The short version

1-minute read · full story below
ProblemA climate-risk tool with plenty of data and little breathing room. People had to decode the interface before they could understand a site’s risk.
ApproachOrganized the screen around six questions people bring to a site, made the map the interface, turned time (2026–2036) into a control, and added a conversational layer for asking the data.
ResultA working React.js and three.js prototype that moves from the national pattern to one site’s score, drivers and trend without leaving the view.
Try the live prototype See the AI layer Jump to the final experience
Horizon composite risk view, light theme
Composite risk view · Light themeFig. 01
02 — The problem

A lot of important information. Not a lot of breathing room.

Climate risk has to say a lot at once: where, which hazard, how bad, by when, why, and which way it’s heading.

The problem wasn’t a lack of data.

It was helping someone understand what mattered without making them decode the interface first.

COMPOSITE · 203674/100HIGH
WIND88SEVERE
FLOOD81SEVERE
WATER EROSION46MODERATE
CHANGE SINCE 2026+1210-YEAR OUTLOOK
SELECTED SITEMiami, FL25.76°N, 80.19°W
Storm-surge inundation ~9.1 ft @ 1-in-100Design gust 180 mph (3-sec)13 days/yr above 2 in. rainfall~40 km gridhorizon [2026, 2031, 2036]3 of 5 shown
SAMPLE DATA — NOT FOR UNDERWRITING
03 — A little time travel

Before we move forward, let’s go backwards.

To pressure-test the direction, I imagined what the same information might have looked like in an earlier generation of enterprise software: tabs, tables, nested controls, tiny charts and just enough gray chrome to make Windows 95 proud.

NOTE — A speculative, imagined legacy interface. Aon never shipped this. Thankfully, we’ve moved on from Windows 95.

My Risk
Reports
Recycle Bin
Imagined Windows 95-era version of the tool
Start Aon - Site Climate Risk Explorer 4:12 PM
An intentionally exaggerated trip back in time.

The data wasn’t the problem.
Finding the story inside it was.

04 — Information hierarchy

Start with the questions, not the pixels.

I organized the interface around the six questions people bring to a site.

Q1Where is the site?
Q2What kind of risk am I looking at?
Q3How severe is it?
Q4How is it changing?
Q5What is driving the score?
Q6What should I investigate next?
Concept sketches, low-fi, mid-fi and interaction wireframes
Structure before styling — progressively defining hierarchy, states and interaction.Fig. 04
Hand-sketched interface on an iPad, outdoors
MAP = context
PANEL = meaning
TIME = change
ASK = exploration
05 — Sketching the experience

Before it became a system, it was a sketch.

The layout settled on a simple pairing: geography on one side, explanation on the other. The map gives context. The panel says what it means.

Full annotated hand-drawn concept
the whole idea, on one page
06 — The core idea

Make the map
the interface.

Instead of hopping between reports and tables, people move through risk spatially, from the national picture to one site without losing their place.

Finished dark-mode interface
1 2 3 4
01Interactive geographyPan, zoom and click straight into a site.
02Color-coded severityCell color and size both scale with intensity.
03Site-level detailScore, trend and drivers in the panel.
04Time horizon2026, 2031, 2036 — one click apart.
07 — Visual language

Color has a job.

Risk data has never been accused of being charming, and it shouldn’t be alarming either. The palette needed enough contrast to show patterns across thousands of cells, and enough restraint to carry labels, charts and two themes.

0–19Very low 20–39Low 40–59Moderate 60–79High 80–100Severe

The same risk language carries through map cells, scores, bars, badges, tooltips and comparison states.

Map cellsScoresBarsBadgesTooltipsComparison
Component and system exploration
08 — National to local

Zoom out for the pattern. Zoom in for the reason.

At the national level, the map reveals broad patterns. Moving into a hazard layer changes the question from ‘Where is risk concentrated?’ to ‘What is driving risk here?’

Composite national view
AComposite — where is risk concentrated?
Flood hazard, regional focus
BHazard layer — what is driving risk here?
Composite viewHazard-specific viewSite selectionMap tooltipRisk scoreSpecific drivers
09 — Time as interface

Risk isn’t a snapshot.

Time became a control instead of a footnote. Rather than digging projections out of a report, people compare a location across 2026, 2031 and 2036.

62→68→74
202620312036
COMPOSITE SCORE, MIAMI · SAMPLE DATA, NOT A FORECAST
Time horizon comparison view
Horizon comparison · same site, three points in timeFig. 09
Search state
10 — Search

Get me to the place I care about.

A map is great for discovery. Search is better when you already know where you’re going, so nobody has to pan across a continent to find one building.

11 — Asking the data

And sometimes you just want to ask.

Not everyone wants to read a legend, compare four hazard bars and summarize a trend line in their head. The conversational layer lets them just ask. It explains the map. It doesn’t replace it.

I gave the AI a deliberately narrow job. It answers only from the scores and drivers the map already shows, so anything it says can be checked against what’s on screen. Deciding what it was allowed to say came before deciding how it should sound.

Conversational AI interaction in use
Example prompts
“What drives the score for Miami?”
“How does it compare to Houston?”
“What changes by 2036?”

The visualization shows you what’s happening. The conversation helps explain why.

One product. Two very different moods.

Both themes share one risk system. Surfaces and contrast adapt so severe still reads as severe, on paper-white or near-black.

Light theme
Light
Dark theme
Dark
13 — Final experience

From data-heavy tool to explorable system.

Location, hazard, time, comparison and explanation, all in one view. Someone can get from ‘What am I looking at?’ to ‘Why does this matter?’ without leaving it.

The prototype below is a recreation of the React.js and three.js build. The original stayed with Aon.

Before the build The deck that got sign-off before the prototype was built. PDFDownload ↓
Don’t take my word for it. Try it. Live prototype
Search a city · switch hazards · change the horizon · ask about the data Open in new tab ↗ Best on desktop
Hazard focus
Chat in use, vertical crop
Horizon comparison detail
Dark mode
Search
Hazard focus · Ask about this data · Horizon comparison · Dark mode · Search
14 — Reflection

The best visualization doesn’t simplify the data. It simplifies getting to the point.

This was less about making climate risk beautiful and more about making it navigable. The best decisions were about what stays visible, what can wait, and how geography, time and explanation work together instead of competing.

That’s the part AI doesn’t do for you. It can produce a hundred views of the same data in minutes. Someone still has to know which one helps a person understand their risk and act on it.

That’s why I like prototyping complex systems. Somewhere between the raw data and the finished interface, something difficult suddenly makes sense.