Most EdTech companies understand the value of design systems. Comprehensive UX design systems are much more than just a static library of fonts, colors, and reusable components such as buttons. Actionable design systems also establish principles to guide the usage of individual components. The result is improved efficiency, more effective design governance, reduced design debt — and a more user-friendly product.
It’s a challenge to create a comprehensive design system for a single product. But doing it across a suite of products? That’s a whole other ball of wax. In fact, many EdTech companies assume that creating such a widely applied design system would necessarily be both inefficient and cost-prohibitive.
But it can be done, and done well.
With some forethought, a UX design system can be structured to efficiently support an entire product family, including products that must maintain some level of brand independence — all without becoming bloated and unmanageable. Here’s how.
One UX Design System, Many Products: The Benefits of a Product-Agnostic Design System
EdTech product suites commonly include products that are loosely related. These products often must strike a balance between maintaining a family resemblance and retaining some level of individual brand equity. You may already know from experience that this is a very difficult line to walk, especially if some of your products are acquisitions. As a result, many product suites either suffer from heavy UX fragmentation — or their products look so similar that it becomes hard to tell them apart.
Fragmentation, or design debt, leads to a fractured user experience across products that undercuts the consistency of your brand delivery. For example, if actions like dragging and dropping items behave noticeably different from one product to the next, these products will inevitably feel less related. If you want to coalesce your products into a more unified brand experience, you’ll need to pay up in order to pay down cross-product design debt.
Conversely, if your products are too similar, your users may become disoriented (“which product am I using again?”).
In order to get the balance right, you need to create products that look and, more importantly, behave as if they belong together. That won’t just naturally happen as a matter of course, even if the same group of designers works on all the products in your family. You must bring structure to the process while at the same time encouraging creative freedom. A product-agnostic design system is the most efficient and scalable way to do just that.
To Create an Agnostic Design System, Focus on Patterns and Behaviors
In order to make a design system truly agnostic, you must create a system that isn’t dependent on any one product within your suite. This necessarily means depending less on those elements that are product-specific, such as graphic elements and UI.
Of course, this goes against the grain of most design systems, which are typically built for one product and almost always focus on consistently implementing graphic style. The truth is that many design systems, even those designed for a single product, focus too heavily on the visual aspects of the product experience. In many cases, they neglect to establish commonality in behaviors and patterns that impact how a product feels in addition to how it looks.
Defining the Family Resemblance Across Your EdTech Product Suite
The first step in creating an agnostic design system is to decide how much “family resemblance” you hope to achieve from product to product. To what extent should all of the products in your family look and feel the same, and to what extent are they free to develop their own unique identities?
The Microsoft Office suite offers a well-known example of a product family with an exceptionally strong family resemblance. This is easy to see at a glance. Each of the products has a similar look as well as similar functions, behaviors, and patterns. Many products aren’t so tightly integrated. But the point is that you must be intentional in deciding how to walk that line. If you aren’t, you’ll almost certainly end up with a fragmented family of loosely connected brands.
This problem is made all the more challenging when you consider that many product families are comprised of a mixture of “in-house” and acquired products. When you acquire a product, you must develop a plan for how and when to bring it more fully into your existing family of products. Keep in mind, though, that not every product needs to look like every other product or resemble others in the family. If you acquire an isolated product that doesn’t integrate easily with the rest of your family, there may be value in letting it have its own language for a while. Your decision about how to handle an acquisition will depend on your product roadmap and the level of investment you want to make in the new-to-you product moving forward. Just keep in mind that the more products you acquire, the thornier this question will become.
Identifying and Documenting Common UX Patterns and Behaviors
The next step is to identify the behaviors and patterns you will purposefully use to establish your product suite’s family resemblance. In most cases, similar functions should behave the same way from product to product, even if the styling is different. For example, how does it feel to drag and drop items? What about moving an item from one list to another? These functions should feel the same — it may be much less important that they have the same size drop-down menus or buttons with the same rounded corners.
By starting with a set of common behaviors and patterns, you give your team the flexibility to apply the same design system to multiple products at a foundational level. Practically speaking, this might mean introducing components in a wireframe using non-styled elements. For example, you might use a base font as well as base sizing and padding, but otherwise limit visual styling. However you approach it, an agnostic design system creates a more efficient process and more consistent results.
Building Product-Specific Sub-Libraries
The final step is to produce a set of secondary design system libraries for each brand within your product family. The product-specific library allows you to define each brand’s unique flavor. This is where you lay out all the unique visual and UI elements, such as sizing, type, colors, brand-specific patterns, and so forth.
Because the larger, agnostic design system lays out many of the core attributes that will be applied to each product, the product specific sub-libraries needn’t be a massive undertaking.
Like jazz music, a UX design system provides a base structure on which to creatively improvise. That base structure is critical to user experience whether you have one product or a dozen. By creating a product-agnostic design system, you ensure that your products relate to one another in all the ways you deem important — while at the same time remaining free to follow their own beat.
