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 is an animated look at the Bay Area's various microclimate temperatures. The app has been downloaded over 100,000 times, with many loyal paid users. I created the app with developer Alex Chia.

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.

NOE VALLEY - KCASANFR93 ("Noe Valley")
MISSION - KCASANFR142 ("Mission (at Bar and Burrito))"
HUNTER'S POINT - KCASANFR283 ("Precita Park")
SOMA - KCASANFR231 ("SOMA")
FIDI - KCASANFR102 ("Financial District")
NORTH BEACH - KCASANFR137 ("North Beach")

SF broken into different neighborhoods, each one associated with a specific weather station

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 and CSS to create the SF-shaped heat map and animated elements. The developer could then translate my code into iOS-friendly code.

<svg class="weatherStations" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 854 1039" enable-background="new 0 0 854 1039" xml:space="preserve">
<path fill="#000000" class="KCASANFR161westwoodPark" d="M385,582 384.2,581.3 381.9,579.2 349.5,549.8 348.7,550.2 329,560 288.5,587.9 285,590.3 282,604 282,628.3 282,628.7 282,648 298,678 338,682 340.7,680.8 347,678 378,646 382.7,645.1 387.6,644.2 394,602zz"/>
<path fill="#000000" class="KCASANFR70sunnyside" d="M474.5,570.9 449,566 427,566 398,566 381.9,579.2 381.9,579.2 384.2,581.3 385,582 394,602 387.6,644.2 405,641 411.5,646.1 415.4,649.1 440.7,633 464.2,617 467.1,614 475,606 475,573 475,571z"/>
...

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.