#5: Our Roadmap, Stage Three

Equipped with perspective, buy-in, and foundational knowledge, the Interface Inventory (and associated events) generates the granular, purpose-driven components that will join forces with the Foundational Framework to constitute the core of your design system.

Now we’re getting somewhere.

As you enter Stage Three of the roadmap (in orange), your future design system is becoming far less abstract. You’re not there yet, but you can see it on the horizon.

Hark!

Thus far, the project team has been focused on the all-important prep work:

• Deep digging during Discovery, determining the tone and purpose of your pattern library
• Laying the Foundational Framework for the design system — its technical architecture (how it will deploy), and its rules of governance (how it will function).

Now, you get to think about what your pattern library — your consistent, reusable, brand-specific Legos-for-the-web — will actually consist of.

In Stage Three, it’s time to determine exactly what you’re going to build.

The magic of Interface Inventory: it’s a functional nexus between old and new — the way you used to build, and the way you’re going to build in the future.

In order to bridge the two, and to transition from thinking in pages to thinking in components, you need to take a critical look at those pages (after all, pages are the interface the user sees when they visit your site).

Ultimately, since components should meld together to create a seamless, intuitive experience, you must conceive of components by considering how they’ll present to your audience.

Whether your design system is destined for multi-site management , or multi-site + apps, or the trifecta — multi-site + apps + intranet — you have to…

1. Digest the sites you’ve already got in play, page by page.
2. Use their constituent ingredients to drive the assimilation of the pattern library that will power all your digital spaces.

In a nutshell, Interface Inventory:

• is where the project team takes a look at present sites, page by page, and chunks them up into components (buttons, search fields, heroes, cards, headers, footers, etc.)
• …and begins tailoring those components so they express your design principles, enhance the purpose of your product, and strengthen the consistency of your brand.

Interface Inventory is where you determine what array of building blocks will be available to your developers and designers every time they sit down to create a new site, create a new site section, build a microsite, build an app, or extend, maintain, change, and make updates across every property you touch.

(This is the whole point! You’re creating a tool that will empower you to maintain and build better, faster, and with fewer resources.)

But this doesn’t simply mean chunking up your interface and turning every chunk into a component.

Far from it. You want to build better with your design system, which means having the right components, and nothing extraneous: no need for nineteen button sizes. Interface Inventory allows you to vet every component type and to figure out the right base model for that component, and what variations will be useful for different sites and user behaviors.

A pattern library is more than the sum of its parts. It’s an expression of your creative direction, and the ethos behind it.

Having your design principles and the purpose of your design system clearly defined and present in everyone’s mind as you move through Interface Inventory helps steer the project team towards creating a pattern library that’s well-aligned with those design principles, and with your product purpose.

• How does each component serve the core purpose of the product?
• If a component doesn’t do so, how does it need to change?
• When combined in a user interface, do the components combine to create a clean, elegant user journey? Do they reflect your design principles?
• Now that you’re thinking in components, how can you tweak your design principles to make your design system even better?

Beginning Interface Inventory while Discovery and Foundational Framework are fresh in everyone’s mind is nutritious for your components.

(It also allows you to clearly define and vet your Styleguide, which helps ensure that it is relevant, which means the project team will use it as a lodestar during component development.)

Equipped with your Component List, you’re ready to begin building your robust pattern library.

Thanks for reading. We’ll see you in Stage Four — Component Development!

Originally published at basalt.io.