SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices.

• SAP Fiori accelerates and scales the design and development of enterprise software by offering design standards and practices that are implemented in enterprise-grade reference technologies and tools for various platforms.
• SAP Fiori follows a modular design approach based on business roles, moving away from traditional monolithic transactions.
• SAP Fiori redefines enterprise user experience by focusing on user tasks and workflows.

Designing interactions for enterprise business scenarios can be simplified, accelerated, and standardized across multiple platforms using the different variants (design languages) of the Fiori design system for browser-based, conversational or native mobile platforms. SAP Fiori offers best practices and solutions for most interaction design problems that occur when designing enterprise software for simple to highly complex business scenarios in the form of controls, patterns, floorplans and entire interaction flows.

Figure 1: The SAP Fiori Design System provides three different platform-specific design languages.

With SAP Fiori we offer design solutions that are usable, robust, scalable, and of enterprise-grade quality – implemented in several reference technologies like for instance SAP UI5 and the SAP Cloud Platform SDK for iOS and Android. The SAP Fiori design system is evolved and maintained primarily to support the internal development of SAP business applications, but it is also made available to the customers and partners to share the experience gained in more than 40 years as leader in enterprise software.

• SAP Fiori is at the core of our product experience and design strategy.
• Public access to our design guidelines for SAP Fiori for Web, SAP Fiori for iOS, SAP Fiori for Android, and SAP Fiori for Conversational UX.
• Public access to the open source version for one of the reference technologies implementing SAP Fiori for Web: Open UI5; and to the support material for the product version of SAPUI5 that is available to our customers and partners.

SAP Fiori has evolved out of a small initiative into an industry-scale design system for all SAP products. In its latest and third evolution of SAP Fiori the design team has been focusing on consistency, integration and intelligence to ensure that SAP Fiori can be used to integrate all products into one intelligent enterprise suite.

In the following section, we would like to briefly explain how this amazing success story took place and cumulated into the latest version of SAP Fiori 3.

SAP Fiori 1.0

SAP Fiori started in 2013 as an initiative to re-imagine business software by applying a “mobile first” design approach to the most frequently used use cases. At that time, no one could have envisioned this to become so successful that it would revolutionize the way how business software would be designed in future.

Figure 2: A typical master-detail app with the colorful icon tab bar and the second generation of the Fiori launchpad.

Based on the principles of role-based, simple, responsive, coherent and delightful, this laid the foundation for a new design system. With the first version of SAP Fiori we started breaking down large and monolithic business transactions into focused task-based apps. Starting with the core features set and functionality suitable to a mobile phone, the design process foresaw to gradually add additional functionality when moving up to larger devices like tablets or desktops. All aspects of the design language Fiori for Web had to be carefully designed to adjust to any device no matter if operated with mouse and keyboard or the fingers. This first version of SAP Fiori was first implemented and evolved in our reference technology for browser-based applications SAPUI5 (versions 1.26 – 1.38) which is also available as open source under the name Open UI5.

In summary, the first iteration of SAP Fiori can be described by the following key aspects:

• Break down monolithic transactions into role-based and task-focused apps.
• Enable a responsive experience across all devices.
• Make use of modern and mobile-inspired interaction patterns

SAP Fiori 2.0

As a result of the success of the initial version of SAP Fiori, new capabilities had to be introduced to make Fiori ready to serve as design system for all scenarios SAP software addresses. With SAP Fiori 2.0 the design grew into a system that would not only be able to address simple use cases but that would offer intuitive solutions for even the most complex business scenarios.

Thus qualified as the new face for SAP’s flagship product S/4HANA, SAP Fiori 2.0 introduced not only a number of new floorplans that could accommodate large amounts of information and complex functionality in an intuitive and still responsive way; additionally, SAP Fiori 2.0 defined a new integrated and powerful user environment based on the Fiori launchpad introducing productivity features like notifications and improved navigation. With it’s second iteration, SAP Fiori introduced a new productivity tool initially featuring the (unpronounceable) name “mnemonics” which over time evolved into the conversational digital assistant CoPilot.

Figure 3: SAP Fiori 2.0 with the Belize deep theme and the new Fiori launchpad with viewports. CoPilot and notifications. The new floorpan based on the dynamic page.

Awarded with the prestigious Red Dot Award, SAP Fiori 2.0 was launched in October 2016. Soon after that, an additional award honored the innovative ways of integrating transactional and analytical features leveraging the possibilities of SAP’s in-memory technologies.

Again, SAP Fiori 2.0 was implemented in SAPUI5 as primary reference technology (version 1.42 – 1.70). In addition to this, SAP Fiori 2.0 was applied in a redesign for classic UI technologies like SAP GUI for Web, WebDynpro and CRM WebClient to offer a more coherent experience across technologies. Other product areas started adopting aspects of SAP Fiori 2.0 like the new Belize theme to better integrate with S/4HANA.

With SAP Fiori for iOS, the first version of the SAP Fiori design system for native mobile platforms was released in partnership with Apple. Two years later, Fiori for Android was announced as a result of a partnership with Google.

Fiori 2.0 can be summarized under the following statements:

• Scale the role-based and task-focused design approach to complex enterprise scenarios and native mobile platforms.
• Offer a powerful productivity environment for business users with new scalable floorplans and patterns, including embedded analytics, notifications, search, and improved navigation.
• Introduce conversational interaction and machine intelligence.

SAP Fiori 3

In 2018, the third iteration of SAP Fiori was announced. The continued success and proven ability to scale and integrate latest trends and requirements already had established SAP Fiori as the design system for the intelligent enterprise. All product areas committed to work towards the adoption of SAP Fiori 3 as the iteration of the design system that would integrate the experience of all SAP products. This decision was further operationalized into the newly founded product standard for UX consistency.

Figure 4: SAP Fiori 3 with the more expressive home page using cards and with multiple pages. The new visual design called Quartz light.

Apart from a new theme “Quartz” that comes in a light and in a dark flavor, SAP Fiori 3 introduced a number of new features that facilitate the integration of all SAP products into one coherent and consistent user experience. Some of the most important aspects are:

• The top-most screen area, referred to as shell bar, has been redesigned to support all navigation and functional requirements found in the different products and includes the possibility to switch between independent products.
• Home pages have been redesigned to offer more flexibility in the granularity of information offered here, adding information-rich cards as well as simple navigation links to complement the tiles provided in earlier versions.
• A user can have multiple home pages, so-called spaces, that can be provided by the corporate to offer access to various domains and contexts, integrating the powerful possibilities of overview pages into the same lifecycle as the home pages.

SAP Fiori 3 also makes a huge step forward in integrating machine intelligence into the business environment by offering a more integrated experience for conversational interaction, machine-generated ratings and recommendations, and a whole set of design principles that ensure a human-centric approach to the interaction design for intelligent systems. With the concept of business situations, the system now can detect critical business contexts independent of predefined processes and workflows and provide the user with possible solutions and recommended actions to resolve them.

The variety of technologies supporting the Fiori 3 design system once again has been extended beyond thealready established reference technology SAP UI5 and the classic UI technologies further into latest web technologies based on frameworks like Angular, React or Vue and Web Components.

SAP Fiori 3 has been designed centered around the following focus areas:

• Consistency: offer design solutions that can be adopted by all UI technologies and scenarios across the entire range of the SAP portfolio leveraging the expertise of the entire SAP design community.
• Integration: provide solutions to integrate different independent products and technologies into an environment that is coherent and easy to use.
• Intelligence: establish machine learning and artificial intelligence as an integral part of the user experience with the focus on enabling the user rather than taking away the control.

Summary

During the past six years, SAP Fiori has grown and matured into a solid and comprehensive design system for enterprise software applications. From an initial mobile first approach for the most common use cases, SAP Fiori has expanded to cover more and more of the professional scenarios covered by SAP’s enterprise software portfolio. With the latest and third iteration of SAP Fiori we have put emphasis on integration, consistency and intelligence to be able to offer an intelligent suite of applications across the entire portfolio.

Each of these evolution steps was carefully built on top of the previous iteration incorporating the feedback and learnings we had gathered in the meantime. First expanding the functionality and scale, then incorporating intelligent features and laying the foundations for a consistent and truly integrated suite.

This journey certainly will continue so that SAP Fiori will never stand still and continue to evolve but at the same time we will take care of not leaving anyone behind and making the changes a coherent and logical continuation of the evolution you have experienced.

This article Forst appeared in the SAP User Experience Community.