Design Systems: Move faster and smarter in a complex digital world

So, what are design systems?

• Despite the name, design systems are not software. They are living, breathing digital toolkits that are quickly becoming one of the key building blocks to highly scaled modern businesses.
• They are not just guidelines either; they are complex subclasses of specific aspects that drive the entire experience of your digital ecosystem. They include a variety of elements from many disciplines and skillsets. An idea of what’s involved includes:
  • UI layouts & patterns: A set of design patterns for use across your digital properties. These generated templates use specific components and modules to form page layouts. Think of them as set of accessible, modular pieces that can be interchangeable across different sections or entirely different apps. They are built to a specified design and behave the exact same way no matter where they are, or what size screen they’re on. It eliminates the guess work and allows teams to build faster and smarter.
  • Behavior and scale rules (Specifications): Assure accuracy in documentation that is used to build and guide the entirety of a digital experience. They add clarity around how, say, a button will work (i.e., when I click this, it will do this or open that, and users can expect the information to appear here). This documentation can be created in many ways, from an in-depth, heuristic-enabled annotated layer in the design file, to an expanded cloud-based documentation system, like Confluence or Figma.
  • Developmental codebase: A collection of source code used to build a particular set of components and layouts in a digital property. The codebase contains live interactive digital components made of UI patterns using the specifications as a guide. These are essential to any project; they contain the actual code that would be required to manage or build a new page layout. They essentially become the valuable source of truth.
  • Brand guidelines: This documentation describes the design system itself (i.e., how products should look and feel, use cases for UI patterns, correct typographic scales, etc.). They typically exist prior to a project’s start and can evolve over time to suit the expanding needs of your digital experience(s).
• They are not just for designers. It’s important to understand that design systems allow for smoother collaboration between all disciplines, and vendors and clients alike. They can exist to be an internal reference for your teams, or they can be shared externally for the world to use. Either way, they aid in brand governance and ensure consistency is maintained, regardless of who is creating experiences on behalf of your brand.

Design systems empower product and development teams to design and develop tools and customer experiences on the fly. This is especially critical in today’s landscape, where being in a position to pivot quickly is the only way to ensure you’re meeting your audience’s fast-evolving expectations. They create a shared understanding of a brand’s look and feel and help align teams on how experiences should work.

Organizations that invest in designing and documenting their design system enjoy more efficiencies when it comes to scaling their digital footprint. They also help brands avoid creating fragmented customer experiences, which can often be a symptom of rapid digital transformation, especially if there are concurrent workstreams being carried out by multiple different departments.

Other benefits of design systems:

• They offer uniformity and predictability, reducing repetitive work and, ultimately, the time it takes to create and produce assets across teams.
• They are built with accessibility in mind, helping you leverage best practices to design and develop experiences that meet the needs of the various types of people interfacing with your products.
• They make scaling and onboarding a more seamless process by helping people–whether that be your own FTEs, or contractors and agency partners you work with–produce without disruption.
• Better design system management means happier teams, and their ability to produce work more quickly and efficiently with a common understanding.
• If a merger or acquisition is in your future, a smart design system makes the integration and/or go-to-market process much more seamless.

Many leading brands have implemented design systems that not only establish consistency in design and code, but also encourage reuse instead of rework, and increase the accessibility and usability of their digital products. A few standout examples include:

Adobe’s Spectrum

A long-time leader in many design programs, Adobe’s leadership and documentation about design systems has been a welcome source of information to help guide and provide insight about best practices. They’ve also started to include a section about design tokens, which is a new aspect that we have begun to implement into our projects at One North as well.

Google’s Material Design

Google has been in front of the design system for years now. When they launched their Material Design system in 2015 alongside their new mobile operating system, it was a welcome disruption to the digital world, and how to think about designing products.

Salesforce’s Lightning

This is another example of a large company putting their design system out in the public. The goal here is to continue to keep a sense of brand governance across all types of groups that would build out digital properties under the Salesforce design system. It’s a single source of truth that is constantly updated.

It’s great to take inspiration from these examples. But it’s also important to remember that simply having a documented design system isn’t enough. Although a great start, a design system is most valuable when it’s properly managed and carefully nurtured. Like I mentioned before, a design system should be thought of as a living, breathing guide.

As your organization and brand evolves, and your digital existence continues to expand, new styles and other implications must be accounted for. If kept a well-oiled machine, your design system will put you on the path to constantly meeting your customers where they are, and exceeding their expectations every time.

The scale of the examples shared can seem like a massive undertaking to create. However, we have a few different approaches to making a design system possible for many different budgets and needs, and we leverage tools like Figma and other internal design systems to bring them to life. One North is uniquely positioned to help your organization design, build, maintain and/or scale your design system.

Photo Credit: Oleksii Drozdov | Unsplash