Experience
Portfolio
I spent the past 7 years specializing in Design System work. I've architected a new system from the ground up and led the adoption of this system from zero to 99% of product surfaces. Additionally I was the engineering lead for documentation, building and maintaining our internal resources including a website and other self service support options.
Unfortunately, all of my recent work is internal and non public, however I have curated a set of portfolio pieces, linked below. These are only snippets of much larger work, please reach out if you would like a deeper dive into any of this work.
Motion Documentation
It's difficult to document motion guidelines without actually seeing the motion. One of the original design decisions we made with our design system documentation was using our actual components and tokens to build the website. That made it substantially easier to document motion examples with perfect accuracy. Our customers knew what they were seeing was what they would get. We also went above and beyond the basic accessibility recommendation of prefers-reduced-motion and created animation that required the affirmative action of clicking on the element to start the animation, ensuring accessibility, reduced system resource usage, and a generally less annoying documentation page.
Motion documentation exampleToken Documentation
Tokens are possibly the most important artifact of a design system. With a single source of truth for you design decisions, the team can recreate anything else they need. Documenting tokens can be tricky - you usually have at least a few dozen, if not more - this system had 307, after reducing duplicates and unnecessary tokens! We decided to take the usual table based approach, but enhanced it with multiple filtering options, and leveraged our site wide usage of tokens to display actual rendered token values for the user. Additionally we customized our usage of style-dictionary to add useful metadata directly to the token output for documentation purposes. This provided not only assurance to our users that what they saw was what they would get, but also cut down on the manual labor of creating images and making manual updates when token names and token values changed, or when we inevitably added new tokens.
Token documentation exampleThis website!
I've been building this website using a lightweight and flexible psuedo-framework called tea-stack that connects Eleventy, Tailwind, and Alpine into an easy to use stack that is great for everything from personal websites to prototyping. Eleventy gives you the ability to source data from a number of places, and access all of it using any number of flexible templating languages, and Tailwind and Alpine combine to give you quick styling and just enough javascript to progressively enhance interactions and small pops of animated delight.
Source on GitHub