Every digital experience has components: buttons, headings, links, lists, menus...they're the building blocks that make content and functionality available to users. A typical app or website has dozens of unique components: some used just once, and many used over and over.

Does your digital experience not have—or not need—components? Ok, you can stop reading here.

The component pile

Talk to an experienced developer, and you’ll hear tales of microsites that had five different sliders, or sprawling corporate .com’s that had ten different expanding menus.

How does that happen? It’s easy. Maybe two designers were working on carousels for two different pages at the same time. Maybe a department stakeholder didn’t like the look of another department’s submenu, and asked for a new one. Or, as happens frequently, maybe brand guidelines changed, leaving old pages with old components.

We call this fragmentation of identical functionality a component pile. Yes, you have components, but no, you don’t have a library.

The more the merrier?

No. Custom-building the same type of component over and over creates a major drag on your budget and, ultimately, your brand.

The upfront cost

The second you begin designing a redundant component, the waste begins. Maybe your project lead is unaware of the existing component. Or maybe your UX team decides the existing component isn’t flexible enough for the needs of a new project (and doesn’t want to fix it). Either way, you’re in for higher costs on your new project:

• Designers spending just as much time on the new component as the previous.
• Developers building “yet another carousel” instead of, say, optimizing your page load time...or building something that’s actually new.
• QA testers working back and forth with developers to tackle edge cases that were already solved for the previous component.

Component debt

So here you are, overseeing a website that has key components duplicated left and right. They don’t look the same, they don’t act the same, and they probably don’t all use the same content structures or javascript libraries. The legal team comes by and says “our (three different) image carousels are accessible using screen readers for the visually impaired, right?”

Maybe they are. If so, great! If not, you just got signed up for the triple effort of verifying and remediating three different carousels. And guess what? The oldest carousel is written in a library no one on your staff even knows anymore. Fixing that one might take more time than building it in the first place!

Now imagine a rebrand: type, color, sizing, spacing, borders, shadows: there are new guidelines for all of them. How can any team achieve a rebrand when each component type exists in triplicate or more? It’s not tenable, and most brands will let old components sit around—off-brand and stale—rather than take on such a task.

The impact on users

Let’s not forget why we build digital experiences in the first place: to provide value to users that keeps them engaging with our brands. If your brand doesn’t have a component strategy, you’re delivering less content and less utility than you could be. Accessibility, ease of use, and freshness are qualities any brand would want. So what are you waiting for?

Get your library card

We’ll level with you: putting a component library in place can be hard work, and it doesn’t guarantee you’ll never have to work on your components again. But using a component library reduces your long-term burden across the board, including design, development, QA, accessibility, and browser support, while actually making it easier for your brand to put its best foot forward at every entry point.

The key to avoiding component debt—and to keeping your team focused on higher-order problems—is to get your whole team, across disciplines, focused on building and maintaining a robust component library.

Choosing an approach should be a collaboration between your brand stakeholders, your design team, and your engineering team. And while there are many great ways to implement a component library, what we can tell you for sure is that forging ahead without a component strategy will create a drag on your business.

Want to learn more? Check out our article on Medium on choosing a technology approach for your component library.