How the right design system streamlines a large organization’s digital development

While the addition of a popular, well-supported component library like Storybook is a path favored by developers and designers, the long-term success of a design system is built on buy-in from the following  teams across an organization:

• Content Strategy: They decide where and how components are used as well as how to implement them;
• UX: Plays a similar role while also monitoring whether each component is meeting success criteria;
• Accessibility and Compliance: Must ensure the components are useable by an underserved audience;
• Testing and Quality Assurance: Monitors documentation and version history of every component.

At the higher level, a design system requires buy-in from an organization’s Marketing team, which will determine how the project fits into the bigger picture along with Project Managers and Project Owners, who are the stewards of a given design project’s success. And just as crucial are the direct stakeholders, who possess the vision for organizational success.

One way a component library and a design system differ is in how each one manages the needs of a multi-level organization. Consider the example of working with a prestigious university, which through a combination of longevity and academic expertise, has built a strong brand identity. However, an organization of that size may also have subsidiary departments. Each of these will require different design priorities to both establish a distinct identity while an extension of the institution’s brand. These additional layers of complexity are where a design system thrives.

At the top of such an organization, the design priorities are consistency and the ability to tell its brand story across its subsidiaries. This level also is concerned with maintaining its own external and internal web properties while keeping costs down at each level of the organization.

From the perspective of the university’s subsidiary schools, they too aim to maintain brand consistency with the top level of the organization. But each property also hopes to establish a unique identity that will be applied to their own web presence while remaining within budget.

A solid design system won’t just speak to these multiple audiences within an organization. It will also address these specific needs at all levels.

1. A living style guide

At the core of every design system is a dynamic style guide, which is also not to be confused with the component library. As designer and author Brad Frost has said, the library could be viewed as an organization’s “workshop,” which can be supported by Drupal apps, such as Storybook or the Pattern Lab. A style guide is what Frost aptly calls “the storefront” or where every team working on a project can document “the official story of how an organization designs and builds digital products.”

A style guide is a place where an organization can store and access design guidelines for branding, colors, accessibility, and typography as well as its overall voice and tone. It also provides crucial documentation for a digital project. This doesn’t just include components and code but also key instructions around where and how to implement those components.

For the life of a project, the style guide should always be easy to find, understand, and update by every part of a development team. And, of course, the style guide should be kept as up-to-date as possible.

2. Component libraries at multiple levels

Under a strong design system, multiple component libraries can be created and maintained to serve both the global level as well each sub-property.

At the top level, design components should be able to be created, scaled, and documented across each project. This over-arching library should also function as a single source for each design component. This allows components to be shared across properties and monitored for accessibility, regression testing, and usability.

At the level of an organization’s sub-property level, the component library should both maintain its reused components as well as the documentation and properties applicable to the subsidiary. This maintains consistency across the organization’s digital properties around branding and accessibility.

3. A cost-effective workflow

A smart, well-defined workflow is a key element that binds each piece of the design system together. On the technical side, component libraries and style guides need to be updated with every update to a given component. These should be kept current across properties with the flexibility to accommodate different platforms.

The organization will need to structure product workflows around updating documentation and components across every programming language used by a given team. And then, once changes have occurred, ensure each team is notified.

The best workflows also allow for flexibility in architecture and in the tools used by each team. For example, if a new design component is created by the production team, its usage may need to be documented by the Content Strategy team, its success measured by the UX team, and then tested by the QA team. These workflows should allow teams to share and store components and code so they are easy to find, digest, and maintain.

All of these intricately detailed and demanding moving parts can be crafted, managed, and maintained in the Emulsify Design System.