Be Ready for the Future of Work – Start with a Design System
The SAP design system is evolving to meet the challenges of today’s enterprise needs, preparing not only our workforce and products but our customers and partners for the future of work
With the future of work in flux, companies must continue to navigate a work force that is figuring out how to work across endless combinations of locations, time zones, cultures, perspectives, and processes. One of the most crucial superpowers for any global enterprise may be an unexpected one: the design system. By establishing standardized design principles, visual components, and interaction patterns, design systems ensure a consistent user experience regardless of who is working on a project or where they are located. This consistency not only accelerates productivity but also fosters a sense of familiarity and trust among users.
But we don’t want to just stop at consistency—we want to strive for exceptional experiences. At SAP, our vision is to bring out the best in every business. This is why when building the SAP design system, we focused on 3 key things we knew would be needed as we define a higher standard for the future of work together:
- Start with a foundation of accessibility and inclusion
- Design for a truly cross-platform experience
- Build consistency at enterprise scale
Start with a foundation of accessibility and inclusion
SAP serves an estimated half a billion users across all product portfolios. With a user base this large, we have a responsibility to design experiences that let all people do outstanding work, every day. Making enterprise software as accessible and inclusive as possible is not a nice-to-have but rather a must-have.
To start, we’ve made sure that the SAP design system is advancing digital accessibility in line with the WCAG (the international Web Content Accessibility Guidelines). The system is also designed to go beyond base-line standards for accessibility and we strive for all of our products to be as inclusive as possible of the human experience in all its diversity. Here are some examples below:
- High-contrast ratio: According to the World Health Organization, there are an estimated 2.2 billion people globally with vision impairments. With this in mind, the four variants of the SAP design system’s latest visual theme Horizon have been designed in line with the WCAG’s contrast recommendations. Morning Horizon, Evening Horizon, High Contrast Black and High Contrast White themes were designed with adequate contrast between the text and background to assist people with color vision deficit and moderately low vision. SAP’s 80+ components and patterns are automatically available in all four themes.
- Screen reader ready: Most designers think first about the visual screen, but many users rely on a screen reader to intake content and operate a page via voice or braille output. Our design templates and assets come equipped with keyboard and screen reader specifications.
- Accessible typography: A font plays a key role in any design system. It’s one of the most widely used elements, connecting information, interface, and style. When it comes to choosing a font, it’s not just about looking good, it also has to put in the work. SAP’s proprietary font, 72, supports more than 150 languages and is designed to improve legibility. For example, font elements such as counterform (the whitespace in letters like ‘O’, ‘P’, ‘d’, and ‘e’), and open terminals (the tail ends in ‘t’, ‘d’ etc.,) are designed to be more open and reduce density for better legibility. An advantage of “72” is also that the letters are distinguishable. E.g. I and l.
- Global languages: To serve a global customer base, we must make sure that our design system is truly global. For example, the system supports languages that are read from right to left (RTL), such as Arabic and Hebrew. In these instances, they mirror the default left to right (LTR) interface. This includes the visualization of imagery which is direction sensitive, such as arrows or buttons.
- Universal imagery: In addition to accommodating global languages, we’ve also taken into account how imagery reads in different global contexts. Icons and illustrations can have different local meanings or interpretations, so it’s important that any visual metaphors used are as universal as possible. For example, when researching what to use for our currency icon, we wanted to avoid defaulting to the US dollar sign for all currency. While the US dollar sign is still in use as an icon, we also developed an icon representative of generic paper money, which is country agnostic.
- Improved keyboard focus: A focus indicator is a visual indicator that “highlights” the currently focused element. This visual indicator is commonly presented as an outline around the element. We enhanced the color, thickness and style to improve perceived contrast and visual affordance of this element across the Horizon themes.
Time and time again, we’ve found that designing for accessibility has massive benefits for all users. When SAP supports our customers’ diverse users, it is better for business overall. Together with other tools like the SAP Inclusive Research Handbook and the SAP Accessible Design Tools, we’re on a mission to empower teams outside of SAP to also drive inclusive practices into their businesses.
Design for a truly cross-platform experience
The rise of remote work in 2020 certainly ushered in a new era of comfort for employees working across desktop and mobile devices. In the immediate future, the barriers between devices will disappear even more. But “cross-platform” does not begin and end with remote desk workers—it’s about bringing the same level of technology and user experience to the many different environments in which companies get work done. From desk to factory floor to delivery truck, the SAP design system is poised to meet the diverse landscape of modern work on every device to strive for a seamless user experience.
To ensure a truly seamless user experience, the design system needs to meet the ergonomic and functional needs of an increasingly wide range of devices. Below are a few ways that SAP is approaching the cross-platform experience:
- Partnerships with Apple and Google: With SAP Fiori for iOS, we’ve adapted our design language specifically for iOS devices in close partnership with Apple. SAP Fiori for Android extends Google’s Material Design with business relevant UI components, patterns, and capabilities. With this approach, we’re making sure enterprise use cases have the same quality as any modern operating system.
- SAP Fiori across devices: The SAP design system is designed for different interfaces so that we can bring business applications to a growing list of devices including desktop/laptop, mobile (including foldables), tablet, watch, AR/VR, large format, and auto. We’ve already begun adapting SAP Fiori for watchOS by Apple and Wear OS by Google so that enterprise users can access real- time business insights, smart notifications, and critical tasks through their smart watches.
Build consistency at enterprise scale
When it comes to design systems, consistency helps users learn something once and use it over and over again, decreasing onboarding time for new apps. These patterns help us learn and extend that knowledge across experiences.
One thing that makes the SAP design system unique is that it’s not just used by our internal product teams, but by customers and partners around the world. This means, we’re responsible for a system that shows up in apps used by millions all over the world, every day. Here are some of the ways we’re driving consistency both inside and outside SAP:
- Driving consistency externally: To reach a global enterprise scale requires a tight set of design standards and guidelines to ensure consistency and cohesion. The SAP Fiori Design Guidelines are available externally and are widely used with 1.4 million clicks in 2023. The site includes guidance for how elements such as buttons, icons, and full-page layouts are used. It also includes a set of out of the box coded componentry that can be used to create a consistent user experience for all our customers’ business application needs.
- Driving consistency from within: Internally, we’ve adopted a specific set of standards to help us improve the consistency of the user experience across the SAP product portfolio. This not only makes the SAP user experience more seamless but helps anyone externally extending the system with applications built on SAP S/4HANA or on the SAP Business Technology Platform.
A standout design system built to scale with the future
The future of work will only be as strong as the tools we use to enable it. It may come as a surprise that a design system is doing so much to help future-proof companies around the world, but with user-centered principles at its core, the SAP design system is bringing out the best in businesses.