UI / UX Design
BC Agri Weather Program
The BC Agri Weather Program is a government-supported network of over 500 weather stations across British Columbia that provides farmers with real-time data on temperature, rainfall, humidity, wind, and soil conditions. I redesigned the user experience — from the information architecture to the visual interface — to turn raw sensor data into actionable insights that help growers make faster, more informed decisions.
Role: UI/UX designer: reimagined the BC Agri Weather dashboard, navigation, and station data views for farmers and agronomists.
- Designed a three-tier information system (Provincial → Regional → Local) that lets farmers zoom from a province-wide map to a single station in two clicks.
- Built a visual weather data system — color-coded station pins, real-time cards, and historical trend graphs — replacing tabular data dumps with glanceable insights.
Research & Discovery
I started by understanding the audience. BC farmers check weather data for irrigation planning, frost protection, spraying conditions, and harvest timing. The original site presented station data in dense tables and a single map view with no way to narrow down. Farmers told us they needed to go from 'what's the weather like in my region?' to 'what is the reading at my field's closest station?' in as few steps as possible.
I mapped the decision flow: a farmer checking spray conditions doesn't need province-wide wind speeds — they need their local station's reading, right now. This led to the three-tier structure: Provincial (overview), Regional (filtered by zone), and Local (one station, in detail).
Information Architecture & Workflow
The navigation follows a simple zoom-in pattern. The Provincial tab shows a map of BC with all weather stations as color-coded pins — green for active, yellow for cautionary readings. A sidebar of regional buttons (Peace, Okanagan, Omineca Skeena, etc.) lets farmers jump to their area. The Regional tab displays a filtered map with a sortable station table showing temperature, RH, wind, direction, and rain at a glance.
The Local tab is the payoff — a single station's full data profile: current conditions, daily extremes, rainfall summary, and a time-series graph of temperature and relative humidity over the past 24 hours. I chose a two-line chart (temp in blue, RH in red) because the inverse relationship between these two metrics is exactly what farmers look for to assess drying conditions and frost risk.
Interaction Design — Data at a Glance
The weather cards were the core interaction design challenge. Each card shows temperature, rain, wind, humidity, direction, and humidex — six metrics that could easily become visual noise. I grouped them by priority: temperature is largest and boldest, precipitation and wind sit in the middle, humidity and direction are secondary. The green dot gives an instant 'station is live' signal without reading any text.
I added real-time data layers above the map — temperature, precipitation, wind — that toggle the map pins between different readings. The wind slider below the map adjusts the displayed average, letting users filter stations by wind condition, which is critical for spray-window decisions.
Prototyping & Iteration
I prototyped the three-tier navigation flow in Figma and ran walkthroughs with agronomists. The first version used a single map with a dropdown filter, but users consistently missed the regional stations because the dropdown was buried. I redesigned to the three-tab layout (Provincial / Regional / Local) with direct regional buttons below the map — now the path from landing to local data is two clicks, not four.
I also built an onboarding guide (four slides) that appears on first visit, walking new users through the navigation bar, favorite stations, data layers, and regional filters. This was a direct response to feedback that the original site had no onboarding and first-time visitors would open the map and not know where to click.
Outcomes & Takeaways
The final design delivers a clear Provincial → Regional → Local drill-down that matches how farmers actually think about weather — starting with the big picture and zooming to their field. The color-coded station pins, real-time cards, and historical graph replace scrolling through numeric tables with a glanceable interface that communicates current conditions in seconds.
The biggest lesson: government data platforms don't need to look like spreadsheets. The raw data was there — over 500 stations, each reporting multiple metrics — but the original design assumed users would read every number. By organizing the same data into tiers and prioritizing what matters at each level, the interface goes from 'here is all the data' to 'here is what you need to know.'