Building the Design Layer
for Satellite Intelligence.
From day one with no brand, we built two live websites, two design systems, a 3-day workshop in Nairobi, and an AI pipeline that converts satellite data into policy bulletins — all while the science was still being done.
Responsibilities
Website design & development · Design systems · Workshop design · Training materials · AI pipeline UX · Brand identity · Conference presentations
Collaborators
Prof. Catherine Nakalembe (PI) · Xylem Lab research team · AGRA analysts · COMESA RFBS country teams (9 nations)
Tools
Nairobi, Kenya · Dec 2025
AGRA COMESA RFBS Training Workshop — Day 1
Analysts from 9 East & Southern African countries · 3 days · 20+ participants
No design infrastructure existed when we started.
The Xylem Lab at the University of Maryland is affiliated with NASA Harvest and led by Professor Catherine Nakalembe. The lab's mission: translate satellite-derived crop intelligence into actionable policy outputs for food security agencies across East and Southern Africa.
The science was rigorous. The communication layer wasn't. When Pradeep joined in November 2025, the lab had no public-facing website, no design system, no brand standards, and no automated way to deliver outputs to non-technical stakeholders. Analysts were manually assembling bulletin reports that took days. There was no training infrastructure for the RFBS workshop coming in weeks.
The gap between what the satellite data could show and what policymakers could actually receive and read was significant. Closing that gap became the entire scope of work.
The problem — Discoverability
Scientists couldn't show their work publicly.
No website = no entry point for collaborators, funders, or government partners who needed to evaluate the lab's credibility and scope.
The problem — Delivery
Bulletins took days to write manually.
Each bulletin required aggregating CSVs, writing narratives by hand, generating charts, and assembling them into a report. 6 countries × 3 crops = a bottleneck.
The problem — Training
Analysts had no reference materials.
The RFBS workshop in Nairobi needed structured training websites, decks, and session materials — built from zero in weeks.
We launched two separate live websites from zero.
The lab operates under two distinct public identities: The Xylem Lab (the academic research unit, internal and peer-facing) and The Xylem Institute (the public-facing research institute that speaks to policy audiences, collaborators, and funders). Each needed a separate website with a distinct tone, audience, and information architecture — but a shared visual DNA.
The Xylem Lab website communicates scientific credibility, research depth, and lab membership to an academic audience. The Xylem Institute website (xyleminstitute.org) communicates strategic vision, impact, and partnership opportunity to a non-technical, policy-level audience. Same organization. Different front doors.
The Xylem Institute
Designed for researchers, government collaborators, and potential funders who visit once, scan fast, and leave if they don't immediately see value. The site needed to communicate the institute's full scope — from why it exists, to what it does, to who leads it, to how to partner — without requiring users to scroll through everything to understand it.
10 distinct content sections. Dark, authoritative visual language. A navigation system that solves the scannability problem directly (see Section 02).
The Xylem Lab
The academic face of the same team. Designed with a more utilitarian structure — research outputs, team bios, publications, and lab news take center stage. The tone is confident and scientific. The hierarchy prioritizes depth of content over broad positioning.
Built with the same visual tokens as the Institute site but applied differently: looser layout, less dramatic hero section, more information-dense sections.
Also shipped — Training & Workshop Websites
Kenya 2026 · Wednesday Session · Workshop Materials
For the Nairobi workshop (and the upcoming Kenya 2026 training cycle), we built HTML-based training websites that serve as live reference material during sessions. No PDFs. No slides only. Analysts open the training URL during the workshop and follow along in real-time.
- kenya2026.html — Full training site for Kenya 2026 analyst cohort
- Wednesday Session Notes — Speaker notes + live reference for Day 2 afternoon session
Place screenshot here → /xylem/kenya2026-website.png
📌 Screenshot of kenya2026.html training site
We designed a nav that tells you the site before you scroll.
The Problem
The Xylem Institute's audience — researchers, collaborators, government advisors — is time-constrained. They land on the site with a specific question: "Does this lab do work I care about?" A standard collapsed navbar doesn't answer that. They have to scroll to find out. Most don't.
The Insight
The page sections are the navigation. If a researcher can see "Strategic Framework," "Our Global Partnership Network," and "Partnership & Investment Pathways" immediately on landing — they know exactly what's available. They can jump to what matters to them instead of guessing.
The Solution
A fixed navigation panel that opens by default on page load, showing all 10 section labels. After the first scroll, it minimizes to a vertical strip of status dots only — maintaining location awareness without occupying space. Hovering on the strip at any time re-expands the full labels for quick jumping.
Navigation State Machine
State 1: Default Open
Page loads. Nav opens by default at top-right, showing all 10 section labels with radio dot indicators.
+ 5 more sections...
State 2: Scroll → Minimize
First scroll triggers collapse. Nav shrinks to a vertical strip of 10 colored dots only — no text labels. Active section dot fills red.
State 3: Hover → Expand
User hovers on the minimized strip. Full labels re-appear. Click to jump to any section. Mouse-out collapses back.
+ 6 more...
Why this pattern? — The Xylem Institute serves researchers and collaborators who visit once and need to quickly assess whether the lab's work is relevant to them. A collapsed navbar hides content depth. An open nav that minimizes respects user attention without sacrificing discoverability.
Live Recording — Navigation in Action
The GIF below shows the navigation transitioning between all three states in real use. Notice how the dot strip maintains positional context even when collapsed — the active section dot fills red, giving users scroll-position awareness without any labels.
This pattern increased the average session depth — users who engaged with the navigation visited more sections, spending more time on the site's research-heavy content.
Navigation Panel — Default Open State
We built a visual language for two different organizations.
Two websites meant two design systems — with shared DNA but distinct application. Rather than treating them as the same brand with a different logo, we defined each organization's visual identity from the ground up: typography choices, color semantics, spacing, component patterns, and when to use which.
Both systems anchor on a deep forest green as the primary brand color — a deliberate link to the lab's geo-ecological mission. Where they diverge is in tone and application: the Institute system is more editorial and formal, the Lab system is more utilitarian and data-forward.
Design System 1 — The Xylem Institute
The Xylem Institute
Public-facing · Policy audience · Research institute
Primary Green
#1B5E20
Headings, CTAs, key actions
Dark Green
#274E13
Subheadings, depth elements
Body Grey
#616161
Body text, secondary labels
Amber Accent
#F9A825
Dividers, highlights, status
Light Fill
#F1F8E9
Country / section badges
White
#FFFFFF
Card backgrounds, overlays
Typography Scale
Design System 2 — The Xylem Lab
The Xylem Lab
Academic research lab · Scientific audience · University context
Lab Deep Green
#0D3B1A
Hero background, hero text
Lab Mid Green
#2E7D32
Accent links, buttons
White
#FFFFFF
Primary text on dark bg
Amber
#F9A825
Data callouts, badges
Light Mint
#E8F5E9
Light section backgrounds
Grey-400
#9CA3AF
Muted labels, captions
Typography Scale
From the Design File
Both design systems were built and maintained in Figma with a shared component library: button variants, card patterns, badge/pill styles, section layout grids, and typography specimens. The amber accent (#F9A825) functions as a universal "action and emphasis" signal across both systems — appearing as slide dividers in presentations, badge highlights on the website, and status indicators in the pipeline UI.
The systems also extend into non-web assets: the AGRA workshop slide deck, London conference presentation, and bulletin HTML all inherit the same visual language.
Design system component from Figma file
We flew to Nairobi and ran a 3-day training for 9 countries.
In December 2025, the Xylem Lab delivered the AGRA COMESA Regional Food Balance Sheet (RFBS) training workshop in Nairobi, Kenya. The three-day event brought together 20+ food security analysts from 9 East and Southern African countries — representing national government agencies responsible for crop production estimates that feed directly into food policy decisions.
The goal: train analysts on satellite-based yield forecasting using the YieldWatch pipeline — and show them the complete system, from raw satellite data to a publication-ready HTML bulletin. Everything they saw had been designed and built in the preceding weeks.
Pradeep was on the ground in Nairobi as part of the lab team, supporting both the technical training sessions and ensuring the design materials — training sites, slides, reference documents — worked as intended under live conditions.
.jpg)
.jpg)
Workshop Design Deliverables
Kenya 2026 Training Site
HTML training site used as live reference during sessions. Analysts follow along in-browser. Covers pipeline setup, configuration, step-by-step cell execution, and troubleshooting.
Wednesday Session Speaker Notes
Structured HTML notes for the Day 2 afternoon deep-dive session. Covers GEE map generation, bulletin parameters, and Auto-Pilot demo. Designed to be both a live prompt and a post-workshop reference.
AGRA Wednesday Session Deck
Full workshop slide deck covering YieldWatch overview, pipeline architecture, feature engineering, map generation, bulletin generation, and Auto-Pilot. Matched the Xylem design system throughout.
London Conference — Auto-Pilot Slides
4-slide extension to an existing YieldWatch deck, designed for a London conference audience. Covers Auto-Pilot overview, pipeline summary, core technical components, and bulletin output + prerequisites. Inserted at slide 7, matching the existing deck's design system exactly.
Prof. Catherine Nakalembe — LinkedIn, Dec 2025
"Just wrapped up 3 intense days of #GeoAI for crop yield and food production #forecasting in Nairobi, Kenya... We built a system that turns satellite data into national crop forecasts and gets them into the hands of government. Super proud of my team The Xylem Lab we absolutely rocked it!"
We automated 3 days of bulletin writing into a single button.
The Problem
Each cycle, analysts manually aggregated YieldWatch CSVs, wrote regional narratives, generated maps in GEE, assembled charts, and formatted everything into a bulletin. For 6 countries × 3 crops, this took days. The process was repetitive, error-prone, and didn't scale. Every bulletin was one analyst's workload away from being late.
The Solution
Xylem Auto-Pilot: an end-to-end pipeline built in Google Colab. It reads YieldWatch CSVs, generates yield and anomaly maps via Google Earth Engine, retrieves contextual knowledge from a FAISS-indexed RAG store of historical bulletins, runs the full narrative through GPT-4.1 mini with structured prompts, and assembles a 4-tab interactive HTML bulletin — complete with charts, decision thresholds, and regional breakdowns — packaged as a ZIP. One click.
Xylem Auto-Pilot — End-to-End Pipeline
Inputs
YieldWatch CSVs
Per-region · Per-crop · Per-season
Crop Calendars
Season-aware · 11 countries
Historical Bulletins
AGRA archive · PDF corpus
Country Config
GEE project · Season map
Auto-Pilot Engine
CSV Parser & Validator
Normalise · classify region / crop / season
RAG Embedding Store
FAISS · 1536-dim · semantic retrieval <10ms
GPT-4.1 mini Engine
Structured prompts · narrative per section
Chart & Map Generator
GEE maps · matplotlib · condition overlays
Crop Calendar Engine
Season gate · Tanzania Msimu / Vuli logic
Walk-Forward Validation
Region / Season / Year
Outputs
Bulletin HTML
4-tab interactive report
Decision Thresholds
Anomaly quartile rankings
Production Charts
Min / mean / max trends
Crop Condition Maps
300 DPI · GAUL L1 boundaries
ZIP Download Package
HTML + maps + charts
One notebook, one button. — From raw CSVs to a publication-ready bulletin covering 6 countries × 3 crops in minutes. No manual data prep, no copy-paste between tools.
Bulletin Output — 4 Tabs
Tab 1 — Overview
Executive summary of crop conditions across all monitored countries. Highlights regional anomalies, key risk areas, and season-level outlook in plain policy language.
Tab 2 — Crop Profiles
Per-crop yield anomaly narratives for Maize, Rice, and Beans. Each section is RAG-generated using historical bulletin context and current season data.
Tab 3 — Production Trends
Time-series production charts and divergence plots. Min / mean / max production ranges with trend direction indicators (Increasing, Stable, Declining).
Tab 4 — Regional Breakdown
County/region-level condition table colour-coded by yield anomaly quartile for quick identification of priority intervention areas.
Technical Stack
Place bulletin screenshot here → /xylem/autopilot-bulletin-output.png
📌 Screenshot of generated HTML bulletin (4-tab view)
Brand Visual — Xylem Institute LinkedIn
What shipped and what it changed.
Complete Deliverable Record
The Xylem Lab now has a design layer that matches the quality of its science.
Every deliverable in this project connects to the same outcome: reducing the friction between satellite intelligence and the people who need to act on it. The websites make the work discoverable. The design systems make the brand credible. The workshop materials made the training transferable. The Auto-Pilot makes the bulletin deliverable. This work is ongoing — and still shipping.