SAP Fiori is SAP’s design system providing 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 different variants (design languages) of the SAP 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 by providing 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 such as SAPUI5 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 customers and partners to share SAP’s experience gained in more than 40 years as a 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 from a small initiative to an industry-scale design system for all SAP products. In its latest and third evolution, 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 started off and eventually led to 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 ever imagined 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 SAP 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 for mobile phones, the design process foresaw to gradually add additional functionality when moving up to larger devices such as tablets or desktops. All aspects of the design language SAP Fiori for Web had to be carefully designed to adjust to any device no matter if used with mouse and keyboard or 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:
- Breaks down monolithic transactions into role-based and task-focused apps.
- Enables a responsive experience across all devices.
- Makes 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 SAP Fiori ready to serve as a design system for all scenarios SAP software addresses. With SAP Fiori 2.0 the design grew into a system that was not only able to address simple use cases but also offered intuitive solutions for even the most complex business scenarios.
Thus qualified as the new face for SAP’s flagship product SAP S/4HANA, SAP Fiori 2.0 introduced a number of new floorplans that accommodates 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 SAP Fiori launchpad offering productivity features such as notifications and improved navigation. With its second iteration, SAP Fiori introduced a new productivity tool initially featuring the (unpronounceable) name “mnemonics” which evolved over time into the conversational digital assistant SAP CoPilot.
Figure 3: SAP Fiori 2.0 with the Belize deep theme and the new SAP Fiori launchpad with viewports. SAP CoPilot and notifications. The new floorplan 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 a 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 such as SAP GUI for Web, WebDynpro and SAP CRM Web Client to offer a more coherent experience across technologies. Other product areas started adopting aspects of SAP Fiori 2.0 such as the new Belize theme to better integrate with SAP 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, SAP Fiori for Android was announced as a result of a partnership with Google.
SAP Fiori 2.0 can be summarized as follows:
- Scales the role-based and task-focused design approach to complex enterprise scenarios and native mobile platforms.
- Offers a powerful productivity environment for business users with new scalable floorplans and patterns, including embedded analytics, notifications, search, and improved navigation.
- Introduces 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 had already 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 was supposed to 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 the new Quartz theme that comes in a light and 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 different products including 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 can now detect critical business contexts independent of predefined processes and workflows, and provides the user with solutions and recommended actions to resolve them.
The variety of technologies supporting the SAP Fiori 3 design system once again has been further extended beyond the already established reference technology SAP UI5 and the classic UI technologies into the latest web technologies based on frameworks such as Angular, React or Vue, and Web Components.
SAP Fiori 3 has been designed around the following focus areas:
- Consistency: offers 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: provides solutions to integrate different independent products and technologies into an environment that is coherent and easy to use
- Intelligence: establishes machine learning and artificial intelligence as an integral part of the user experience focusing on enabling the user rather than taking away control
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 finally laying the foundation 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.