Designing a better San Francisco weather app

Mr. Chilly is an app I made with rockstar iOS developer Alex Chia. It's an animated look at SF's different microclimate temperatures.

Download Mr. Chilly on the App Store.

To draw the user's eye to the right places, I used a toned-down palette for the background landscape and a poppy palette for the climate heat map.

App

I designed a bell-curved system of colors and temperatures, and divided up the city into its various neighborhoods. Foggymandering.

Weather stations

Since we're pulling Weather Underground's data, I associated each neighborhood label and foggymandered region with a WU weather station.

Neighborhoods and stations Weather stations sections

To make sure that my ideas were programmatically feasible—and to build animations that I could hand over to the developer—I built out visual components of the view in HTML and CSS.

I used vector graphics with CSS blurring and masking to create the SF-shaped heat map. I animated the sun rays and ocean waves.

HTML HTML mockup

The app is currently available on iPhone 5, 6 and 6+.