Led the Product and Design team at StackBlitz, coordinating projects from various stakeholders and working groups, building design systems and branding for core product UIs, and shipping a multitude of docs, blog and marketing websites within demanding timeframes.

For example, helped create the theming architecture for TutorialKit, a customizable app which Node.js library authors can use to kickstart in-browser tutorials. Users can create new themes with built-in light/dark modes by simply replacing a color palette, though every element is individually themeable and can be customized at any level of detail.

In the wild: San Francisco billboard - WebContainer API logo at JS Nation - TutorialKit logo at GitHub HQ.

Created animations for various products and releases.
Shown below: StackBlitz Codeflow and StackBlitz Enterprise.

Worked closely with the Vite team, A/V partners, and StackBlitz to lead the design and development the first 3 years of ViteConf websites, ticket customization, live player interfaces and branding, helping grow the online conference to serve over 25,000 registrants by 2023.

A Vite plugin which generates .tsx and .astro components from .svg files which are type-safe, inline, and correctly render currentColor fills which are responsive to --css-variable theme changes.

1. Define an input directory    2. add svg to that directory    3. use generated <Icon> component(s) in templates.
github.com/donmckenna/svg-to-component

Worked with the Storybook and StackBlitz teams to develop storybook.new, an actionable landing page offering a multitude of Storybook template starters which are visually simple to navigate and choose technology stacks by, which run in the browser without the need for external servers.

Watch @chantastic talk about starting new projects with storybook.new:

Designed and developed updated layouts, styles and organizational components for the docs of one of my old favourite libraries, Scully.

The technology was exciting but the docs were incomplete and difficult to follow. This project started as an attempt to build a component which could use Scully's route structures and simply generate a nested hierarchy of links, but it turned into an entire docs redesign instead.

Consolidating and recompiling information, the page folder hierarchy was updated to more easily combine related elements. A new syntax highlighting theme was made, small elements were created for simple styling and writing, and every heading and code block was meticulously refined to space out previous firehoses of documentation in the most skimmable way possible.

If you're into reading documentation about documentation, the whole thing is broken down here:
github.com/donmckenna/scully-docs-navlist-redesign

A web app which allows users to create and render pdf invoices in the browser with simple, inline UI flows and patterns.

Additionally serves as a practical testing ground for an internal design system and UI component library I've been developing.

Designed and coded a new landing page for one of my old favourite open source organizations, ngneat, and their Angular testing library, Spectator.

The feature image was designed and rendered in Blender, intending to simplify the library's core functionality into a single image, playing off the existing logo and colour scheme: Write less test code. Pass tests through the lens of Spectator. Less code becomes more code. Easy.

Created a web app for touring groups to organize and optimize trip costs, peer schedules and sales groups, through a simple, fast, real-time interface. Managed development, design, UX, analytics and feature specs including front and backend architecture, user account management, app and promo site design and responsive code, mailing list management, ecommerce integration / supply management / payment processing, and logo, palette / style guide creation.

A pure CSS briefcase full of mysterious things greets users. Much of the colour scheme to follow was a sort of feedback loop from the resulting interference colours.

Real-time inventory / cost adjustment and shared user experience demonstration:

Users can create an event in only a few clicks, pushing the notification immediately to the rest of the team. Adding or editing an event is a simple, almost trivial process but is still able to collect enough useful data to paint detailed reports in the future.

A main goal for this application was to provide as many options for organization and reporting as possible, hidden behind a clear and simple UI any musician could use. Products sold at events are tracked by a number of useful metrics, offering in-depth options to calculate statistics and trends between sales, geography and product types.

A custom dropdown component was created, accepting object trees of various depths, and able to swap out layout hierarchies based on multiple recognized nested patterns.

Editing products is only as complex as the breadth of data a user needs to enter. Define single products or products with multiple variations, maintain consistent pricing across variations or edit individual variations, all within the same logic flow. The UI remains simple but informative, and the DOM remains clean and void of unused elements.

The custom dropdown component makes another appearance. Here it demonstrates awareness of its own bottom position, subsequently adding a scrollbar for overflow options. It also shows its ability to automatically render a nested object differently than it would a single-level object.

Designed and developed a web app metronome with complex options for click visualization and organization, built for travelling musicians, music students and instructors, and designed to interface with other apps like Tour Manager Greg.

Visualizations like measure indicators help the player see polyrhythms visually, making it easier to learn or internalize complex time signatures.

Created brand logo, animations and wrote copy for video and the web. Edited promotional how-to documentation videos.

When developing SEO growth strategies it is important to know how competitive a given search term is. However, "competitive" is never just a single metric so it is also useful to have a tool which can, at a glance, show the relationships between each entry, revealing terms actually worth pursuing.

The goal of the app is to accept search term metrics and output a colour-coded table, visually isolating valuable phrases from those which are too competitive or uncommon. Search terms can be organized by category and sorted by any input or calculated value, quickly revealing patterns to follow or avenues to not waste time on.

The video below demonstrates the responsive updating of categories. These are later assigned to search terms and any changes from then on are reflected in the corresponding affected data immediately.

This next video demonstrates saving and opening files, adding and editing search terms, and the real-time feedback of the "Categories" input field. Categories can be filtered by typing, and selected by pressing enter or clicking with a mouse. A selected category can be deleted like text with "backspace", or with a click as well, giving the user the ability to choose different types of workflows whether they prefer a keyboard and "tabbing" through the form, flying around with a mouse, or a combination of the two.

Facilitated the design, development and copywriting for Glome Media's website. Built on top of Angular and implemented with Netlify and Scully, the site is search engine friendly and easily expandable in functionality while maintaining consistency of styles and interaction. Designed to be more of a "journey" than a simple flyer, the challenge was to construct something compelling and bold, but retain the important aspects of trustworthiness, peace and clarity.

Finding the balance between providing users the option to sacrifice succinct cleanliness for more information, and introducing as few additional elements as possible. As if to communicate, "You don't have to interact if you don't want to, but if you want to, your experience will remain consistent".

A reactive form hooked up to SendGrid for seamless, secure and reliable user communication. CSS 3D transforms were used to "bind the minds" in more dimensions than two.

A small weekend project, Elements.fyi was a free application which showed the relationships between elements visually and simply.

Departing from low-fidelity and debatably-unattractive science apps, Elements.fyi aimed to bring together important data points from a potentially monotonous and overwhelming sea of information, to help make the experience of learning science as fun as it should be.

To convey as many interlinked pieces of information in as simple a visualization as possible, each element's detailed description contains a mini-periodic table, dynamically indicating the location of the selected element on the chart, any of its categorical sisters and their shared category name, its Period and Group numbers and other elements with which it shares an axis.