A bunch of the colorful Mr. Chilly app screens A bunch of the colorful Mr. Chilly app screens

Designing Mr. Chilly: The San Francisco microclimates app

Mr. Chilly—an app I made with developer Alex Chia—is an animated look at the Bay Area's various microclimate temperatures. Mr. Chilly quickly exploded in popularity and has been downloaded over 100,000 times, with many loyal paid users.

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

A foggymandered heat map of San Francisco

While the current version uses a proprietary blend of various data sources, the original app used Weather Underground's data. I associated each neighborhood label and foggymandered region with a WU weather station.

Neighborhood labels and their associated weather stations A screenshot of my Photoshop layers, showing the SF heat map and labels

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 SVGs with CSS blurring and masking to create the SF-shaped heat map. I animated the sun rays and ocean waves using CSS animations. The developer could then translate my CSS into iOS-friendly code.

A screenshot of HTML code. There are lots of SVGs. A screenshot of the HTML/CSS mockup, which is a pixel-perfect match for the iOS app

You can get Mr. Chilly on the App Store here.