Shawn Allen

Principal Engineer & Design Systems Architect
San Francisco, US.

About

I'm an engineer, interaction designer, and teacher with over two decades of experience leading complex web development, design systems, and data visualization projects in government, open source, and creative agency environments. I design and build performant and scalable products, mentor and manage individual contributors, and have led the delivery of critical public services and foundational design systems.

Skills

Design Systems

Tailwind, Storybook, Docusaurus, Primer, Design Tokens, Plugin Development.

Testing

TDD, BDD, E2E Testing, Browser Automation, Code Quality, Test Automation.

VCS & CI/CD

GitHub, GitHub Actions, CircleCI, Continuous Integration, Continuous Delivery, Release Automation, Documentation Automation.

CMS & Data

Next.js, Django, Jekyll, Drupal CMS, Wagtail, Data Migrations, Content Translation, i18n.

Cloud & Infrastructure

AWS, Ansible, AWX.

Languages

JavaScript, TypeScript, Python, shell scripting, Java.

Web technology

HTML, CSS, JavaScript, SVG, HTTP, accessibility, responsive design, web performance.

Work

City & County of San Francisco
|

Principal Engineer, Engineering Manager

San Francisco, CA, US

Summary

Led critical digital initiatives for the City & County of San Francisco, encompassing pandemic response, the development of a new design system, and a ground-up rebuild of SF.gov, while also serving in an Engineering Manager capacity.

Highlights

Directed the rapid deployment of a forms management system, enabling City staff to deliver essential aid and services during the pandemic lockdown.

Developed and launched a near-real-time COVID vaccination site listing, integrating public and private data sources and translating content into Chinese, Spanish, and Filipino to serve diverse communities.

Architected and led the complete rebuild of SF.gov using Next.js and a Django/Wagtail backend, significantly enhancing performance and user experience.

Developed and integrated SF.gov's new design system (Tailwind, Storybook, Docusaurus) with the Drupal CMS, establishing a scalable and consistent user interface.

Automated AWS infrastructure deployment using Ansible and AWX, streamlining operations and improving system reliability and scalability.

Served as interim Co-Director of Technology and led dozens of engineering efforts, fostering org-wide best practices through management, mentorship, pairing, and code review for multiple teams.

GitHub
|

Systems Designer

San Francisco, CA, US

Summary

As a founding Systems Designer, contributed to the foundational GitHub Design Systems team, enhancing core frameworks and spearheading initiatives for improved consistency, accessibility, and performance.

Highlights

Maintained, improved, and refactored GitHub's CSS framework, Primer, streamlining testing, contribution, and publishing workflows for thousands of contributors.

Reviewed hundreds of pull requests to GitHub's monolithic Rails application, ensuring consistency, accessibility, and maintainability across a decade-old codebase.

Architected Primer's React component library, laying the groundwork for dark mode on github.com by driving adoption of Primer and design tokens.

Systematically measured Primer adoption and implemented logging stats in Datadog, successfully reducing CSS footprint across the platform.

18F
|

Front End Design Lead

San Francisco, CA, US

Summary

Led front-end design initiatives for 18F, a federal digital consultancy, driving strategic direction, managing a team, and delivering impactful open-source projects for government agencies.

Highlights

Defined and documented 18F's front-end strategy, providing technical leadership and mentorship to direct reports.

Spearheaded the development of the U.S. Web Design Standards, which became the de facto design system for dozens of federal agencies.

Refactored interactive components to leverage WAI-ARIA best practices and developed 'receptor', an open-source library still used by USWDS.

Improved documentation systems and led intake and research sessions for agencies adopting the U.S. Web Design Standards.

Freelance Consultant
|

Independent Contractor

San Francisco, CA, US

Summary

Provided specialized consulting services, designing and implementing data visualization systems for diverse clients.

Highlights

Designed and developed a comprehensive visualization system for energy consumption, enabling clearer data interpretation.

Created an open elections data portal for an Indonesian client, enhancing transparency and public access to electoral information.

Stamen Design
|

Partner & Interaction Director

San Francisco, CA, US

Summary

As a Partner and Interaction Director, led the planning, design, and development of hundreds of interactive data visualizations and maps, contributing to business growth and strategic direction for nearly a decade.

Highlights

Planned, designed, managed, and built hundreds of interactive data visualizations and maps for a diverse client base at a groundbreaking design studio.

Drove client acquisition, project management, and long-term business planning as one of three business partners.

Directed and owned the user experience (UX) discipline, leading explorations and co-developing interactive prototypes.

Collaborated with visual designers to craft delightful interfaces and with engineers to optimize runtime performance.

Engaged in public outreach through speaking and teaching, enhancing the studio's reputation and thought leadership.

Maxis / Hill & Knowlton / Kit Interactive / extension11
|

Interaction Designer

San Francisco, CA, US

Summary

Pioneered web design and interaction design across multiple agencies and studios, developing innovative digital solutions and foundational systems.

Highlights

Developed a proto-CMS from scratch, demonstrating early expertise in full-stack web development and system architecture.

Became an expert in Flash before ActionScript's prevalence, leveraging it to build advanced web applications for a PR firm.

Architected the first Flash-based console game front end for Maxis, contributing to innovative user experiences in gaming.

Gained proficiency in UNIX and version control, establishing a strong technical foundation for web development.

Projects

Creative Code Summer Immersive Instructor

Summary

Taught three courses (Web Skills, JavaScript, and Data Visualization) to a class of 14 students for the inaugural Creative Code Summer Immersive at San Francisco's Gray Area art and design foundation.

Data Visualization Summer Intensive at SVA

Summary

Taught a month-long summer intensive on data visualization at the Parsons School for Visual Arts.

Data Visualization Intensive at CIID

Summary

Developed and taught a 2-week intensive course on data and visualization in collaboration with David Mellis (creator of Arduino) at the Copenhagen Institute for Interaction Design's Pilot Year.

Awards

Special Commendation (Online Category)

Awarded By

Prix Europa

Recognized for groundbreaking work with VPRO on the "Nederland van Boven" series, receiving a special commendation in the online category.

Best Interactive Website (TV/Radio Program Related)

Awarded By

Prix Italia

Awarded for interactive website work with VPRO at Stamen, related to a TV or radio program.

Languages

English
Spanish