The cost of running a design system

What is the running cost of your design system?

I talk a lot about the value of design systems because it took me far too long to really understand how businesses make decisions. Money.

When you’re thinking about how ‘cool’' it would be to have the latest design tool, or go to the latest conference in Copenhagen, or even planning to recruit more staff for your team, remember; this all contributes to the run cost of your design system.

So the money that your organisation is making from building and maintaining a design system sure as hell better be more than the cost.

It is a profitable venture, right? RIGHT?

The fundamentals of business accounting means managing costs versus profits. Ultimately you hope that all of your costs are multiplying your potential profits. So the costs included in running a design system should be a profit multiplier, right? The costs can be broken up into two simple groups, people and tools. Time and materials if you prefer. You pay people for their time to use the tools you also pay for. But there is a few more I’ll add at the end.

Teaming

People are by far your greatest cost. You can’t do this without people (yet). So who are they, and what do they cost?

THE FOLLOWING ASSUMES A FAIRLY LOW MATURITY, RAMPING UP DESIGN SYSTEM OPERATION

Designers. At least one.

Designers are powerful profit multipliers. Good designers can dream up experiences and delight your users. Great designers can tap into user insights to build powerful solutions, and systemise those solutions into a design libraries to help scale flexible, consistent experiences. All of this comes at the inescapable cost of time on the dime.

Cost: $90,000 per annum

UI / Front-end developer

A kind of specialist engineer who focuses on turning designs into performant code. Same rules apply here. You can pay a front-end developer to build your product and be done. Or you can invest further in a UI engineer to develop and implement a UI framework that enables scale.

Cost: $110,000 per annum

UX Writer

UX writers are hugely undervalued profit multipliers. Not just there to to write plucky copy and decide between Login and Log on. Good UX writers are writing the documentation that comes with a lot of enterprise level software. They’re writing the copy for customer impacting events that stop thousands of customers leaving at once. They know their users, their industry and their brand.

Cost: $80,000

Product Manager / Business Analyst

Not essential but recommended. Someone who can identify and drive projects for the design system team. Report up and out, while handling the admin.

Cost: $70,000

Tools

Tooling is harder to cost and I don’t intend on shopping around for costs. But there are a few essentials I believe that make the list - none of them cheap!

Hardware

A laptop and monitor for each for the above people, including IT setup and maintenance.

Cost: $10,000

Software

Figma Pro, Visual Studio Pro, Github, project management tools

Cost $2000 pa

Training

Training can be split into two categories, on-boarding and growth. Deloitte UK LLP estimated that it cost roughly $10,000 to onboard any member of staff. Meanwhile leveling up your skills and learning your craft has become increasingly free. So let’s keep this conservative and say $10k all in.

Cost $10,000

Utilities

The hidden cost we, the worker bee’s don’t always consider. The price just to keep the lights on, the AC blowing, the milk in the fridge, the cleaners cleaning up after you. Not to mention cloud backups, anti-virus software, VPN, building security. It stacks up.

Cost $5,000

TOTAL YEARLY RUN COST: $375,000

In conclusion.

I know this has been fairly pie-in-the-sky but if it’s costing your business somewhere in the ballpark of three hundred and fifty thousand dollars to run a design system it really should be landing with you at this point that your design system NEEDS to be doing some serious business.

Why not do some back of a napkin maths as well to see what your design system is costing your company? If you prefer to motivate your team with carrots over sticks, I’d recommend not sharing the outcome, but someone needs to know. Chances are, someone in finance does know. Wouldn’t it be good if you did too?

Let me know what you came up with at @theresmike on X.

In another blog article coming soon I’ll talk about how that $375,000 is great value for money.

Design system metrics, the boss play

I’ve already written articles about the cost of design systems to get you thinking about the investment that is required to really run a design system. If you’re climbing up the design system maturity scale in your organisation, then you are probably spending as much time seeking funding for your DS as you are actually building it - and that’s exactly when you realise you need metrics.

The best way to think about metrics for your design system is to first ask what you need to know. What is important to you and your organisation? What will indicate progress and what will flag concern? As ever, it depends on who you are but let’s imagine you are indeed looking for more investment in your design system operations, what metrics are going to support your case?

We can all rhyme off the reasons for building and maintaining a design system in any customer facing organisation. But as a top 3 I’d say…

1. Consistency

2. Speed

3. Quality

No doubt this is something along the lines of the promise you made to your exec in the first place, so it’s a great place to start. Let’s show them that we thought about measuring our success, making real customer impact and are accountable to our promises.

Consistency

Design systems make the promise of delivering consistent experiences through the deployment of reusable styles, components, patterns and assets. If these resources aren’t being used, used incorrectly, or worse, being deliberately bastardised, then inconsistency creeps in. So how might we ensure that our components are being deployed appropriately and with full coverage across products, apps and marketing.

There are a few tools that are making strides into design system monitoring, but one that is leading in the market is Componly.io. This tool requires read-access to your product repo before doing a full audit of your system and presenting you with some hard truths in a dashboard.

Componly’s dashboard displays ‘Coverage’ as a main factor of consistency

Componly does a lot, but it’s strength as a tool is that it gives you a “coverage score”. This means out of all the components being consumed, you can see how many are from your design system as a percentage. Take this one step further and you can track it over time, set objectives for your team and regularly report on the impact of your efforts.

Componly is the only tool I’ve seen offering this coverage score, and is without doubt an essential tool for anyone running complex product suits and portfolios, seeking to create consistent experiences for their customers.

Speed

If there’s one thing execs want is fast delivery. Products and features shipped and sold. Design systems are supposed to grease the wheels of delivery, not add friction (as some engineers might testify). So how might we measure our design systems’ efficacy as a delivery accelerator?

The go-to solution here is to configure your project management tool to perform some reporting on throughput with and without a design system. But this is muddy territory. Velocity as it’s commonly known is dependent upon many things such as ticket size, ticket type, dependencies and good AC’s and requirements. Extrapolating a score that shows the design system is having an impact, especially on external engineering or design teams is extremely hard.

My recommendation here is to seek quantitive data. Ask your community for how they feel the design system helps them. Gain sentiment scores and take some averages. Do this regularly using survey tools such as Google Forms or Typeform and track it over time for scores that will keep you on track and honest.

Quality

Beauty is in the eye of beholder, and in your case, the beholder is the person using your product. The ultimate judge of your success is the person choosing to pour revenue into your organisation and don’t forget that. So when we think about quality, it’s the perceived quality of your product or website by your user or customer that matters.

For this, there is the net promoter score (NPS). A universally recognised score that assesses how likely a consumer is to recommend your product to someone else. Now, there is a lot of factors that go into measuring NPS, nono of which are anything to do with whether a design system is powering the user experience!

Designing a good user experience for a product is no cake walk, but delivering consistent, high quality experiences across multiple media and products is a huge undertaking. And when customers are engaging with your brand through these multiple interfaces, they will decide on your fate on any one of these moments letting them down. NPS is a great way to see the full picture of your customers’ brand experience.

So, how do you measure yours? Let me know on X @theresmike

Design System Maturity Scale

As a cocky young web designer I used to append brand guidelines with digital guidance. I tsk’ed as I added hex codes to colour guides, and took great pleasure in telling graphic designers that their font choice wouldn’t work on the web. Oh what a joy I must have been to work with…

Back in those days, that was the system. Usually a large A3 binder and equivelent PDF. This was the canon upon which all further creative artefacts were to be created. Change was rare and expensive; the flexibility of these ‘systems’ were often rigid and inhibiting of further creative collateral. It was sexy for sure, but not scaleable.

branding guidelines by John Baiatul

Jump to 20 years later and we build design systems like products alongside our products. They’re as technical as they are creative, and they are the ultimate design challenge.

As someone who lives inside a design system day-to-day that serves a large product portfolio, its easy to be a snob about what constitutes a design system. It’s also easy to forget how much more complex they can be. I had my eyes well and truly opened by Ford Motor Company’s talk at Figma’s Config conference where they unpacked the multi-brand, multi-car, multi-theme system they are managing. Hat’s off to those guys.

I’ve deliberately decoupled practical resources with the human resourcing side of design systems for the purposes of clarity. Perhaps this is a whole separate article.

Design Systems by maturity

1.Style guide

A style guide is generally one or a few pages that provide direction on the colors, fonts and acceptable artefacts that have been established within a brand. Useful for socialising the design language for a brand.

2.UI Kit

A UI kit provides more functionality than a style guide. UI Kits take advantage of the reusable assets and styling features built into tools like Figma, Sketch and XD. This makes it possible to create digital experiences from a prefabricated library of UI elements that have been styled to align with the brand style guide.

3. Design Library

A little more nuance, a design library (DL) is the first sign of a true ‘system’ in play. A DL is a directory of contributing assets, styles and variables, distributed into multiple (preferably versioned) libraries. They are then combined into a reference file that is always offering the most up-to-date design assets and styles.

At this point I want to introduce the operational dependency that comes with scaling a design system. Style guides and UI kits can be created and managed by a team of one. But beginning the journey of offering a design system to a cohort of consumer requires operational investment, i.e. people. Responsibility rapidly escalates as the design system becomes the source of truth for colors, fonts, inputs, alerts, charts, labels and wording, brand alignment, illustration style, icon constraints - the list goes on.

Providing a design system becomes a service that requires investment in order to meet the demand.

4. (DL)+UI Library

You may have heard of services like Tailwind, Ant Design, Bootstrap and MUI. These services are unbranded (and sometimes completely unstyled) libraries of UI component or widgets deployable as production ready code. You may hear the term headless, which essentially means the components are unstyled, just structured code ready to be dressed up however you wish.

Now that we’re talking about code, this really is the next level up from simply offering ‘design’ services. As a design system provider you are now taking responsibility for the design and translation of that design into code. Including all of the properties that come with your components. Offering a UI library creates another level of control over how your product experience is deployed by engineers.

In relation to operations, you may now be considering adding a front-end developer / UI engineer to your design system team to help create, manage and maintain the code.

5. (DL+UI)+Docs

You need commentary, you need examples, you need context. Enter design system documentation libraries.

Relatively new in the world of design systems are DS-specific documentation services such as Zeroheight and Supernova. Traditionally, organisations would have relied on their incumbent documentation services such as Google Docs or Atlassian Confluence to keep notes on how to use artefacts and materials within a design system. But these new tools are offering far more integrations with industry tools like Figma and Storybook to bring together the design, code, writing, research and more, into one place.

6. (DL+UI+Docs)+Design Tokens

The system is really getting complex now. You’ve got your designs in one tool and a UI component library in another, and documentation explaining how it all works. Designers can prototype new features with the design components, safe in the knowledge that they match the UI components that the engineers are deploying to code. Right?

Inconsistency between design, code and docs assets is a major point of pain for design system teams because none of them share a common language. Enter design tokens.

Design tokens are a simple set of instructions for UI design, written in a simple markup language that makes them readable by any application. This means that not only can they be informing your design library, your UI library and you documentation, but they can be powering your product or portfolio of products also.

Design tokens are the blueprint for your UI design. They contain the values for all colors, spacing, typography, borders and effects. Change it once and it changes everywhere. This is the single source of truth in its truest sense.

7. (DL+UI+Docs+Tokens)+Metrics

It’s rare that you would think metrics any sooner than reaching a fairly reasonable maturity with your design system. If you did, kudos. But it’s at this point in your journey that you start to wonder how many people are using my design system? How many are not? How many products are using old code, or out of date tokens? Is my design system delivering value?!?

Don’t sleep on metrics. Sooner or later someone will want numbers, and you have to be armed and ready. You may consider your own solution here, but there are now great tools on the market specifically for this use. Componly claims to be the design system OS, but what I really like about it is it’s ability to draw information from your repos and show DS adoption. Luro is another early phase tool. And Omlet is also another promising tool.

Consumption multiplier

The design system maturity examples we’ve looked at so far demonstrate multiple resource densities that a DS can contain. But what about the products they serve? The number of products and number of brands that consume your design system ultimately multiplies the complexity and perceived maturity of your design system. Let’s face it. offering a level 7 design system across a multi-product, multi-brand portfolio is probably as mature as it gets.

Maturity Score?

It begs the question, would there be value in developing a mechanism for a maturity score? It could be a fun experiement but also a little self serving. After-all, who is keeping score?

What do you think? Does it get more mature? Do you see a place for a maturity score?

Design Systems: Your Most Valuable Investment on the Path from Startup to Product Business

I wanted to put pen to paper on the why I believe design systems are incredible business assets and play a pivotal role in propelling your journey from startup to a flourishing product business in 4 simple points.

The Design Systems Revolution

Imagine you're in the process of transforming your startup into a product business. It's a thrilling time filled with innovation and growth, and you need something that can keep up with the pace of change. That something is your design system.

When transforming from a startup to a product business, design systems are key to enabling delivery at scale

Design systems are like the secret sauce that empowers you to create and maintain a consistent, cohesive, and efficient design identity. They are your brand's guiding star, the North Star that ensures that every product, every webpage, and every interaction with your audience embodies the same design language.

But it doesn't stop at aesthetics. Let's take a moment to appreciate the depth of their value:

1. Accelerated Growth: The Efficiency Factor

In the startup phase, creativity often knows no bounds. But as you expand into a product business, you need to maintain the creativity while introducing structure. Design systems are the linchpin of this transformation. They're not just about maintaining the status quo; they're about accelerating growth. They're the blueprint that empowers your design team to work smarter, faster, and with an unprecedented level of efficiency.

2. Future-Proofing Your Success

In the ever-shifting tech landscape, what's in vogue today could be outdated tomorrow. Design systems aren't just tools for the present; they're strategic investments that future-proof your business. They adapt and evolve with you, effortlessly integrating new trends, user preferences, and technologies. They are your insurance against obsolescence.

3. User-Centric Magic: Delighting Your Audience

User-centric design is the Holy Grail, and design systems are the magic wands that enable it. They help create intuitive, user-friendly experiences that keep your audience coming back for more. Your users drive your success, and design systems ensure that every interaction is delightful and memorable.

4. Time and Cost Savings: A Wise Investment

As you're eager to expand your eminence in the industry, think of design systems as your most valuable asset. They not only save time and resources but also make you more agile and responsive in the market. That's not just good design; that's good business.

5. They scale with your operations

As your product delivery capability grows, design systems can grow with you. Product managers, engineers and designers will all benefit daily from a single source of truth in your design system. The decentralisation of information is one of the greatest challenges in modern business. Without a design system, product experiences diverge and quality suffers, great features suffer and ultimate customers suffer.

Many companies claim to care for their customers, so invest in them. Invest in a design system and benefit from better products, delivered faster with cohesive experiences.

What is a design system in 2023?

What makes design systems more relevant than ever in 2023? Are they still worth the investment? And what does the future hold for design systems in the new AI powered world.

---

I think we can all agree that 2023 will go down as the year that we emerged from our conspiracy caves, cast off the pandemic pandemonium and bore witness to what global warming really feels like. So in some ways, writing about design systems feels somewhat equivalent to cosplaying the ‘this is fine’ dog at a Trump rally.

But here we are. Its fine.

Design systems. You know the drill by now, designers love them, engineers want to love them, PM’s love to nod as you explain the latest updates. The execs accepted that enough people wanted one so they let us eat cake and now still don’t really understand why the portfolio is still more FU than UX. But in the main, they are a good thing. I love design systems. Done well, they keep brand experiences in synergy, they accelerate delivery and reduce redundancy. Boo, redundancy.

Equally, design systems are expensive, cumbersome, and endless. They are an investment that can take a long time to produce returns. But sentiment is good for the ol’ D.S. Just look at Adobe’s eye watering $20bn acquisition of Figma. This is not play time anymore. The word is out and design systems are cool, man. But why? Why has it taken this long, and why now?

In my opinion, maturity.

We’re getting there folks. We’ve finally realised that shitty software doesn’t cut it anymore. And that good software equals, well, $20bn in some cases. (Do Figma have a design system, you bet your ass they do) Good software, is not just functional software. It looks beautiful, it’s intuitive and easy to use, and it’s inclusive too, compliant with standards for accessibility. When software is all these things, AND provides a useful service of course, it’s impossible to ignore. Customers become users, become advocates, and eventually sales takes care of themselves.

The industry of software development is the perfect metaphor for a millenial. Yes its getting older, has more responsibility and should be a mature well of wisdom and competency. But the truth is, we’re still hoping that the grown-ups will show up, rub our backs and take over the controls. We’re doing it, we’re shipping products but honestly, the maturing process, well, it’s been slow. (Now you know AI did not write this, fml)

Let’s get back on topic. Design systems are cool, man, and the cool kids are mature and want to create design systems to super-charge their products, it sounds totally cool. We’re all in. 2023. For real. But wait, that’s not the only reason design systems are cool.

(I hope you know by now I’m saying ‘cool’ in a slightly sarcastic, practicing millennial way? I hope? No? Ok.)

Design systems are also having their day in the sun in part thanks to the pandemic. COVID sent us all home. For the best part of 3 years. Team work changed in an instant and the cliché stock photograph of a spectacled creative director pointing with his HB pencil at the artworkers screen was condemned to the archives, possibly forever. Design systems allow distributed teams to collaborate way better. With documentation being at the heart of a design system, having to wait for a zoom call or your designers to come online is no longer necessary. Decisions are codified and usable.

2023 is a good year for design systems. And I haven’t even gotten into the nitty gritty of how the industry is shifting as we speak. Stars are aligning and it’s just getting interesting. And so what of this AI revolution then, how will it affect design systems?

AI is having its impact in design systems design. AI is reducing the investment and time to value in producing design systems. The labor involved in creating swathes of documentation is being automated. It can seek out duplication, kill inconsistency and improve the overall efficacy of the system. But it’s real show-piece is that it can be used to automate the creation of code and even design and UI kit components. This is happening, all of it, as we speak. But I genuinely believe, like this article is testimony, that it will only ever be as good as the human prompting it.

AI should now be recognised as part of the workflow of design systems delivery, if DS designers are ever going to deliver on the value promise. And that is what design systems are in 2023, more effective, more valuable, and yet, still human. Thank goodness.

If you like the sound of this, why not say hello.