fiori-group-shot.png
 

CLIENT: SAP

DATE: March 2013 – June 2014

MY ROLE: Visual Designer

Background

SAP is one of the world’s oldest and largest software companies. It builds software that lets large organizations manage things such as global cash positions, supply-chain logistics, and product-planning timelines. Facing competition from startups, SAP is out to prove that the granddad of business software won’t be left behind in a technology landscape upended by cloud computing. 

The Vision

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. 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.

Screen Shot 2018-04-18 at 8.25.08 AM.png

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.

My Role

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 Design-Led Development Process

The Design-Led Development Process

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.

Screen Shot 2018-04-18 at 7.08.08 AM.png

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. 

Screen Shot 2018-04-18 at 7.45.19 AM.png
Screen Shot 2018-04-18 at 7.44.52 AM.png
Screen Shot 2018-04-18 at 7.55.09 AM.png

Low-Fidelity Wireframes

We used wireframing tools such as Balsamiq to quickly visualize ideas in low-fidelity format.

Screen Shot 2018-04-18 at 7.41.20 AM.png

Prototyping and Usability Testing

We used everything from paper prototypes, Powerpoint, Keynote, and Framer to test our ideas with stakeholders and customers.

Screen Shot 2018-04-18 at 7.50.53 AM.png
 Usability Testing Session in Walldorf

Usability Testing Session in Walldorf

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. 

 
 SAP Fiori Launchpad

SAP Fiori Launchpad

 
 SAP Fiori Master Detail View

SAP Fiori Master Detail View

 
 SAP Fiori Table View

SAP Fiori Table View

 
 SAP Fiori Form

SAP Fiori Form

 SAP Fiori List Report View

SAP Fiori List Report View

 

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.

 
 Fiori UI Kit

Fiori UI Kit

 Fiori Stencil in Axure

Fiori Stencil in Axure

 

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.

 
 The SAP UI5 Icon Library

The SAP UI5 Icon Library

 

The Challenge

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.

 
 A Single Icon in Illustrator

A Single Icon in Illustrator

 

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.

     
     

    The Solution

    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

    My Role

    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. 

     
     Icon in FontLab

    Icon in FontLab

     

    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!