Skip to Content
Technical Articles

Our Design System – Part 1: Introduction

Why Design Systems?

In the past decade, design as a function has matured and it has been acknowledged a crucial part of the value chain. There is hardly any successful product in the market that hasn’t gone through the hands of a designer looking at the end-to-end customer and user experience of the product. For many products, design is the most important differentiator.

Having moved out of the niche, design professionals now are exploring ways how to make design affordable at scale. Now that design is part of every product development it not only starts affecting the bottom line, it also has to be delivered in a reliable speed and quality to ensure production to be stable and scalable. Hey colleagues, welcome to the assembly line!

Large corporations have large R&D efforts ongoing at any time across their usually wide spread portfolio and across many locations on the globe. Style guides and design templates have been a way to coordinate larger design teams for a long time already, but recently, the increasing interest in so-called design systems indicates, that with these tools alone we are not done.

Design systems are a way to systematically describe a product design (family) and make it repeatable at scale. Thus, the design system can be considered the operational framework for designers within a certain context, such as a corporation with a coherent product design.

At its minimum, a design system describes available design aspects like components and patterns, visual design aspects and potentially aspects like copy and tone of voice. It should also provide guidance to achieve a consistent experience (read more about consistency here) and the integration into the product portfolio.

However, design is not binary. It is impossible to foresee all cases and combinations so that the system has to be open for interpretation and innovation. A design system that normalizes all interactions into the same patterns and flows is a risk. To allow individual designers to operate within the boundaries of the design system, they need to be able to understand it. Any designer should be enabled to understand every piece of the design from the ground up, including the reasoning and though process that went into its creation. It is also important to allow designers understand the personality and values that are represented by the design and allow them to immerse into it when working with it.

A design system therefore has to put the design into a context of values, principles and practices that help share one mindset. These values, principles and practices can be a foundation for different design languages targeting different interaction styles, platforms or even domains while keeping a coherent mindset.

At SAP, we coordinate a globally distributed workforce of product designers using our SAP Fiori design system.

The SAP Fiori Design System

The SAP Fiori design system exists to accelerate the design-to-development process. The SAP Fiori design system is a coherent framework of different design languages that each target specific types of interactions or devices. The different design languages define everything that is needed for app creators to focus on the business logic, etc.

Building these reusable components that work together seamlessly makes scaling good design easier. This helps our customers and businesses go to market more efficiently and that has significant business value impact.

What is the benefit of such a design system? Imagine you have a specific use case that has to be accomplished on different platforms using different devices. The design system defines a framework that will provide you with a way to design your application on each of the platforms so that they fit together in a consistent manner.

Figure 1: Delivering one use case for different channels can be supported by a design system that offers different design languages for those channels. Based on the same values, principles and practices, these languages can account for the specifics of a channel while keeping a coherent experience.

Being part of a coherent design system, every design language shares the same values, principles and practices. They will look and feel coherent and will allow people to leverage their experience across all channels.

Many challenges in designing enterprise application will have a best practice solution that has been validated in many use cases optimized for the target platform.

The SAP Fiori Design system is based on a common set of values that are derived from the SAP corporate values. One set of principles guides the design and definition of SAP Fiori applications and a lean, yet powerful framework of best practices and tools allows you to scale design on every level.

Each of the design languages defined for a specific channel or interaction platform comes with an interpretation of a common style, an adaptation of a coherent set of features and functions allowing you to design similar applications for each channel. A set of tools and guidelines supports the designers and developer on adopting the design for their purpose.

SAP Fiori is independent of a concrete technology so that you can make use of your favorite frontend technology for a given channel while benefitting from the wealth of experience and expertise that has been captured into the SAP Fiori design system.

Take Aways

A design system not only helps coordinating globally distributed design teams but also allows partners and customers benefit from the experience gathered within the product design to create extensions and own applications that then are consistent with the applications of their favorite vendor.

As design is not a binary process, a deep understanding of the design process, the values and principles has to be created within the designers working on the product. This goes beyond the traditional design artifacts but includes aspect of the product personality, design mindset and processes that help create a coherent experience.

SAP has defined the SAP Fiori design system to scale design across organizations around the globe. This design system has been made available to our customers and partners through design guidelines and tools available at https://experience.sap.com.

In the next parts of this series, I will write about individual aspects of the SAP Fiori design system and how we have implemented it in our organization.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.