Back to Portfolio

Site Selection landing screen

/ 4 min read

Site Select Design Strategy

AI design strategy for a map-first site-selection experience that balances data, routing, chat-assisted filters, and exports for decision-ready outputs.

Site Selection – User Experience Overview

In the Summer of 2025, I helped design and build this map-first experience to help Afirica-based logistics and health teams make confident siting decisions for drone delivery logistics of health supplies. The goals of this user experience: keep people in flow as they filter, validate results on a map, compare routing results, and walk away with exports that tell the story behind our site recommendation.

My role: UX flows, interaction design, visual design, and front-end build
Goals: Clear filtering, honest spatial context, and outputs that explain why, not just which.

Problem

Stakeholders were juggling spreadsheets, PDFs, and static maps. I wanted a single place where they could:

  • Start with curated scenarios tuned for a country, in this case an african country (health, transport, environment, socioeconomic data included)
  • Explore with both numbers and geography in view—histograms on the right, map on the left
  • Toggle context layers (facilities, warehouses, KEMSA depots, keepout zones) without losing their place
  • Compare drone vs. car routing to understand time, distance, and emissions trade-offs
  • Export evidence in one click: PDF, high-res map JPEG, CSV/GeoJSON, plus a compact summary CSV

A quick UX walkthrough

  1. Land in results – You open to a country-wide view with sane bounds and layer toggles ready.
  2. Filter data – Variables are grouped by category; each histogram has “Filtered” vs “All” tabs so you can see how your choices shape the distribution. A KOZ toggle flips keepout zones on/off.
  3. Inspect on the map – Selecting a scenario highlights it spatially; base layers, keepout polygons, warehouses, and health facilities can all be shown or hidden to check coverage and constraints.
  4. Compare routing options – Where routing is available, you can display drone and car routes (plus nest-to-warehouse legs) and see the trade-offs reflected in the variable panels.
  5. Export – One menu packages the current state into PDFs, JPEGs, CSV/GeoJSON, and a summary CSV for quick sharing.

AI-Assisted Filter Chat

Filtering dozens of health, transport, environment, and socioeconomic variables by hand is powerful—but slow when stakeholders are still forming the question. I designed an AI Assistant Chat that lets people describe intent in plain language and watch the filter panel update in response.

The interaction is built to stay grounded in the same controls analysts already trust:

  • Natural-language → structured filters – A prompt like “focus on sites near health facilities with lower keepout risk” maps onto the existing variable groups instead of inventing a parallel UI
  • Visible, reversible changes – As the assistant adjusts ranges and toggles, histograms and the map update live so people can see what changed and undo or refine by hand
  • Human remains in control – Chat accelerates the first pass; analysts still inspect distributions, KOZ context, and routing before committing to a shortlist

This keeps conversational AI as a shortcut into the filter model—not a black box that replaces it.

AI Assistant Chat applying filter adjustments from a natural-language prompt

Screens in sequence

This order mirrors the journey: shortlist, inspect, validate, then capture the winning scenario.

Site Selection List Landing in results with ranked sites and quick filters

Filtered List Filters + histogram tabs keep the data story visible

Site Detail Drawer Detail drawer for a candidate with KOZ awareness

Map + Media Map + reference layers to validate coverage and constraints

Results Summary Shortlist view before routing and export

Winner Highlight Recommended site, ready to ship with exports

Single Site Optimizer

For teams that want one definitive pick, I added an optimizer that gathers weighted criteria and explains the trade-offs behind its recommendation.

  • Progressive disclosure keeps people focused on one decision at a time
  • Live feedback shows how weight changes nudge the outcome
  • Outputs narrate why a site won, not just which site

Optimizer Inputs Collecting weighted criteria for a single-site recommendation

Optimizer Progress Progressive disclosure with live feedback on trade-offs

Optimizer Result Optimizer output with final scoring and rationale

Outcomes

  • Shows a complete decision loop: filter → spatially validate → compare routing → export
  • Respects field workflows: fast toggles, KOZ-aware comparisons, and readable charts
  • Produces shareable artifacts that explain why a scenario was chosen, not just which one

Last Updated: