Design Systems
3 Systems. 1 Purpose.
Three design systems for scaling quality and efficiency across a team of one, a Fortune 500 enterprise, and an AI-assisted consulting practice.
Overview
I’ve built design systems to help me manage multiple websites on my own, enable 25+ product teams build a Transportation Management System for a Fortune 500 company, and to manage multiple local products while providing accurate context to AI agents. Below is a comparison of my approaches across journeys.
Challenges
Individual
Scale a Team of One
Branding: The sites were several years old. Some of the colors and logos had poor contrast and made the companies appear "stale". I needed to update the branding without neglecting their existing identities.
Content: I was initially asked to build the sites with SharePoint, which only supported Internet Explorer. We used IE inside the company, but people outside the company were using other browsers.
Scale: I was hired as a solo web designer/developer to modernize websites for a holdings company and four subsidiaries.
Fortune 500
Scale an Enterprise
Complexity: I was hired as a UX Designer to help simplify and modernize hundreds of custom applications in addition to establishing a freight marketplace for carriers and shippers.
Fragmentation: We were using multiple design tools and multiple dev frameworks and designers and developers were in constant conflict due to different ways of working.
Scale: Previously I had managed design and development by myself. Now those efforts were split across numerous people, teams, and roles.
Consulting
Scale Individuals+AI to Enterprise
Complexity: Managing multiple products across multiple teams in a constantly changing environment is very complex.
Erosion: Everyone has habits and stress behaviors. As the number of people, products, and customers grow, bad habits and stress behaviors can quickly erode customer confidence and company culture.
Scale: AI provides exciting new capabilities to scale outcomes and help more people, but it can accelerate both the good and the bad of an organization. It also introduces new challenges to trust, quality, governance, and collaboration.
Solutions
Individual
Scale a Team of One
Content Management System: Implement a .NET CMS that would work for external websites in more browsers than Internet Explorer.
Design System: Build a system to design and manage modular content elements that could translate to text styles and code within the CMS in a reusable way across 5 websites.
Fortune 500
Scale an Enterprise
Style Guide: I created a style guide using a modified version of previous approaches to align visuals and CSS. This helped solve some of the complexity, fragmentation, and scale, but was still limited in areas such as implementation, functionality, and maintainability.
Design System: Build a system to unite and manage the best design and code from one connected source.
Consulting
Scale Individuals+AI to Enterprise
Product Planner: Build a tool to unify products around personas and daily, measured priorities to long-term purpose.
Design System: Build a design system alongside Product Planner and other management tools while using AI to scale quality and usability in a repeatable and iterative way. These capabilities and practices should ultimately scale across people, teams, and organizations.
Hypotheses
Individual
Scale a Team of One
Branding: If I create a standard brand palette aligned with CSS properties, I can define unique color schemes across companies to unify overall branding while maintaining distinction.
Measures:
- WCAG AA compliant
- No inline styles
Scale: If I blend Adobe InDesign page masters with Illustrator symbols and artboards, I can design high-fidelity assets and mocks to build sites.
Measures:
- Reduce iteration time of updates across 5 websites
Fortune 500
Scale an Enterprise
Build unity: If I theme an Angular library called PrimeNG to match the designs in our PDF style guide, we will reduce repeated conflict of manually translating design to code and unify focus on customers.
Measures:
- Single source of truth for token mapping between design and code.
Scale adoption: If we partner with a team that is already pushing to use PrimeNG, we can unify Angular adoption while showcasing the ability to push enhancements from a design system to live products.
Measures:
- Adoption of library by all web products
Consulting
Scale Individuals+AI to Enterprise
Scale iteratively: If I utilize Tailwind and Storybook, I should be able to build a design system at the same time as I build a product and test the ability to maintain context across two aligned product repos.
Measures:
- Product inherits all color theming, text styles, and components from the design system.
Improve continuously: If I build a design system at the same time as I build a product, I should be able to capture best practices and documentation context and improve quality in a live environment.
Measures:
- Reduction in rework for established best practices.
Outcomes
Individual
Scale a Team of One
My systems enabled me to...
Rebrand: 5+ companies and a national customer information center with unique yet related color schemes.
Build and manage: 6 websites within Umbraco CMS to avoid custom styles and integrate WCAG AA-compliant themes with 80% reduction in update time.
Deliver: Multisite training network utilizing branding for 3 companies within targeted learning libraries of presentations, videos, and digital signage across 6 international locations.
Fortune 500
Scale an Enterprise
My design system enabled an enterprise to...
Build unity: Between 45+ designers and 2,000+ developers to standardize learned best practices from 30+ web and mobile products.
Scale: 95% adoption to introduce iterative improvements across more than 80 components, 500 variables, 300 icons, and 10 patterns based on customer feedback.
Consulting
Scale Individuals+AI to Enterprise
Integrating AI enabled me to...
Build: Support Product Planner tool with 8 text styles and 25+ variations across 7 components.
Capture and adopt: 8 core best practices to reduce tech/design debt across repeated scenarios.
Unify: Design and code as a foundation to support a product ecosystem of 23 connected tools and services and 4 products.
Starting Methods
I've always started with one website or product as a sponsor. This allows for testing adoption and stability with product designers and devs while testing usability with product users to fix issues before scaling.
Convert a Style Guide
One product team was using a library called PrimeNG as our organization was transitioning to Angular.
Since I had already created a detailed style guide, I compared the two libraries to see if we could theme PrimeNG to match the style guide.
This allowed us to avoid starting from scratch and to test early adoption with a product team.
Build for One Product
I started with my Product Planner project because it is a baseline to help me manage multiple other products. This started as a tool to autogenerate nested work items in a backlog, but progressed to needing a UI.
I knew I would need a design system to help me build faster and manage changes efficiently so I chose to start the design system at the same time I started the Product Planner UI.
I implemented all pattern-level work in the product, but built into the design system everything such as typography and components that could be used in another product. I then inherited those elements in the product.
Prioritization
Approaches differ depending on the scale of support. Integrating with an existing Fortune 500 platform is different than a new product in its beginning stages.
Platform Integration
To scale adoption within an existing platform of products we built the simplest, most widely used components first to match the style guide. This included components such as form inputs and buttons.
Product Priorities
When starting with one product with intent to scale, I built to support the product priorities, which included text hierarchy, buttons, and cards.
This enabled me to build scalable functionality within the design system, test adoption within the product, and enable product features without becoming a bottleneck.
Building the Library
Information Architecture
I think in workflows, hierarchy, and information architecture before visual design. Hierarchy, quantity of data, and flow of information impact design and pattern choices such as input types, button types, etc.
I had a rule for all my designers that I didn't want to review visual designs before I saw a mindmap of the data, the persona they were targeting, and the persona's journey.
Responsive
I shifted toward responsive design by switching from pixels to flexible units of measure (REMs and EMs). Adobe XD used pixels so we converted to REMs in our components.
We then showed a comparison in our documentation to allow designers to continue using pixels while preventing confusion and manual overrides from devs.
Color Theming
I designed a color theming engine to allow us to swap full brand themes to white label products while we used SVGs to design our design system site to showcase light and dark theming.
Some product teams used light and dark theme to test where they had overrides in their product so they could fix them. Today I'm using Tailwind as my baseline theming engine.
Tools
I've adapted tool usage to whatever best helped close the gap between design and code, idea and delivery...
Figma
I pitched and led a migration to Figma from Adobe XD across 25+ products to:
- Provide earlier visibility to product and design system disconnects.
- Improve communication and collaboration across product teams.
- Enable enterprise-level administration to manage teams, licensing, permissions, and analytics.
AI
I used Figma Make and MCP servers as a bridge for developers to reference Figma prototypes and design system usage guidelines directly from their GitHub Copilot chat without needing to search other locations.
I've captured usage guidelines while building a design system to scale from a single product by documenting in memory and documentation within the product repository.
Communication
Cross-Team Collaboration
Executive: Presented to and achieved alignment with CEO, CIO, CFO, Presidents and VPs for software migrations, platform enhancements, and strategy.
Product: Reviewed component and pattern requests to ensure consistency and quality of UX and functionality.
Marketing: Collaborated with leadership to share knowledge and resources including 3d illustrations and brand guidelines.
Infrastructure: Enabled Single Sign-On (SSO) for Figma.
Legal: Provided resources for trademark registration, and ensured alignment for external content.
Conference Speaking
Presented design system to 200+ developers at DevCon to cast vision and promote adoption across products.
Training
Provided training for new features to executives and product teams at quarterly learning events, lunch-and-learns, and UX All Hands meetings.