Secular Products

Primer is GitHub’s design system, and as part of the Design Systems team I’ve worked to modernize, refine, and improve both the system itself and practically all of its technical underpinnings: from workflow and process overhauls to large-scale refactors of the Primer CSS codebase that powers much of github.com.

The U.S. Web Design Standards is an ambitious project to provide government agencies with ready-to-use design and interaction patterns–along with all of the code that implements them–that offer consistent and enjoyable user experiences out of the box. I joined the project about a year after its public launch to help prepare a (mostly symbolic) 1.0 release, refactor the development and release processes, and improve documentation and testing tools.

We helped the U.S. Department of Education redesign their College Scorecard from the ground up with direct input from the public and a gigantic cache of open data about every college in America. I worked with a team of brilliant colleagues from the U.S. Digital Services and 18F to turn the never-before-seen data into a website that helps anyone seeking higher education easily find colleges that suit their needs and align with their values.

The Extractives Industry Transparency Initiative (EITI) is a global standard that promotes open and accountable management of natural resources. We worked with the Department of the Interior, the U.S. agency that manages public federal lands and administers “extractive” leases (such as oil, gas, and mining), to develop a web-native version of America’s first EITI report.

For the second generation of Surging Seas, we redesigned the map tile rendering system to use Sando for client-side compositing.

Map Stack is an interactive web application for mixing together tiled map styles from Stamen, MapBox, and other sources.

Visualizations of the Jawbone UP community’s activity during the 2013 TED conference.

We produced a collection of 3D maps for Nokia using their data and a Frankenstein-like interaction and rendering system based on Polymaps and Three.js.

In 2013 we redesigned all of the GGNRA’s maps, and introduced two new features to the site: a data-driven trail explorer and a trip planner. We developed these enhancements to the live site (and launched them with zero downtime) using a novel proxying technique, which I adapted for a general-purpose tool called Prosthetic.

This 3D geographic equalizer shows the most popular songs on Facebook pulsing to their respective beats and volume of listens.

This interactive exploration of sea grass density in the Chesapeake Bay helps visitors understand a complex ecosystem through maps and simple visualizations of water temperature, salinity and turbidity. The map enables comparison of sea grass density using overlapping layers with interlocking patterns.

These interactive maps for the Dutch public broadcaster VPRO’s Nederland van Boven (“Netherlands from Above”) TV program won a prestigious award at the 2013 Prix Italia. In their description for the nominee short list the judges remarked:

We created this interactive map for Climate Central to show the potentially devastating effects of sea level rise on coastal American communities. The map was named one of The Atlantic’s favorite maps of the year.

An interactive application developed in collaboration with PMC to inspire cities in the San Gabriel Valley Council of Governments to improve their effeciency and reduce environmental impacts.

We developed this showcase for the distinct map styles that we created as part of our Knight News Challenge grant, under the umbrella of Stamen’s Citytracking initiative.

This artistic rendering depicts the viral spread of three very popular photos on Facebook, and was at the time the most popular piece of content yet on Facebook Stories.

more: process

We conceived of this interactive map as a way for fans of the Oren Peli film Chernobyl Diaries to vote for their city to receive a pre-release screening. One particularly clever approach devised for this project was to pre-calculate the visibility and orientation of labels for over 500 of the largest American cities at each of the map’s zoom levels using Dymo, then use that data to render the labels dynamically in HTML rather than in tiled images. We adapted our watercolor map rendering process to create the creepy custom base map.