Building a weather app for backcountry decision-making
A mobile-first forecast app helping backcountry users assess wind conditions, compare weather models, and make confident go or no-go decisions.
A mobile-first forecast web app helping backcountry users assess wind conditions, compare weather models, to inform decision-making.
Solo Designer & Developer
Concept & Product Strategy
Design System Design
Location Search
Forecast & Model Comparison
Dark / Light Mode
AI-Assisted Development
Solo Designer & Developer
Concept & Product Strategy
Design System Design
Location Search
Solo Designer & Developer Concept & Product Strategy Design System Location Search Forecast & Model Comparison Dark / Light Mode AI-Assisted Development
Forecast & Model Comparison
Dark / Light Mode
AI-Assisted Development
Design & Build Stack
Blackcomb Mountain, 7th Heaven. The conditions that informed the design. Photo by the author.
Blackcomb Mountain, 7th Heaven. The conditions that informed the design. Photo by the author.
Context
Gusty is a mobile-first wind forecast app for people who like to explore the great outdoors and need fast, location-specific conditions before heading into the field.
I designed and built it myself from concept to deployed product using an AI-assisted workflow.
Wind affects snow differently at every elevation and aspect. That's why a sea-level forecast tells a backcountry user almost nothing about snow stability in the mountains.
Problem
There are many excellent weather apps out there, so why build a new one?
The primary limitation of existing weather tools is their inability to forecast conditions at hyper-specific locations and elevations. A forecast for Whistler tells you nothing meaningful about wind speed at the summit of a specific ridge at 2,100 metres. That gap matters enormously when you're making decisions in avalanche terrain.
Gusty is designed as a companion forecasting tool — not a replacement for existing services, but a precision layer on top of them. Used alongside windy.com, Environment Canada, and spot.wx, it enhances your ability to understand wind, precipitation, and temperature at the exact coordinates and elevation that matter to your objective.
The ultimate goal is better decision-making in avalanche terrain. But anyone who cares about what the weather is actually doing at a specific place — not just a nearby city — will find it useful.
Overview of the core product screens: landing, location search, settings, and forecast model detail.
Gusty is a fully responsive web app, to support pre-trip planning at home.
Approach
This project started with a core UX insight, in the context of planning a trip into avalanche terrain: "Is it safe to enter the backcountry today?" That single question shaped every screen, every component, every data decision. The target user is in planning mode — focused, slightly anxious, time-pressured. Mobile 70% of the time, often with gloves.
Before writing a single line of code, I built a complete design system using a designer skill. Two fonts — Inter for UI text, DM Mono for all numeric data values. Three surface levels. A wind color ramp based on meteorological convention, running green through yellow, amber, orange, red, and purple for extreme conditions. The color does the cognitive work before the user reads a number. This investment paid off immediately — every screen came out visually consistent without any extra prompting.
The app is built across four screens, each developed as a focused prompt in its own Cursor agent session. The forecast view is the primary screen — a wind hero, hourly strip, model comparison panel, daily strip, and avalanche conditions card. The search screen pairs a Mapbox outdoor map with live geocoding and a tap-anywhere-to-forecast interaction. The saved spots screen shows your pinned locations with wind ramp coloring and live danger indicators. The detail view renders three synchronized Chart.js charts — wind, temperature, and precipitation — across a shared scrollable 48-hour time axis.
Real weather data came from two APIs requiring no authentication. Mapbox GL JS handles the map, geocoding, and a custom orange teardrop pin. Open-Meteo serves ECMWF, GFS, and GEM model data — pass it coordinates and elevation, get 48 hours of real forecast data back as clean JSON. The model comparison panel makes three separate API calls and calculates the spread between them to generate a plain-language confidence note: "Models agree within 3 km/h — high confidence."
Wind color ranges grounded in the Beaufort Scale. Optimized for dark and light mode, with WCAG AA contrast compliance.
Three typefaces. Three distinct jobs. Barlow for identity, Inter for interface, DM Mono for data.
Dark mode reduces eye strain in low-light conditions and preserves battery on OLED screens. Light mode improves legibility in bright alpine environments. Both are fully supported.
Outcome
Gusty started off strong, with 332 unique visitors in the first 30 days. 59% on mobile — the design assumption validated by real usage. 37% senior-level audience, zero paid promotion.
I integrated product thinking, UX strategy, design taste, and domain knowledge. The AI removed the syntax barrier. The gap between "person with good ideas" and "person who can ship" collapsed to basically zero.
Tech Stack
Frontend
Maps
Charts
Weather data
Geocoding
Version control
Editor
Fonts
Frontend
Maps
Charts
Weather data
Geocoding
Version control
Editor
Fonts
Vanilla HTML, CSS, JavaScript
Mapbox GL JS
Chart.js
Open-Meteo API
Mapbox Geocoding API
GitHub
Cursor
Inter and DM Mono
Vanilla HTML, CSS, JavaScript
Mapbox GL JS
Chart.js
Open-Meteo API
Mapbox Geocoding API
GitHub
Cursor
Inter and DM Mono
Check the forecast
Problem
There are many excellent weather apps out there, so why build a new one?
The primary limitation of existing weather tools is their inability to forecast conditions at hyper-specific locations and elevations. A forecast for Whistler tells you nothing meaningful about wind speed at the summit of a specific ridge at 2,100 metres. That gap matters enormously when you're making decisions in avalanche terrain.
gusty is designed as a companion forecasting tool — not a replacement for existing services, but a precision layer on top of them. Used alongside windy.com, Environment Canada, and spot.wx, it enhances your ability to understand wind, precipitation, and temperature at the exact coordinates and elevation that matter to your objective.
The ultimate goal is better decision-making in avalanche terrain. But anyone who cares about what the weather is actually doing at a specific place — not just a nearby city — will find it useful.
Approach
This project started with a core UX insight, in the context of planning a trip into avalanche terrain: "Is it safe to enter the backcountry today?" That single question shaped every screen, every component, every data decision. The target user is in planning mode — focused, slightly anxious, time-pressured. Mobile 70% of the time, often with gloves.
Before writing a single line of code, I built a complete design system using a designer skill. Two fonts — Inter for UI text, DM Mono for all numeric data values. Three surface levels. A wind color ramp based on meteorological convention, running green through yellow, amber, orange, red, and purple for extreme conditions. The color does the cognitive work before the user reads a number. This investment paid off immediately — every screen came out visually consistent without any extra prompting.
The app is built across four screens, each developed as a focused prompt in its own Cursor agent session. The forecast view is the primary screen — a wind hero, hourly strip, model comparison panel, daily strip, and avalanche conditions card. The search screen pairs a Mapbox outdoor map with live geocoding and a tap-anywhere-to-forecast interaction. The saved spots screen shows your pinned locations with wind ramp coloring and live danger indicators. The detail view renders three synchronized Chart.js charts — wind, temperature, and precipitation — across a shared scrollable 48-hour time axis.
Real weather data came from two APIs requiring no authentication. Mapbox GL JS handles the map, geocoding, and a custom orange teardrop pin. Open-Meteo serves ECMWF, GFS, and GEM model data — pass it coordinates and elevation, get 48 hours of real forecast data back as clean JSON. The model comparison panel makes three separate API calls and calculates the spread between them to generate a plain-language confidence note: "Models agree within 3 km/h — high confidence."
Outcome
Gusty started off strong, with 332 unique visitors in the first 30 days. 59% on mobile — the design assumption validated by real usage. 37% senior-level audience, zero paid promotion.
I integrated product thinking, UX strategy, design taste, and domain knowledge. The AI removed the syntax barrier. The gap between "person with good ideas" and "person who can ship" collapsed to basically zero.
Writing good prompts is genuinely a skill. The best ones were: Specific about structure — "label → legend → chart, repeated for all three sections" Referenced existing files — @gusty-design-system.html, @Guidelines.md
Frontend
Maps
Charts
Weather data
Geocoding
Version control
Editor
Fonts
Vanilla HTML, CSS, JavaScript
Mapbox GL JS
Chart.js
Open-Meteo API
Mapbox Geocoding API
GitHub
Cursor
Inter and DM Mono
Tech Stack
Product Design, Strategy, & Leadership
Vancouver, BC
Product Design, Strategy, & Leadership
Vancouver, BC