A New Horizon for SAP’s Design System

The Horizon theme is the first step in SAP’s system-wide design and UX transformation

SAP Design
Experience Matters
5 min readNov 7, 2022

--

A collage of different UI elements from Horizon, the new theme for SAP Fiori, featuring Horizon Morning and Horizon Evening

People today expect more from their enterprise software than ever before. Which means, the intelligent enterprise needs to deliver products and applications that are on par with the consumer-grade apps used by millions every day. SAP products span almost every industry across the working world, serving businesses that make up 87% of the world’s total global commerce. With a user and customer base that big, we have a responsibility to deliver more useful, inclusive, and engaging experiences that will help every person get their work done faster, more intuitively, and with measurably better business outcomes than ever before. The first step in SAP’s system-wide design and UX transformation is a new visual theme aimed at unifying our extensive product portfolio and closing the gap between enterprise and consumer product experiences.

Why start with a design language?

Language is key in any form of communication, and when it comes to user experience, our design language is how we communicate and craft a stellar experience for our end users. The new Horizon visual theme encompasses what we refer to as our design language, which is only part of SAP’s evolving design system. The language is made up of the visual, audio, and haptic elements that serve as the user interface and direct user interactions across all touchpoints.

You only have one chance to make a great first impression, so for the Horizon theme, we focused on a few key goals and values to help make the experience better, more accessible, and more inclusive for everyone:

  • Intentional and exceptional: meeting user’s intentions with relentless attention to detail resulting in exceptional product experiences.
  • Effortless and intuitive: making work feel second nature while eliminating friction and surprises.
  • Seamless and cohesive: delivering a cohesive, cross-platform experience throughout the SAP solution family and all touchpoints for our users.
  • Bold yet friendly: making users feel relaxed and inspired by using bolder colors and typography, with a friendly, approachable and contemporary look and feel.
  • Inclusive and ethical: opening up enterprise software for everyone with a deep commitment to accessibility and strong ethical framework that will evolve with our users. Designing with people instead of only for people.
3D representations of UI elements from the new Horizon theme from SAP Fiori in Morning and Evening modes
The Horizon theme in Morning (light version) and Evening (dark version)

How does this design language show up in SAP products?

The Horizon theme was developed based on user feedback in order to provide a better overall working experience for SAP’s enterprise software customers and end users.

Some key visual and interactive elements of the system include:

  • A modern and fresh look with the new vibrant color palette that meets WCAG AA accessibility standards
  • Allowing strong customer branding with optional hero element for home pages
  • A new icon set to communicate clearly and consistently across all platforms
  • Rounded corners and softer shapes make apps friendly and approachable
  • A simplified header bar for improved information hierarchy
  • Emphasizing important information using bold SAP typography (72 bold font)
  • Creating a sense of focus with more contrast, space, and visual hierarchy
  • Making components clearer and more understandable using simplified aesthetics
  • Ensuring an easy-to-learn and coherent experience across devices by using a mobile-first approach
The Object Header shown in overlapping tablet and smartphone devices in the Horizon theme from SAP Fiori
The Morning Horizon theme on a tablet and smartphone device

Horizon has now been adopted and is widely available in key products across our lines of business, including:

  • SAP S/4HANA Cloud, private edition and SAP S/4HANA
  • SAP Service Cloud
  • SAP Sales Cloud
  • SAP Business Technology Platform Services
  • SAP SuccessFactors
  • SAP Emarsys Customer Engagement

Horizon is also integrated into Microsoft Teams. Users can share content from SAP Fiori elements apps with others on using the Share as a Link or Share as a Chat functionality. If you are interested in trying out further Teams integration opportunities, please register via the Customer Influence page of SAP’s Early Adopter Care program (available to SAP customers).

Is Horizon available on mobile?

We’re meeting the workforce where they are today, which is distributed, remote, and global. The Horizon theme is designed with a mobile-native approach to allow you to get your best work done, wherever you are.

The Horizon theme for mobile apps can be easily adapted to fit corporate branding guidelines, for example by replacing the SAP logo with a custom company logo and by adapting the color scheme.

SAP Mobile apps with Horizon include:

  • SAP Mobile Start
  • SAP Ariba Shopping
  • SAP Warehouse Operator
  • SAP Direct Distribution
  • SAP Service and Asset Manager
Two overlapping smartphone views of the Horizon theme in Morning and Evening modes
A smartphone view of the Evening Horizon and Morning Horizon themes

What’s next for the SAP Design System?

The next evolution of the SAP design system is underway, informed by user insights and built to unite SAP’s extensive portfolio of software and applications with one exceptional digital experience.

More than any one theme or language, the next evolution of the SAP design system is a strategic shift for SAP that includes:

  • A modernized design language, including more iterations on the new Horizon themes
  • Guidelines, education, and training for users, partners, and developers working with SAP software and applications
  • Design-led development practices and processes implemented across our product and design teams
  • Strengthening our user-centered design values and principles across SAP
  • A new framework for expanding design foundations across the organization

Read more on Horizon for SAP Fiori

Experience matters. Follow our journey as we transform the way we build products for enterprise on www.sap.com/design.

--

--