Design Systems: Unlocking the Value of Composable Architecture
Composable initiatives can be hugely successful if design systems are embraced.
Companies are moving to composable applications for performance and best-of-breed features, but without proper design they can be limiting to creative teams. To mitigate this, design must have a seat at the table during the planning and implementation of composable initiatives.
A Little Bit of History
In 2013 the term “Composable Architecture” was coined by Jonathan Murray. While it’s been almost a decade since its creation, the concept of composable architecture – often also called headless – is now hitting the mainstream and coming to fruition. Composability is a term that encompasses many things, including mindset, technology, and processes that enable organizations to innovate and adapt to ever-changing business needs.
Composable is the natural evolution and acceleration of the digital businesses we interact with daily. It allows enterprises to deliver the resilience and agility that our customers expect. At its core, composable business means creating organizations made from interchangeable building blocks, or more simply, lego pieces that can be mixed and matched to achieve different outputs and solve different problems.
Interestingly enough, another term was devised around 2013 that directly correlates to composable architecture: “Atomic Design” – coined by Brad Frost – is a framework for designing and building scalable design systems.
To many it’s not entirely obvious, but the principles of composable architecture and atomic design go hand in hand. On the IT side it’s common to rush into these technologies as they have a promising future – however they are not simply a function of IT. It’s critical to pause on these thoughts, as the true success of the technology lies within the underlying design and implementation. Design teams can serve as enablers of this success, and should be considered a mission critical stakeholder during early discussions and all the way through to implementation.
The introduction of a design system early on has proven to be the key to the success of the composable initiative. It not only allows you to take a leadership role in the success, but also ensures the development team is producing better, more usable, tools and products.
Design Goes Atomic
With exponential growth in interactions between brands and their customers, particularly across channels, customer expectations are rising accordingly. As these expectations rise, digital experiences are inherently becoming more complex. Atomic design serves as a core principle and foundation that allows companies to maintain brand consistency while simultaneously scaling experiences across channels.
There are five distinct stages of the Atomic Design methodology. Each stage builds on the previous, acting as an aggregate of items from the preceding stages.
- Atoms are the smallest building blocks in our system. These are your buttons, labels, typography, iconography, and other elements that cannot be broken down any further.
- Molecules aggregate multiple atomic level elements, and begin to bring them together into new groupings.
- Organisms are collections of atoms and molecules that now become more complex.
- Templates are the first stage in the Atomic Design methodology that breaks away from the molecular reference, but is critical for building digital experiences. Templates are where we begin to architect elements into a cohesive design and scale.
- Pages are the most concrete stage of Atomic Design as this is what users see and interact with.
What is a Design System?
By leveraging the principles of Atomic Design you now have the blueprint for a design system. At a minimum, a design system is a collection of reusable design elements, and the standards that guide how these elements work together.
As design systems become more advanced, they must encompass the entire design platform, including design tools, brand identity (colors, typography, buttons, patterns), UI and app components, code libraries, content libraries, documentation, workflow, and much more.
Endless Opportunities
The benefits of a design system are broad and expansive, and when implemented correctly, span the entire organization. A design system creates a unified language between cross functional teams, serves as the proverbial rosetta stone between design and engineering, and most importantly, brings a unified experience to its customers. A design system can integrate and benefit all of the following facets of a digital organization:
- Velocity is unlocked enabling engineering teams to build digital experiences from a core set of principles
- Consistency is enforced by building from existing elements and not deviating from the library
- Optimization is enabled by being able to predictably measure and adjust within a defined set of components
- Personalization is unlocked by seamlessly integrating into pre-existing components and patterns
- Accessibility is built in, not added on when working from a defined library
- Adaptability is anticipated and expected, but only becomes achievable when a proper foundation exists
- Communication is streamlined when cross functional teams are speaking the same language
A well architected design system can open many doors within an organization, whether that be scaling quickly, fostering innovation with new cutting edge experiences, or simply bringing a cohesive experience to its customers. With that said there is one thing a design system does not do: limit creative flexibility. While it can feel like creativity is being put in a box, instead think of it as an intention shift in the creative mentality to focus on the moments and experiences that matter.
So, Where Do I Go From Here?
We’ve outlined a few of the many ways a design system can help support internal teams, bring your business functions closer together, and facilitate building of the best tools & products. In addition to the vast amount of resources out there to continue your education, we are here to help, sharing ideas and concepts and our unique perspectives, gleaned from the many examples of design systems work where we’ve helped our clients take their teams to the next level.
