Blog

Design Systems 101

A vast majority of business leaders recognize design is crucial, but far fewer know how to integrate a design system for sustained success.

design systems 101

Upon its launch in 1984, the Apple IIc defined the aesthetics of the nascent personal computer industry. As a result, Apple became a household name and Steve Jobs’ reputation as a visionary soared.

However, Jobs was one in a billion. It was the Snow White design language that translated his unique vision into a system that could be consistently executed by the rest of his company. In those early days, only the most pioneering and design-centric enterprises understood the value of Design Systems. Without one, no organisation trying to deliver innovative products on any scale can operate for long.

Digital products and services have convinced today’s business leaders, even the most sceptical ones, that design is vital in winning customers’ attention and loyalty. However, many organisations continue to misunderstand Design Systems, even as they expand their design teams and implement DesignOps. 

It is the practical embodiment of a company’s design philosophy that creates the foundation for a successful DesignOps practice. It is the mechanism for translating design capabilities across the vast and complex digital landscape.

How does a Design System work?

How does a Design System work?

Your organisation can create a living ecosystem of assets, tools, people, and processes that work together in harmony to create a superior user experience, build confidence and familiarity with users, and reduce costs and time. 

When it comes to software, the front end is where users and potential buyers experience and understand the value of a product. An Organisational Design System is primarily focused on enabling great front-ends by assisting the organisation in managing the tremendous challenges involved in creating cohesive, coherent digital experiences.

Creating a customer experience blueprint

Every touchpoint on the customer journey should be effortless and personalised for companies to win. If they are to do that at little to no marginal cost, they will need an entire system of digital products customised for specific types of users and customer journeys, and accessible on all major platforms (web, iOS, Android). 

With every additional product or platform, however, operation and coordination costs increase exponentially, grinding innovation to a halt. By investing in a Design System, enterprise teams can avoid stifling development costs as they innovate around customer needs, enabling them to “own all the glass” by providing the experiences customers demand on every channel.

A product for building better products

Creating great UX is a team sport, regardless of your industry or product. At any given time, hundreds of designers and tens of thousands of developers may be working together on a product or service for organisations that operate at scale. 

Design Systems simplify the coordination of large, cross-functional teams by centralising many of the most significant costs. Design Systems allow teams to focus on building features that provide the most value to users by creating systems and parameters that ensure consistency and cohesion across experiences. Coordinated efforts increase both quality and speed to market, enabling more rapid test-and-learn cycles and enabling organisational decision making based on data.

Creating a customer experience blueprint

What is the best way to create a Design System?

A Design System cannot be tailored to the needs and objectives of all enterprises. In spite of the existence of definite stages of Design System maturity, and despite the fact that all successful Design Systems include some of the same overarching elements, each organisation’s journey toward a fully-realised Design System will be unique to its mission and culture.

The phases of a design system

As a result of our work with clients, we’ve noticed three distinct stages of maturity in Design Systems. For any organisation looking to implement its own Design System, recognizing which phase it is in is a crucial first step.

The phases of a design system

Phase I: Imagine

Creating a successful product is usually the first step toward a robust Design System. During this phase, the goal is to find ways to solve user problems more efficiently and effectively than the competition. Your product demand will either increase significantly or you can anticipate it once you’ve nailed the product-market fit. A Design System’s viability and necessity is validated by demand.

Phase II: Make

The user experience of a winning product can be “modularized” into its individual components. User interface (UI) frameworks rely on these experiential building blocks to help build bespoke products and experiences, which can then be rearranged and reused. The modules can then be “industrialised” by integrating them into existing design and development workflows, reducing friction to adoption and use. A Design System takes form when modularization and industrialisation are accomplished.

Phase III: Scale

To support other teams in building new products and features, a team of cross-functional designers, product developers, and administrative personnel implements and scales the Design System.

In order to scale their Design System effectively, the most successful organisations take into account critical factors such as the overall purpose of the system, the talent and tools it requires, the mechanisms that link talent and tools together, their organisational culture, and how their results can be measured.

Creating a system for scalability

Using this approach effectively, enterprises are able to unify concerns and streamline design processes. Designed as a central point of truth for product design, the Design System provides an “automated” workflow supported by modular tooling that integrates design seamlessly into the product development lifecycle.

Your Design System must also evolve as your products do. An organisation’s Design System can serve as a foundation for innovation and success by continually enhancing its governance, quality, value, and version control processes.

Design systems and their importance

How does a design system work?

It consists of reusable components guided by clear standards that can be assembled to create any number of applications.

In terms of design systems, what’s the difference between a style guide or pattern library?

Having a design system is more than just assembling assets. Emmet Connolly, the director of product design at Intercom, said, “Most Design Systems aren’t really systems at all: They’re just libraries of UI Lego elements. There may be consistency among the pieces, but that doesn’t mean the assembled results will be. UI elements are part of your product, but they are not your entire product. They are structured and meaningful. There is more to it than a generic web page, it is the embodiment of a system of concepts.”

In simplest terms, the assets are different based on the standards and documentation that accompany them. Design components become easier to use and easier to understand when accompanied by a guide explaining why and how they are used.

What is the best way to create a Design System?

What you can learn from them

This article will not discuss how to create a design system. Instead, we will show how to use design systems as a study guide to understand UI/UX and product design practices and implementation.

The majority of design systems are set up the same way; a top level navigation menu that shows the major categories in the system; for example, Branding, Design, Components, Code, etc. A sub navigation or sidebar navigation is usually available within each of those categories to further divide them into areas such as Colour, Typography, Components, Forms, Guidelines, etc. Designing it is like studying for a master’s degree.

Popular design systems

Google Material Design System

Who they are

A company like Google – the one we all know and love – specialises in internet-related services and products, such as a search engine, advertising technologies, cloud computing, software, and hardware. In addition to Amazon, Apple, and Microsoft, it is considered one of the Big Four technology companies

Their design philosophy

It was Google’s publicly shared ‘Material Design’ system that paved the way for many others to follow. As a result of the insane attention to detail, components were categorised and catalogued in a way that has never been seen before in the design world. All design systems are founded on the same atomic design principles that they made so you don’t have to. These are their goals:

  • Create a visual language that synthesises the classic principles of good design with the innovation and possibility of technology and science.
  • Develop a single underlying system that unifies the user experience across platforms, devices, and input methods.
  • Expand Material’s visual language and provide a flexible foundation for innovation and brand expression.

Design system features

  • Layout
  • Colour
  • Typography
  • Components
  • Material Theming
  • Design Source Files
  • Mobile Guidelines
  • Starter Kits

How you can apply it to your work

Design components for most popular design software (such as Sketch and Figma) can be downloaded directly from Material Design System. Material studies are also included that show how components and theming can be used to create beautiful, usable apps.

Google Material Design System

Apple Human Interface Guidelines

Who they are

Needing no introduction, elegant and intentional design is in the very DNA of Apple. Apple’s Human Interface Guidelines are not only a design system, but an incredible resource full of downloadable templates and other guidelines that you can use in your own projects.

Their design philosophy

Famously, Steve Job’s Design philosophy consists of 6 pillars

  • Craft, Above All – Meticulous attention to detail and precision
  • Empathy – A process that emphasises empathy with user needs and an intimate connection with the feelings of the customer
  • Focus – Eliminate all of the unimportant opportunities
  • Impute – People form an opinion about a company or product based on the signals that it conveys
  • Friendliness – recognize that high-tech devices could be friendly and approachable and appeal to novice and advanced user alike
  • Finding simplicity for the future in metaphors from the past- Design simplicity should be linked to making products easy to us

Design system features

Developers, designers, and distributors of macOS, iOS, watchOS, and vOS can use Apple’s external design system, which features best practices, guidelines, and resources.

  • Themes
  • Visual Index
  • App Architecture
  • User Interaction
  • System capabilities
  • Visual Design
  • Icons and images
  • Window and View
  • Menus
  • Buttons
  • Fields and Labels
  • Selectors
  • Indicators
  • Touch Bar
  • Extensions

How you can apply it to your work

There are a variety of developer and designer resources and tools available that you can download and directly use in your work (such as design files, device mockups, Swift code) as well as references for best practices and how to bring your ideas to life.

Apple Human Interface Guidelines

Microsoft Fluent Design System

Who they are

Microsoft is the maker of the PC operating system Windows, the software Office, and the web browser Internet Explorer, all of which are known to everyone.

Their design philosophy

Digital environments are the source of Microsoft’s Inclusive Design methodology. Through it, Microsoft is able to leverage human diversity and inclusion. It is crucial to include people with diverse perspectives and to learn from them. By using our biases to solve problems, they believe exclusion occurs. Microsoft’s designers recognize these exclusions and use them as an opportunity to create original ideas and inclusive designs:

  • Recognize exclusion
  • Solve for one, extend to many
  • Learn from diversity

Design system features

  • Colors
  • Elevation
  • Iconography
  • Layout
  • Motion
  • Typography
  • Localization
  • Theming

How you can apply it to your work

As a result of Microsoft’s ecosystem of design tools and open-source components, you can get a consistent look and feel across Web, Windows, iOS, and Android platforms and understand the logic and look of Microsoft products. It is also a great case study reference for how to make your own UI/UX designs as inclusive as possible.

Microsoft Fluent Design System

Conclusion

The components of a design system include patterns, styles, and guidelines, which can help operationalize and optimise your design efforts. But it is people who design, manage, and implement the system. Design systems are based on several factors, including the size, replicability, and resources and time available for your projects. 

The implementation and maintenance of design systems can lead to an unwieldy collection of components and code. However, when well implemented, they can streamline work, enable designers to solve complex UX problems, and educate teammates.

Now it’s your turn

Now that we have looked into Design Systems and have shown the value of this process you can see the real value in their implementation. Get in touch with the Stich Creative team to find out how we can support you on your UX UI journey.

You may be interested in

Look at some
other articles

Say hello 👋

Let’s Work
Together.

I’d love to meet up with you to discuss your venture, and potential collaborations.
richtillingux@gmail.com
Oxford, United Kingdom