Skip to content

UI Revamp — working doc

Status: discussion / scoping (living document — not yet a phase design doc) Started: 2026-07-17 Owner: Giorgos + Claude sessions

Why

The application's UI still reads as a descendant of RISK WISE: a fixed parameter rail on the left, a fixed results rail on the right, and a map/chart squeezed between them. With Phase 6 landing real Greek data (EFAS river flood, Storm Daniel, ELSTAT boundaries) and the Εθνική Ασφαλιστική demo as the grading bar, the UI needs to evolve into something visibly not RISK WISE — a modern, interactive, data-dense risk platform — while staying domain-neutral and white-label (product-definition §1 is unchanged by anything in this doc).

High-level goal: replace the static three-column dashboard with a map/chart-first, progressively-disclosed UI that stays responsive at real-data scale (EFAS grids, portfolio exposures) and surfaces information on demand (hover, click, drawers, modals) instead of permanently reserving screen real estate.

Problem areas

1. Map presentation

  • Centroid rendering does not scale: raw points clutter at country zoom and the map becomes unresponsive with large datasets. No aggregation strategy tied to zoom level.
  • Impact centroids sometimes have a fixed radius, visually overlapping unrelated administrative areas — the symbol size carries no meaning.
  • No multi-layer support (hazard + exposure + impact + boundaries as toggleable layers on one map); each view is a separate static map.
  • Aggregation/disaggregation (admin 0/1/2) is static and heavy — a button-triggered reload, not a fluid zoom/drill interaction.
  • The exposure map (choropleth) and impact maps deliver little business value as designed: they show where data is, not what a decision-maker should look at.

2. Chart representation

  • Charts have come a long way from static images, but interactivity is shallow: limited hover detail, no click-through from a chart element to the underlying locations/records, no cross-filtering between chart and map.
  • Opportunity: on-hover context (contributing drivers, percentiles), on-click drill-down (EP curve point → the events/locations behind it), linked highlighting.

3. Informational & results sections

  • The results rail permanently consumes ~1/3 of a laptop screen and is empty most of the time (see screenshots 02, 04).
  • Result details are static prose blocks. Information should follow the interactive model of the rest of the app: tooltips for definitions, drawers for drill-down tables, modals for methodology/provenance, inspector panels that appear on selection and get out of the way otherwise.

4. Parameter selection

  • The input rail also permanently consumes ~1/3 of a laptop screen, even after a run when the parameters are no longer being edited.
  • Direction to explore: collapsible/floating parameter surface — e.g. a setup wizard or command-bar flow that collapses into a compact "active scenario" chip strip after RUN, reclaiming the screen for results.

Reference screenshots (riskwise-v2 — the look we are evolving away from)

Stored in assets/ui-revamp/. These document the predecessor's patterns; the revamp is graded on how clearly we depart from them while keeping the workflow legible.

# File What it shows
01 01-home.png Home dashboard: card launcher + status/resources column
02 02-risk-empty.png Risk tab, empty state — both rails reserved, center placeholder
03 03-macro-params-empty-chart.png Macro tab: sparse param rail + empty full-height chart
04 04-adaptation-empty.png Adaptation tab, empty state with dead Summary/Details rail
05 05-settings-country-packs.png Settings: custom country pack upload (bundle seam UI)
06 06-impact-function-detail.png Impact-function inspector: chart + raw value table mid-run
07 07-adaptation-cost-benefit.png Cost-benefit bar chart + Active scenario / Summary rail
08 08-hazard-map-centroids.png Hazard map: dense flood-depth centroids along the Nile
09 09-exposure-choropleth.png Exposure/values choropleth at admin level (static Admin 0/1/2 toggle)
10 10-impact-map-sparse-centroids.png Impact map: sparse fixed-radius centroids, little value
11 11-impact-bar-chart.png Impact 2024→2050 bar chart with hover tooltip

Constraints & context

  • Demoable slice first: any revamp work is graded against the Εθνική demo (phase-6 §0 D-S12): probabilistic RF run with EP curve + 1-in-200 PML, Storm Daniel single-event view (EP/PML suppressed, never faked), classic workflow on EFAS data, Greek UI.
  • White-label core: no client branding or domain assumptions in core UI components; theming/config stays in the bundle seam.
  • Scale target: EFAS RF grids at 93 m over Greece and portfolio-scale exposures — the map layer must be designed for this, not for the retired toy fixtures.
  • Existing render groundwork: P3 render-rewrite (deck.gl) — the revamp builds on that stack rather than reopening the renderer choice, unless the market scan surfaces a compelling reason.

Market scan — products to mine for UI direction

Researched 2026-07-17 (web survey). Four categories; per-product notes list the UI patterns worth stealing, then a synthesis of patterns that recur across the best products.

1. Commercial cat-modelling / insurance risk platforms

Moody's RMS Intelligent Risk Platform (ExposureIQ, Risk Modeler)

  • Paid · Platform · ExposureIQ · Risk Modeler
  • Cloud cat-modelling suite — exposure management, model runs, EP curves/PML at portfolio and treaty level.
  • Patterns worth stealing:
  • Splits the workload into role-based apps on one platform (exposure manager vs. cat modeller vs. underwriter) rather than one screen doing everything — maps cleanly onto "explore data" vs. "run model" vs. "read results" modes.
  • ExposureIQ: interactive accumulation map with hazard layer overlays + thematic (choropleth) mapping + risk-cluster views ("hot/cold spots"), driven from billions of locations — the canonical answer to the raw-centroid problem is thematic aggregation with cluster surfacing, not points.
  • Event footprints (HWind, Event Response) appear as instantly-addable map layers, not separate datasets — a model for Storm Daniel as a togglable footprint layer.
  • Risk Modeler's "Model Composer": model parameters exposed as named, saveable "views of risk" — parameters-as-artifact, not ephemeral form state.
  • Media: Developer portal, What's-new blog with screenshots

Verisk Touchstone

  • Paid · Product page
  • Full cat-modelling platform: data quality, hazard lookup, geospatial accumulation, detailed loss analytics.
  • Patterns worth stealing:
  • Modular analytics ("Data Quality / Hazard / Geospatial / Detailed Loss") — the workflow is a pipeline of named stages, each with its own screen, instead of one giant form.
  • Users select a subset of simulated events on the map to assess ranges of impact — event-set filtering as a map interaction.
  • One-click export of maps + charts + tables into composed reports.
  • Embedded dashboards put EP curves + geographic loss maps side-by-side as linked viewsAWS case study with dashboard screenshots.

Swiss Re CatNet

  • Paid (client free tier) · Product page
  • Global natural-hazard atlas: hazard layers × user exposure locations, browser-based.
  • Patterns worth stealing:
  • Deliberately austere layout: map center, layers + filters in a side rail, key-metrics strip on top — a metrics header over the map is a cheap upgrade from a right results panel.
  • Hazard type and time perspective (current vs. 30/60-yr historical) as a single dimension picker, not separate pages.
  • Near-real-time event footprints as an overlay class distinct from hazard layers.
  • Media: Overview video, promo PDF with screenshots

Munich Re Location Risk Intelligence

  • Paid (on-demand single-location tier) · Product page · On-demand app
  • Location/portfolio scoring for 15 natural hazards + 13 climate-change hazards under scenarios.
  • Patterns worth stealing:
  • Score rollup hierarchy: one Overall Risk Score → 3 group scores → 15 hazard scores → 250+ climate sub-scores; progressive disclosure of a score tree is a strong right-panel redesign pattern.
  • "Editions" as licensing-gated feature bundles on one UI shell — matches our config-bundle product model almost exactly.
  • The public on-demand tier is a stripped single-location wizard (address → scores → report) — a model for a lightweight demo path beside the full workflow.

Fathom Portal

  • Paid · Access · Global Flood Map
  • Global fluvial/pluvial/coastal flood hazard layers (RP 5–1000) via portal + API.
  • Patterns worth stealing:
  • Uploaded raster/vector becomes a live tiled interactive map — no desktop GIS. Return-period selection is a layer parameter, not a re-run.
  • Dual-track delivery (human portal + API/SDK) with identical semantics — mirrors our engine/UI seam.
  • Two consumer-grade numbers per flood type (Relative Risk score + Risk Category) sitting on top of full depth grids — depths for experts, scores for everyone else.

JBA Risk Management (flood maps portal)

  • Paid · Data products · Viewer
  • High-res global flood maps + FloodScore/ClimateScore ratings.
  • Patterns worth stealing:
  • Baseline vs. climate-scenario comparison as the organizing interaction: same map, toggle scenario, diff the score.
  • Depth+frequency collapsed into a plain-language ordinal rating (negligible → significant) per flood type.

Zesty.ai (Z-FIRE / Z-PROPERTY)

  • Paid · zesty.ai · Model deep dive
  • AI property-level wildfire/hail/roof risk scores for 150M+ US structures.
  • Pattern worth stealing: two-number risk decomposition with a "risk factor analysis" explaining which attributes drove the score — an explainability drawer under every number; directly relevant to our "refuse, don't fabricate" credibility stance.

Oasis Loss Modelling Framework / OasisUI

  • Free / open-source (BSD-3) · oasislmf.org · GitHub
  • The open-source cat-model execution platform — the closest open analogue to our exact workload.
  • Steal the workflow decomposition, avoid the execution:
  • Portfolio → analysis (portfolio × model + settings) → run with progress states → outputs browser; "analysis" as a persistent named object (re-runnable, comparable) is the key idea.
  • The UI itself is an R/Shiny grid-of-tables app — functional, dated, weak map story. Study it as the floor, not the ceiling.

2. Climate risk analytics SaaS

Jupiter Intelligence — ClimateScore Global

  • Paid · Product
  • 90 m global physical-risk metrics, 9+ perils × 3 scenarios × 5-year steps to 2100.
  • Patterns worth stealing:
  • Peril × scenario × horizon as a three-axis picker that stays visible while results update — the parameter space is navigational chrome, not a form you submit.
  • Views tailored to org structure (single site / entity / corridor / portfolio) — same data re-cut by decision context.
  • "Story behind the score" — every score expandable into the metrics that produced it.

Climate X — Spectra

  • Paid · Spectra · Features
  • Asset/portfolio physical risk → financial loss; markets itself as "as easy as Google Maps."
  • Patterns worth stealing:
  • Entry is search-or-upload: address search for one asset, CSV upload for a portfolio, polygon upload for infrastructure — three ingress paths into one analysis surface.
  • Scenario controls done concretely: SSP/RCP picker + time slider + a "flood defences on/off" toggle — a single high-salience physical switch; great pattern for the adaptation-measures story.
  • Portfolio → asset → unit drill-down with loss in both money and % of value; per-risk confidence/severity attributes next to each score.

Cervest EarthScan (now Mitiga)

  • Paid · earth-scan.com · Most-loved features
  • Asset/portfolio climate risk with standardized ratings across 6 hazards.
  • Patterns worth stealing:
  • A–F letter ratings at asset and portfolio level — instantly comparable; the "Combined Physical Risk" rollup was users' favourite feature.
  • Asset catalog: 500M pre-discovered assets added to a portfolio in a couple of clicks — pick-from-catalog beats upload for demo friction (analogue: prebuilt Greek exposure sets).

XDI Climate Risk Hub / XDI Globe

  • Paid · Hub · Globe
  • On-demand asset/portfolio physical risk, down to 5 m.
  • Patterns worth stealing:
  • One spatial canvas scaling continuously from area view to individual asset — zoom = drill-down, no page change.
  • Three-band risk ratings (red/amber/green) as map symbology with financial metrics behind them.
  • Component-level damage decomposition surfaced in the asset inspector.

First Street (riskfactor.com)

  • Free (consumer) · firststreet.org
  • Per-property flood/fire/heat/wind scores (1–10) for every US property.
  • Patterns worth stealing:
  • Best-in-class address-first funnel: search → property page with 5 "Factors" → per-peril deep dive with maps, depth-by-RP charts, 30-year projection, mitigation suggestions. No parameter panel exists; parameters are curated defaults.
  • Zoom-adaptive map: area choropleth zoomed out → individual building footprints colored by score zoomed in — exactly the anti-centroid pattern.
  • Scenario storytelling per property ("what does a 1-in-100 flood look like here") rather than raw hazard rasters.

Probable Futures

  • Free (non-profit) · Maps · Pro
  • Global climate-hazard maps by warming level, on Mapbox vector tiles.
  • Patterns worth stealing:
  • Radical minimalism as a design position (Moth Design case study): one scenario dimension, one variable at a time, the map carries the meaning.
  • Swipe/slider comparison map between two warming scenarios (Mapbox write-up).

Riskthinking.ai — VELO

  • Paid (free preview) · VELO
  • Climate exposure across assets, companies, and indices with scenario simulation.
  • Pattern worth stealing: preloaded indices/companies so a new user sees populated analytics before uploading anything — "explore preloaded, then bring your own" onboarding (preloaded browsable catalog ≠ bundled starter data).

S&P Global Sustainable1 — Climanomics

  • Paid · Product
  • Financialized climate risk (modeled average annual loss) per asset, 8 decades × 4 scenarios.
  • Pattern worth stealing: everything denominated in annualized loss as % of asset value, decade by decade — one consistent unit across the whole UI; direct CSV/PPT/PDF export.

3. Public / government risk viewers

FEMA National Risk Index

  • Free · App · User guide
  • US multi-hazard risk index at county/tract level.
  • Patterns worth stealing:
  • Explicit aggregation-level toggle (county ↔ census tract) at the top of the map — user-controlled admin resolution; the upgrade path from our static admin aggregation.
  • Click a community → full risk profile panel, index decomposed hazard-by-hazard, each expandable.
  • Built-in report generator: pick any unit → composed risk profile or side-by-side comparison report.
  • Search accepts county, place, address, or tract ID.

ThinkHazard!

  • Free, open source (GFDRR/World Bank) · thinkhazard.org · GitHub
  • Classified hazard level for 11 hazards + guidance for any admin unit worldwide.
  • Patterns worth stealing:
  • The most aggressive simplification in the space: location search → an 11-hazard grid of colored severity chips → per-hazard guidance page; the map is a supporting illustration.
  • Honest uncertainty language ("high awareness required", recommends local study) — a template for our lower-bound/suppressed-EP labelling.

EU DRMKC Risk Data Hub

  • Free (EC JRC) · risk-data-hub
  • Pan-European web-GIS for hazard/exposure/vulnerability/risk layers + historical losses, NUTS-level.
  • Patterns worth stealing:
  • Module tabs mirroring the risk equation (Exposure / Vulnerability / Risk / Historical Events) — the UI teaches the methodology; closest public analogue to our classic workflow.
  • Historical events as a parallel evidence layer next to modelled risk (≈ our Storm Daniel vs. EFAS probabilistic split).
  • Also a cautionary tale: dense ArcGIS-era chrome, slow tiles — the gap between it and Felt is our opportunity.

Copernicus EFAS / GloFAS map viewer

  • Free (tiered by role) · EFAS monitoring · New-interface announcement
  • Operational European flood forecasts — also the source of our RF hazard data.
  • Patterns worth stealing:
  • Layers grouped by semantic category in a top toolbar (flood summary / hydrological / meteorological / …) — categorized layer picking beats one flat list.
  • User-composed dashboard: any map-viewer view can be pinned as a widget into a personal dashboard — "save this map state as a card."
  • Reporting points rendered as threshold-exceedance glyphs (colored by alert level), not raw dots; station density thins with zoom.

UNDRR Risk Information Exchange (RiX)

  • Free · rix.undrr.org
  • Aggregator of hazard-exposure-vulnerability datasets with country profiles.
  • Pattern worth stealing: country profile page — one URL per country assembling hazards, losses, exposure into a scrollable dossier; a model for a per-country landing page in a white-label multi-country product.

4. Modern geospatial dashboard tooling & design patterns

kepler.gl

  • Free, MIT · kepler.gl · Layer docs · Uber intro blog with GIFs
  • Browser WebGL tool rendering millions of points with configurable layers, filters, aggregations.
  • Patterns worth stealing:
  • The reference layer panel: vertical stack of layer cards, each collapsible with visibility eye, type picker, color-by-field, scale, opacity; add/duplicate/reorder inline.
  • Hexbin/grid aggregation layers with an aggregation-function dropdown (count/sum/mean/max of any field) — turns a centroid cloud into a legible surface in one control.
  • Filters as a sibling tab of the same left panel; a histogram brush is the filter UI; time filter becomes a bottom playback bar.
  • Configurable tooltips, dual-map split view, export of map state as JSON config — map state as data.

deck.gl

  • Free, MIT · Layer catalog · Hexagon demo · H3HexagonLayer
  • The GPU rendering library under kepler/Studio/CARTO — the concrete replacement path for Leaflet centroids (and the stack we already kept in P3).
  • Implementation-level patterns:
  • HexagonLayer/GridLayer with GPU aggregation (SUM/MEAN/MIN/MAX/COUNT of a weight field) — 3M points render interactively in the public demo.
  • H3HexagonLayer for pre-aggregated H3 cells (aggregate server-side per resolution, pick resolution from zoom).
  • ScatterplotLayer + radiusMinPixels, HeatmapLayer, picking-based hover/click callbacks feeding tooltips and inspectors; interleaves with MapLibre/Mapbox basemaps.

Foursquare Studio (ex-Unfolded)

  • Freemium · kepler vs Studio
  • Hosted kepler.gl superset: data connectors, H3 "hextiles", analysis modules.
  • Patterns worth stealing:
  • Analysis modules as pluggable panels (hotspot detection, suitability scoring) living in the same left rail as layers — analytics beside layers, not a separate app.
  • Tiled H3 pyramids ("hextiles") for country-scale point/raster data — the scalable form of admin aggregation.

CARTO Builder

  • Paid (trial) · Builder · Widget docs
  • Cloud-native map dashboards; deck.gl rendering.
  • Patterns worth stealing:
  • Widget rail = results panel done right: category bars, histograms, single-KPI widgets docked right of the map; every widget is simultaneously a display and a cross-filter — click a bar, the map and all other widgets refilter. The strongest single pattern for our static right panel.
  • SQL Parameters: dashboard-level parameter controls (dropdown/slider) that re-parameterize queries — a clean model for RP/scenario pickers that re-cut results without a full re-run.
  • Spatial selection tools (rectangle/polygon/lasso) that filter the widget rail — portfolio subsetting by drawing on the map.

Felt

  • Freemium · felt.com · Interface tour
  • Collaborative web GIS with a consumer-grade feel; the current benchmark for map-app ergonomics.
  • Patterns worth stealing:
  • Detail panel hidden by default — the right panel appears only when something is selected, shows exactly that thing, then gets out of the way. Kills the permanent dead-space results panel.
  • Left panel = legend-first (what a viewer sees) with an editor-only "List" tab — same rail, two audiences.
  • Bottom table drawer: sortable, filterable attribute table synced with the map — tabular drill-down without leaving the map.
  • Editor/viewer mode toggle — one artifact, two experiences; ideal for analyst-builds vs. client-views in a white-label product.

Mapbox (examples/blog, as a pattern library)

  • Paid usage tier · Climate data guide
  • Worth mining: vector-tile encoding of climate grids (style-time recoloring — no re-fetch when the scenario changes), swipe-compare, camera-driven storytelling pages.

Patterns that recur across the best products

  1. Kill the permanent right panel — make it a selection-driven inspector. Appears only when a feature/layer/result is clicked, scoped to that object; otherwise the map gets the width. — Felt, FEMA NRI, XDI Globe, First Street.
  2. Left rail = layer cards with legend, visibility eyes, per-layer styling; hazard/exposure/results are peer layers. Multi-layer toggling (EFAS footprint + exposure + impact + Storm Daniel) is the baseline capability everywhere. — kepler.gl, Felt, EFAS viewer, CatNet, ExposureIQ.
  3. Aggregate on the GPU, not with raw centroids: hexbin/H3/grid with an aggregation-function picker. Color/height = count, sum(TIV), mean(loss); pre-tile H3 at multiple resolutions for national scale. — deck.gl, kepler.gl, Foursquare hextiles, ExposureIQ risk clusters.
  4. Zoom-adaptive resolution with an explicit level toggle. Country choropleth → admin unit → H3 cells → building footprints as you zoom, plus a visible county/tract-style switch so users control aggregation. — First Street, FEMA NRI, XDI Globe.
  5. Parameters as persistent chrome, not a submit-form. Peril × scenario × horizon pickers stay visible and re-cut results in place; the 1/3-screen parameter panel collapses into a chip strip after a run, expandable to edit-and-re-run. — Jupiter, Spectra, CARTO SQL Parameters, Probable Futures, CatNet.
  6. Named, re-runnable "analysis" objects with job status. Upload → validate → configure → run (async, progress states) → results attached to the analysis; analyses are listable, comparable, shareable. — OasisUI, Risk Modeler saved views, Spectra projects.
  7. Widget rail where every chart is also a cross-filter. EP curve, loss-by-admin bars, per-location loss histogram: clicking/brushing any of them filters the map and the other widgets. — CARTO Builder, kepler.gl, Touchstone/QuickSight, EFAS pin-a-widget.
  8. Bottom drawer for tabular drill-down. Toggleable attribute table (sort/filter/search) synced two-way with map selection — the natural home for per-location loss tables. — Felt, CARTO, OasisUI (as the thing to modernize).
  9. Score rollup trees with progressive disclosure and an explainability drawer. One headline number (PML/AAL or grade) → per-hazard scores → contributing drivers; labelled ordinal scales over raw values, with "why this score" expandable. — Munich Re, Cervest A–F, First Street, Zesty.ai, Jupiter.
  10. Comparison as a first-class interaction: swipe slider or synced dual maps. Baseline vs. scenario, pre/post-adaptation, RP 50 vs. RP 500 — drag a divider on one map rather than eyeballing two runs. — Probable Futures, JBA, kepler.gl dual-map.
  11. Search-first entry with a pre-loaded catalog, upload second. Prominent search (address/admin unit/asset catalog) drops the user into populated results with curated defaults; portfolio upload is the power path. — First Street, ThinkHazard!, FEMA NRI, Cervest catalog, VELO, Spectra.
  12. Observed events as a distinct layer class from modelled hazard, with honest labelling. Event footprints toggle on beside probabilistic layers but carry different badges/metadata; where the model can't speak, the UI says so in plain language instead of faking a number. — ExposureIQ, CatNet, EU Risk Data Hub, ThinkHazard! (template for our suppressed-EP / lower-bound labels).
  13. Report/export composer everywhere. Any view → CSV; any community/asset/portfolio → composed PDF/PPT report with maps + charts + tables; comparison reports between two units. — FEMA NRI, Touchstone, Climanomics, Spectra, Munich Re.

Shortlist most worth deep study for the redesign: Felt (panel behavior), CARTO Builder (widget/cross-filter rail), kepler.gl + deck.gl (layer panel + aggregation rendering — free and directly adoptable since we already keep deck.gl), First Street (zoom-adaptive drill and score storytelling), FEMA NRI (aggregation toggle + report generator), OasisUI (workflow object model for run-based cat modelling).

Open questions

  • Wizard vs. persistent-but-collapsible parameter surface — which fits the demo narrative?
  • One unified map with layer toggles vs. purpose-built views per step (hazard/exposure/impact)?
  • Aggregation strategy: H3/hex-bin GPU aggregation vs. pre-aggregated admin tiles vs. both by zoom band?
  • How much of the revamp lands inside P6 vs. becomes its own phase after the demo?

Next steps

  1. ~~Fill in the market scan section~~ — done 2026-07-17.
  2. Walk the four problem areas against the scan and pick a direction per area.
  3. Decide phasing (in-P6 quick wins vs. post-demo phase) and cut issues accordingly.