About
I design and develop web and data software of all shapes and sizes, usefully for the public good.
I've worn many hats, and designed and built solutions and frameworks at every level of the proverbial stack. I'm deeply proficient in JavaScript and Python (and I can hack it in Ruby, Go, or Java). I'm passionate about good testing practices, automation, and code quality. I've got over 20 years of UNIX/Linux systems development experience, love working with data, and know my way around cloud computing environments.
I'm equally comfortable in IC, management, and hybrid roles. I love reading and writing great documentation, proposing and evaluating solutions with Architectural Decision Records, and working with agile teams that value clear and respectful communication.
Projects
I joined the City's Digital Services team as the lead engineer on the SF.gov design system. The design system work took a back seat to more pressing issues when the pandemic hit, but in 2022 we regrouped to develop a TailwindCSS-based system backed by Storybook and Docusaurus, and integrated the system on (Drupal-based) SF.gov.
I built the backend for SF.gov's COVID-19 vaccination site listing and helped integrate it onto the site. Initially, the service pulled site vaccination site info from DataSF and near-realtime appointment info from several disparate sources, including California's MyTurn API and pharmacy networks.
Before we were given direct access to the data, our team needed the ability to both editorialize and translate vaccination site information for use on SF.gov. So we bolted on a layer of data management with version-controlled YAML files and a snapshot-driven testing system that allowed us to see how upstream changes would affect how sites were displayed and described to the public.
Well into 2022, our team continued running weekly updates to ensure that SF.gov provides useful and up-to-date information to get San Franciscans vaccinated against COVID-19.
When the COVID-19 pandemic hit, I was tasked with integrating a newly procured form system into SF.gov so that City departments could offer more of their services online, including direct relief grants and expanded outdoor permitting applications for restaurants. I created a Form.io theme to match the look and feel of SF.gov, developed a Drupal integration with my teammates, and worked with content and product teams to deliver a translation system for form content backed by Google Sheets.
I eventually transitioned us from our Google Sheets translation system to a managed service, then later to a Drupal-based workflow. I also developed custom form preview, translation, and testing tools. Along the way, I contributed several bug fixes and features to the form.io JavaScript library.
I planned and developed the original Primer site with a three-person team as an umbrella for GitHub's disparate design system documentation. The site hosts sub-sites for documentation of individual design system implementations (CSS, React, Octicons, and design guidelines), an aggregated release log, and uses Primer's own React component library.
As a core team member of the GitHub design system team I built and maintained a suite of tools to ease both development and integration of the Primer CSS implementation.
There were three major parts: a stylelint plugin with custom rules to flag instances of custom CSS that conflicted with Primer's CSS utilities and enforce the use of specific SCSS variables in known CSS properties; reporting tools to identify and quantify rule violations across hundreds of SCSS files; and finally, stylelint-driven CLI tools to refactor the codebase via stylelint rule fixes.
I co-developed the first major release of the GitHub design system's React component implementation. This was my first React project, and I made lots of mistakes. But I learned a lot about component-driven development and design, the styled-system + system-ui stack, theming, and webpack along the way.
I helped design and implement the initial release of the public dashboard for the US federal government's Digital Analytics Program, which aggregates Google Analytics data from participating federal sites into a single public data source.
I developed this interactive map of sea grass density for the Chesapeake Bay Program, a partnership of federal, state, non-profit, and academic institutions dedicated to the protection and restoration the Chespeake Bay. The time slider allows you to move through nearly 20 years of historical data and see sea grass density on the map alongside thumbnail visualizations of water temperature, salinity, and turbidity. The project no longer appears to be maintained, but you can read more on stamen.com.
I designed the maps for the pilot print issue of SF Public Press's series on San Francisco's Treasure Island. The maps highlight a slew of challenges for developers and residents, from earthquake liquefaction and sea level rise to hazardous waste.
Side Projects
Before the big companies adopted HTML custom elements, there weren't many places where one could read about the technology aside from the W3C specs. So I documented what I'd learned on GitHub, and kept it relatively up-to-date for nearly 7 years.
I taught three courses on Web Skills, JavaScript, and Data Visualization to a class of 14 students for the inaugural Gray Area Creative Code Summer Immersive. The students learned how the web works, how to make things happen in browsers, then put that knowledge to use to visualize their own data with D3.
I wrote a JavaScript implementation of continuous area cartograms using D3 that makes it possible to scale map shapes with data. The demo doesn't work anymore, but you can find a couple of other examples on the web, including this animated map of Georgia counties by population (source) and this tutorial.
I taught a month-long course on data visualization for the MFA in Interaction Design at SVA. The blog posts document the course material that I wrote and presented.
I developed a 2-week intensive on data visualization theory and interactivity and taught it with David Mellis (creator of Arduino) in Copenhagen.
This was a challenging and fulfilling experience, and both my students and the CIID staff were wonderful. One student went on to found his own data visualization studio; another later worked for the State of California, where I ran into him on Slack while coordinating COVID-19 vaccine efforts with the San Francisco Digital Services over 12 years later.
I joined a group of open data and government luminaries (among them Tim O'Reilly, Lawrence Lessig, Carl Malamud, and Ethan Zuckerman) to "devise a list of 10 principles of open government". It was a mind-expanding exercise that planted the seeds of my public service work over a decade later.
Exhibitions
In 2008 I spent a rainy weekend afternoon designing an abstract map of San Francisco from three disparate data sources: urban tree locations, Yellow Cab taxi GPS positions, and SFPD crime reports. I used subtractive blending to mimic CMYK color separations, hoping to highlight areas of overlapping data with unique colors.
The map itself wasn't particularly interesting, but the technique piqued the interest of local map nerds and, eventually, the Spontaneous Interventions curators, who chose it for exhibition in the U.S. pavilion at the Biennale of Architecture in Venice.
I built a custom data visualization for MoMA with Gabriel Dunne using curated portions of Yellow Cab taxi location data from the Cabspotting project.
Fun, random fact: When the piece was on display in the Action! Time on Display exhibit in 2010, I visited MoMA with a friend and had the pleasure of explaining the piece to Meg Ryan.
Speaking
I gave the keynote presentation at the 7th International Symposium of Visualization held by the Transportation Research Board, a part of the US National Academies of Sciences, Engineering, and Medicine that "mobilizes expertise, experience, and knowledge to anticipate and solve complex transportation-related challenges."
I gave a talk on Stamen's data visualization practice at the AIGA Visualized conference.
I sat on a panel about data visualization and mapping at the Open Cities conference in 2010. I met a lot of wonderful and inspiring people at this event, including Jen Pahlka, Beth Noveck, Alissa Walker, Nick Grossman, Nicholas de Monchaux, Jess Zimbabwe, Mike Frumin, Christine Gaspar, and Ben Berkowitz.
“Shawn Allen, a partner and designer at the design firm Stamen, pointed to maps and visualizations made by his firms and others that visualize urban life. Design, Allen said, should be ‘beautiful and useful,’ and its place, he said is ‘at the nexus of beauty and utility. The only thing statistical maps and data do is get the conversation started.’ˮ
Mike Migurski and I led a 3-hour workshop that dove deep into creating a map tile service from scratch on AWS EC2 with geographic data, Mapnik, and TileCache.
I participated in this design exercise for SPUR that paired designers with San Francisco municipal staff to look propose solutions to under-funded City challenges. My "client", SFMTA's Timothy Papandreou, was interested in a citywide bicycle parking system.
As an avid cyclist with lots of city bike experience, I had strong opinions and framed the challenge as a chicken-and-egg scenario: Cyclists need better bike parking to feel comfortable riding and leaving their bikes, but the City won't build build it without evidence for the demand. I reviewed some of the solutions in other cities (noting, for instance, that one parking space can accommodate up to 30 bikes) and created maps using open and civic data to show where cyclists were most likely to lock up. I also highlighted that space isn't the only challenge: whole and partial theft are serious challenges that require higher levels of security than just a post to lock your bike to.
My conclusions? More parking was needed, and lots of it. And, absent a network of secure bike lockers, I proposed a novel solution to the challenge of making park a better solution: Devalue the bike. Make cheap, forgettable, lose-able bikes the standard by deploying a fleet of junkers that anyone can use.
Contact
Writing
I wrote and presented this overview of the data visualization field for my Summer Intensive course at the Parsons School of Visual Arts (SVA).
Awards
My work with VPRO, the Dutch public broadcaster who produced the groundbreaking Nederland van Boven ("Netherlands from Above") series, won a special commendation in the "online" category of the Prix Europa awards in 2012.
My work with VPRO also won an Italian award for "Best interactive website related to a TV or radio program[me]".
Stamen was voted one of the 20 most influential design studios of 2009!
Features
I worked with power grid analyst Sam Borgeson to develop visualization interfaces for exploring and understanding electricity distribution and usage data from PG&E. Our work was published in the 2015 Human-Computer Interaction's international conference proceedings titled "Design, User Experience, and Usability: Interactive Experience Design".
The Data Visualization issue of Process's NorCal chapter in Spring 2013 featured Trees, Cabs & Crime on the cover and a 2-page spread on Stamen's practice.
Tim Lillis and I discussed how Stamen works, inspiration and collaboration, and more.
Work Experience
I'm an engineering manager and principal engineer with the San Francisco Data & Digital Services team. I brought web forms to sf.gov at the height of the COVID-19 pandemic, kickstarted development and integration of the City's new design system, lead engineering of service delivery efforts, served a stint as acting co-Director of Technology, and continuously strive to document and improve team-wide practices.
I was an early member of the GitHub design systems team and took on a lot of workflow, ops, and tooling projects to supercharge development of the CSS framework, its nascent React component implementation, and a years-long effort to delete thousands of bespoke stylesheet rules spread across hundreds of CSS files (and hundreds more ERB templates!) in the github.com source code.
Along the way I learned Ruby and React from my amazing colleagues, became an early adopter of GitHub Actions, and built a suite of code analysis tools to inform organization-wide CSS and HTML refactoring efforts.
I took a leap from the private sector and joined an amazing team of wonderful, talented people putting their design, product, and technology skills to use for the American people at 18F, a digital consultancy within the U.S. federal government's General Services Administration.
As one of three front end design leads I was responsible for holding regular 1:1s with my reports, researching and writing documentation to inform 18F's front end strategy, and a wide variety of IC work: building new web applications, reviewing pull requests and design specs, and running design and ideation sessions with project teams.
My final project at 18F was the U.S. Web Design Standards, which has gradually become the de facto design system of numerous federal agencies. I refactored interactive components to use WAI-ARIA best practices (and developed a selector-based behavior utility called receptor along the way), improved documentation systems, and occasionally led intake and research sessions with agencies interested in using the system.
Over the course of nearly a decade I planned, designed, managed and/or built dozens—possibly hundreds—of interactive data visualizations and maps at this groundbreaking and prolific design studio in San Francisco's Mission district.
As one of three business partners I took part in client acquisition, project management, hiring, public engagement (mostly speaking and teaching), and long-term business planning. In around 2010 I adopted the title of Interaction Director and made myself responsible for Stamen's UX discipline, developing static explorations and interactive prototypes, working with visual designers to build delightful interfaces, and with engineers to optimize runtime performance.
After my old company imploded on September 11, my manager spun off a small team that specialized in white-label web apps for public relations firms. I salvaged my work from the previous job and fashioned it into a sort of proto-CMS, learning a lot about data modeling and database administration along the way.
In 2000, San Francisco was the rare place where an 18-year-old art school drop-out could score a respectable salary slinging pixels. I interviewed on a whim and was shocked when my then-future boss, Darren David, offered me the job. I learned Flash and explored generative design. I read the O'Reilly books on PHP, MySQL, Perl, sed and awk, and CVS (the original version control system); then used them to build an in-house content management system for our clients.
The dot-com bubble burst the following year, and most of extension11's business evaporated into thin air. Darren had left already, and the company was struggling to pay the bills when September 11th happened. Later that day my boss called to tell me that the company had essentially collapsed, and I met my colleagues at the office to collect my stuff.