The Evolution of SAP Fiori: From Mobile-First Design to Horizon Theme

Introduction:?

In today's fast-paced business landscape, user experience plays a pivotal role in the success of enterprise software. SAP Fiori, a design system by SAP, has revolutionized how businesses interact with their software applications. Since its inception in 2013, SAP Fiori has undergone a remarkable evolution, culminating in the latest Horizon theme. In this blog, we will explore the journey of SAP Fiori, from its humble beginnings to its current state as an industry-scale design system.?

SAP Fiori 1.0: The Foundation

SAP Fiori emerged in 2013 as an innovative approach to business software design, prioritizing a "mobile-first" strategy. This initial version laid the foundation for the Fiori design system. It introduced role-based, simple, responsive, coherent, and delightful apps. Fiori 1.0 broke down complex, monolithic transactions into focused, task-based apps. Designed to work seamlessly across various devices, including smartphones, tablets, and desktops, Fiori 1.0 was implemented using SAPUI5 and OpenUI5, making it accessible to developers.

Key features of SAP Fiori 1.0

• 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: Expanding Horizons

Building on the success of Fiori 1.0, SAP Fiori 2.0 aimed to become a comprehensive design system for all SAP software scenarios. This version introduced new floorplans capable of handling complex business scenarios while maintaining an intuitive and responsive design. The Fiori 2.0 launchpad enhanced user productivity with features like notifications and improved navigation. Additionally, SAP introduced the conversational digital assistant, SAP CoPilot, as part of Fiori 2.0, further enhancing the user experience.

SAP Fiori 2.0 received recognition with the prestigious Red Dot Award and brought innovations like the integration of transactional and analytical features, leveraging SAP's in-memory technologies. It extended its influence on classic UI technologies like SAP GUI for Web, WebDynpro, and CRM WebClient, ensuring a consistent user experience across platforms. The partnership with Apple and Google led to the release of SAP Fiori for iOS and Android, making Fiori accessible on native mobile platforms.

Key features of SAP Fiori 2.0

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

SAP Fiori 3: The Intelligent Enterprise

In 2018, SAP Fiori entered its third iteration, solidifying its position as the design system for the intelligent enterprise. Fiori 3 focused on integrating the user experience across all SAP products. The Quartz theme and redesigned shell bar streamlined navigation and offered more flexible home pages. Simple navigation links complement existing tiles, and detail cards provide quick access to information.

Fiori 3 marked a significant step toward integrating machine intelligence into business processes. It enhanced conversational interactions, machine-generated ratings, and recommendations and introduced design principles for human-centric interactions with intelligent systems. The concept of business situations allowed the system to detect critical contexts independently and recommend solutions.

Fiori 3 extended its support to a broader range of technologies, including Angular, React, Vue, and Web Components, alongside SAPUI5 and classic UI technologies to ensure flexibility and adoption.

Key features of SAP Fiori 3

• Establishes basic rules for consistency across all SAP products.
• New Quartz theme
• New aligned shell bar for all SAP products.
• Greater flexibility for home pages
• Integration of machine intelligence, focusing on a human-centric approach
• Adoption across a broader range of technologies

SAP Fiori with Horizon: A Fresh Look

The latest evolution of SAP Fiori is the Horizon theme. Horizon introduces a modern and fresh look with vibrant colors, rounded corners, and softer shapes. Accessibility is a key focus, with Horizon aligning with the W3C Web Content Accessibility Guidelines (WCAG) 2.2. Stronger contrasts, improved spacing, and a more precise visual hierarchy enhance usability.

Horizon offers four themes that cater to different preferences, including light and dark versions and high-contrast accessibility options. It's available for web and native mobile app development, supporting SAP's UI technologies.

Key features of SAP Fiori with the Horizon theme

• The new vibrant color palette that meets WCAG AA accessibility standards
• Enhanced customer branding options
• New icons are set across all platforms.
• Enhanced focus with more contrast, space, and visual hierarchy
• Two flavors (light and dark) plus two high-contrast accessibility themes

Conclusion:

SAP Fiori has come a long way since its inception in 2013. Its evolution from a mobile-first design approach to the Horizon theme showcases SAP's commitment to delivering a consistent, user-centric, innovative design system. With each iteration, Fiori has advanced its capabilities, making it an indispensable tool for businesses aiming to provide superior user experience in their enterprise software applications.