Within the digital product design universe, design systems have been thrust centre stage, lauded as a must-have piece of digital infrastructure. Design systems are celebrated for helping streamline the inevitable expansion of the digital product, and the best way to manage internal design processes so they’re easy to propagate among teams. While all of the above may be true, and while we are big (read: very big) fans of design systems and what they can enable their stakeholders to do, we understand it can be somewhat overwhelming to read take after take about the relevance and importance of these frameworks.
Learning about how large public companies, like Spotify, Google, Netflix and Facebook, are investing massive amounts of internal bandwidth and capital to create these multi-layered, hyper-considered and connected systems, has created a movement among more modestly positioned companies. A movement to adopt these approaches around how they handle their own design operations, resulting in increased awareness of design system methodologies, and a sense of expectation for businesses with a prominent digital presence or offering to follow suit.
If you’re familiar with the emergence of design systems and, regardless of reason, have entertained the idea of putting one in place, the lofty examples mentioned previously may leave you feeling overwhelmed by the apparent sizable task. You might also wonder if an existing asset library or traditional suite of brand guidelines will suffice as a design system. Perhaps this is the first time you’re hearing the term.
The Breakdown
With this piece, we’ll help clear up some confusion on what design systems are, (and are not), and how they compare to other design frameworks like brand guidelines. We’re going to lay out our thoughts on design systems, why we are interested in them, and how we use their philosophies in our work. We’ll share our thoughts on how small-to-medium businesses can benefit from the same principles exhibited in larger, fully realized frameworks, to help you understand the merits of design systems, and lastly, how you might identify areas in your digital offering that could be streamlined and fortified by adopting one, some, or all the methodologies encompassed in a design system.
What Brand Guidelines Are
While design systems have risen to prominence over the past 10 years, brand guidelines have been around for many decades, emerging from corporate growth, and the need for consistency across mediums and markets. Brand guidelines consist of rules that govern the use of particular assets; such as a logo or the treatment of an image in certain situations, such as on a social media platform, or a print ad. They encapsulate everything that works together to define and uphold the intangible aspects of a brand, like its positioning and tone of voice. Brand guidelines are probably the most accessible form of design framework, thanks to their segmented structure, and the easily-acquired knowledge and understanding that is a prerequisite for their use. Owing to its straightforward nature and relative ease to compile, we feel any organization would be remiss to not have one.
But do brand guidelines fill-in for design systems? To put it mildly, absolutely not.
What Design Systems Are
In a sentence, design systems are a methodology, a governance over how all digital elements are used. Elements could refer to componentry, behaviour, page templates or style guides, however, even the most comprehensive suite of assets doesn’t amount to a design system. A design system is not the elements themselves, but how they connect and relate that create this framework — It’s the overarching constraints that orchestrate the how, when and where of digital design output. Brand guidelines could be considered a subclass of this framework, as would asset libraries or UI kits that itemize componentry, and would certainly be taken into account within a wider framework. However, even with the most thorough and extrapolated brand guidelines or component library in place, these can’t be considered a design system.
So How Do Design Systems Emerge?
Design systems typically assemble after one or more projects have been completed and there are data to analyze. This may sound counter productive, but it’s a case of not putting the cart before the horse. A system emerges from the research findings, the collective experience of creating everything that falls under the umbrella of the project, and crucially, in assimilating the learnings that come from using the product, with a view and a commitment to refining it - it’s not created first then followed - that would require a crystal ball or time travel.
Once the majority of what’s gone into creating a digital product can be captured in the same field of view, the process of itemization and documentation can begin. The task of compiling a design system, much like good UX research, is non-linear. It’s essential to back-track and reanalyse data when something new is learned, and update the structure as features go through rounds of iterations. This process of defining rules, documenting behaviours and clarifying use-cases in reference to the creative collateral, is how a design system emerges. Adaptation of the system also occurs in lock-step, as the product evolves throughout its life cycle.
Why we’re interested in Design Systems.
A Source of Inspiration and Information.
In a framework such as a Design System, the levels of detail and ways in which connections are mapped means that exploring them can be useful for a number of reasons. We can borrow from the methodologies of particular areas depending on the use case we have, whether that be a particular component’s behaviour, or the ways in which a subset of the system has been organized. However the real value lies in understanding how these areas are connected to everything else; context is an important factor in user interface design.
How we use Design System philosophy in our work:
At Goat, we generate design libraries for most projects we work on, ranging in size from a few select components and some basic style rules, right through to comprehensive, itemised libraries that include everything from atomic design methods to specific situational variants. Some principles we adopt from bigger frameworks include:
- Providing concise documentation and reasoning for each group of components, and citing use-cases where necessary.
- Giving context by pointing to specific areas in mock-ups where elements are being used.
- Being considerate of how the end user will utilize the resource with respect to navigation and organization, to ensure it’s an intuitive experience.
- Being mindful of future additions and optimization of the library.
- Letting our prior experiences and accumulated knowledge be the data we draw on to fuel improvement of our methods.
How the principles of Design Systems can benefit small-to-medium businesses.
The definition of a design system is not set in stone, neither are the rules that say who should or shouldn’t have one. Much like how we borrow principles from larger design systems in our work, we believe the core tenets can be utilized in whichever manner makes sense to your organization. For example:
- Organization
If you have a current set of brand guidelines or an existing digital library, think about how and where it is compiled. Is it clear and intuitive to browse? Is it easily accessible to all who need to use it?
- Onboarding
By having a digital library that is easy to use, well documented and connected by context where possible, introducing new team members to the resource is streamlined, and sets a good precedent moving forward. - Fostering improvement and longevity
The age of siloed teams with separate mandates is being overtaken by cloud-based tools and a culture of sharing progress instantly. A central, well-organized digital library is simple to iterate collectively. A shared knowledge of how your digital assets work together, fosters clarity, ownership, accountability and trust on a wider scale.
How Design System Thinking can help you.
Identify areas in your product or business that could benefit from design system thinking:
Take a broad look at what’s not working in your digital environment; is there confusion around particular choices? Are there multiple styles in use? Are there competing methodologies? Once you identify specific issues related to user experience you can begin to clarify the ideal set of steps which will go on to form the foundation of your design-system-based approach to encapsulating your digital assets.
Is there potential to leverage design system thinking in other parts of your business? The applications are endless, as long as there is a commitment to documentation, reference and providing context for how things connect.
To Summarize
Design systems and brand guidelines are both seeking the same outcome of a consistent and cohesive brand experience, however, design systems exist digitally and should include your existing brand guidelines or asset library alongside everything that goes into creating your digital experience.
It’s ok to take an à la carte approach to how you compile your digital library in a manner inspired by design systems: what you include, and how you choose to organize it. But remember, even the most comprehensive library of assets doesn’t constitute a design system, for the framework is not these elements alone, but how they all relate and connect to each other.
Having a well thought out design library is an indispensable resource that has many benefits, not just for the look and presence of your website, but as a principle that can inspire good organizational practice, responsibility, optimism and clear direction.
