Secular Products

by Shawn Allen

Work

This is a selection of projects that I’ve worked on in a variety of capacities, most recently in my current role as a Front End Design Lead for the U.S. government at 18F, and as Interaction Director at Stamen Design from 2005 to 2013.

More personal projects can be found on my GitHub profile.

U.S. Web Design Standards

2016 for 18F (read more)

Landing page template Documentation template

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.

Roles
  • developer operations
  • user research
  • component design and implementation
  • performance optimization
  • browser compatibility
  • package management
  • code maintenance
Tools

College Scorecard

2015 for 18F with Department of Education, U.S. Digital Service (read more)

College Scorecard

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.

Roles
  • front-end implementation
  • sketching workshop facilitation
Tools

US EITI

2014 for 18F with Department of the Interior, Deloitte (read more)

Land ownership map

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.

Roles
  • data exploration
  • data management
  • map design
  • front-end implementation
  • sketching workshop facilitation

Surging Seas 2.0

2013 for Climate Central with Stamen (read more)

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

Roles
  • technical design
  • front-end implementation
Tools

Map Stack

2013 for Stamen (read more)

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

Roles
  • concept development
  • interface design
  • front-end implementation
Tools

Jawbone UP @ TED

2013 for Jawbone with Stamen

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

Tools
  • JavaScript
  • D3

here.stamen.com

2013 for Nokia with Stamen (read more)

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.

Roles
  • technical guidance
  • front-end implementation

Golden Gate National Recreation Area Maps

2013 for The Golden Gate Parks Conservancy with Stamen (read more)

GGNRA Trail Explorer GGNRA Trip Planner

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.

Roles
  • front-end implementation
Tools

Mapping Music on Facebook

2013 for Facebook with Stamen (read more)

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

Roles
  • concept design
  • technical guidance

Chesapeake Bay Grasses

2013 for The Chesapeake Bay Program with Stamen (read more)

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.

Roles
  • data transformation
  • data visualization
  • interface design
  • cartography
  • front-end implementation
Tools

VPRO’s Netherlands from Above

2012 for VPRO with Stamen

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:

Roles
  • project scoping
  • data wrangling
  • concept development
  • front-end implementation

Surging Seas

2012 for Climate Central with Stamen (read more)

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.

Roles
  • front-end implementation
  • data wrangling
Tools

Energy Efficiency in San Gabriel Valley

2012 for PMC with Stamen (read more)

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.

Roles
  • concept development
  • front-end implementation
Tools

maps.stamen.com

2012 for Stamen (read more)

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.

Roles
  • front-end implementation
Tools

Mapping Viral Photos on Facebook

2012 for Facebook with Stamen (read more)

Scatter plot matrix analysis

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

Roles
  • data analysis
  • technical guidance

Chernobyl Diaries

2012 for Warner Bros. with Stamen (read more)

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.

Roles
  • data management
  • cartography
  • front-end implementation
Tools