Help SAP bring a consumer-grade experience to its enterprise apps.
The bread and butter of SAP’s business has long been desktop software for mega-corporations like airlines and oil companies. But in this age of mobile-first and cloud technology, and SAP sees the writing on the wall: innovate or get out of the way. SAP’s new UX paradigm—Fiori—helps SAP compete with a better experience.
Facing competition from startups, SAP is out to prove that the father of business software won’t be left behind in a technology landscape upended by cloud computing. SAP Fiori (“flowers” in Italian) represents SAP’s intent to deliver a consumer-grade user experience across all of its on-premise and cloud-based applications. A harmonized experience that is responsive and adaptive—whether you’re on a phone, tablet, or desktop. Based on user roles and business processes, SAP views Fiori as a means of simplifying doing business. It’s a paradigm shift away from monolithic ERP solutions towards light-weight apps tailored to the users’ tasks.
Fiori Design Principles
The design philosophy of SAP Fiori is based on five core principles. It’s role-based, adaptive, simple, coherent, and delightful.
Some of the tenets of the Fiori design experience include:
- Simple. Fiori is clean, organized, and simple.
- Consistent. Fiori uses consistent and familiar interaction patterns and visual design.
- Modular. UI blocks can be combined in various ways because they share the share behaviors.
- Scaleable. The modularity of the experience makes it scaleable to support every use case.
- Adaptive. Responsiveness ensures customer get the same experience across all devices.
SAP established various “labs” to operate as startups within the organization. The hope was that infusing a little Silicon Valley startup culture into SAP would help drive innovation. I was brought in as a member of the SAP Global Design team—a multi-disciplinary team that designs, develops and delivers system-based design solutions for the enterprise. I was hired as a full-time principal visual designer at the lab in New York City. My responsibility was to help with the rollout of Fiori—partnering with strategists, UX designers, content strategists, and developers in New York, Palo Alto, and Germany. I helped design various system components, icons, and also contributed to the effort to deliver our icon library as a typeface.
A Design-Led Approach
Design leadership embraced a true design-led approach with Fiori. This process takes advantage of proven design thinking methods to achieve an optimal user experience. The process spans the entire development lifecycle, is simple and easy to follow, and provides a solid basis for scaling design as a whole. It fosters unity between designers and developers, while ensuring that the needs of the end user are addressed at every step along the way.
The central UX leadership team in Walldorf managed concept definition and pattern guidelines along with final approvals on designs but actual execution of concepts was truly a global effort across distributed teams worldwide. In order to support these teams throughout the design-led development process, the central leadership team implemented “design gates” to ensure that the designs were consistent, followed design guidelines, and truly addressed the needs of end users.
Design Thinking Workshops
Design thinking workshops were conducted in Walldorf and Palo Alto to meet with customers and product owners, generate ideas, and to align with the central UX team.
We used wireframing tools such as Balsamiq to quickly visualize ideas in low-fidelity format.
Prototyping and Usability Testing
We used everything from paper prototypes, Powerpoint, Keynote, and Framer to test our ideas with stakeholders and customers.
New Design Patterns
Here are examples of some of the new patterns for commonly used application components that we collaboratively designed and developed for Fiori Wave I.
Design Stencils & UI Kits
My team also contributed to design stencils for Fiori—ready-to-use drafts of SAP Fiori layouts, patterns and controls in Powerpoint, Sketch, and Axure RP to help other designers quickly visualize SAP Fiori app ideas.
Evolving an Icon System
As designers, we understand the value of icons in a visual design system. When an interface is made entirely of text, the amount of time and effort it takes to read and evaluate every word increases to the point of cognitive overload. Icons offer a form visual shorthand, lowering cognitive load and better utilizing space. Icons use familiar shapes and metaphors to communicate concepts in simple graphic forms.
The SAP Icon Library
The SAP icon library was vast—648 icons in various sizes and colors, and all in PNG format.
For many years, SAP has used a large library of icons on web and mobile apps. Anytime we needed a new icon added to the library, a visual designer would draw it, present concepts to the product owner, and then get approval from the central UX leadership team for the design. Once approved, a cumbersome workflow needed to be followed to generate the final vector artwork in Illustrator along with the multiple files required for the different sizes and resolutions. Around 40 files were required for one single bitmap/png icon. We created actions in Illustrator to help automate some of this process but it was still a pain in the butt and not future-friendly. We needed a better way.
Additionally, there were issues with the icons themselves. Some were confusing in terms of their meaning. Stylistically, they were all over the map in terms of design and they didn't quite work well as a system. They were not consistent in terms of line weight and negative space. Some were pixel-perfect. Others were not. And as an expression of the SAP brand, they didn’t feel particularly unique or personal.
We needed a strategy to fix this. Here’s what was proposed to the leadership team:
- Create a new system of icons that are meaningful, unique, and consistent, and feel like SAP
- Develop clear guidelines to instruct designers on how to design new icons in a way that ensures meaningfulness, consistency, and legibility
- Come up with a streamlined workflow for adding new icons to the library
- Investigate SVG versus icon font as an icon deployment solution, considering performance, browser compatibility, accessibility, responsiveness, and display on high-density monitors
Under the leadership of Gerard Keane, principle visual designer for SAP SE, our team was challenged with solving for the appropriate deployment solution. Now there are many schools of thought on what is the superior solution: SVGs vs. an icon font. In end we ended up opting for an icon font and here’s why:
- Flexibility. With an icon font, the designers and the developers have the same flexible asset.
- Performance. Icon fonts are a better choice than inline SVGs for performant apps.
- Ease of styling. With icons fonts, it’s easy to manage scaling and coloration via CSS.
- Ease of management. Icons are grouped into one file, necessitating just one http request, making icon library management very simple and upgrades easier to distribute.
We used FontLab as our font authoring and editing solution. It has extensive glyph drawing and editing tools, advanced metrics, support for virtually all font encodings and codepages, and can import/export fonts with up to 6400 characters. I had used Fontographer and FontLab previously to design my own custom typefaces, so ramp-up time for me was minimal.
I’m not going to lie, getting the existing icon library (648 icons in total) into FontLab was challenging, even with help from other visual designers. But honestly, it was not the importing of the icon vectors that was tough, it was hand-hinting the icons in FontLab to ensure correct visual display on all screen resolutions. That was a bear!