About
I design and develop web and data software for the public good.
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 developed a TailwindCSS-based system (backed by Storybook and a website built with Docusaurus) and successfully integrated the system onto 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 built an additional layer of management using version-controlled YAML files and a snapshot 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.
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 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.
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 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.’ˮ
Contact
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]".
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.
Work Experience
I'm an engineering manager and principal IC with the San Francisco Data & Digital Services team. I built a web form solution for sf.gov at the height of the COVID-19 pandemic, kickstarted the development of the City's new design system, and continuously strive to document and improve team-wide development 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 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 the kind of 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.