What is SAP Fiori

SAP Fiori is SAP's enterprise software design system. First introduced in 2013, Fiori simplifies business and application production by providing consistent and holistic floorplans and design components. In 2021, the Fiori design system had revolutionized to Fiori 3.0 and currently consists of 4 different platforms: Web, iOS, Android, and Conversational design system.
This project will briefly discuss my work for the SAP Fiori design system from two perspectives: component and pattern design process and design system management.

My Role

Challenge

- Creating scalable and viable components and patterns in SAP Fiori for different enterprise use cases using different research methods based on the requirements.
- Work with developers and designers to develop high-standard delivery guidelines
- Define and manage the standard of design and spec library.

Product Related

Components in This Project

I contributed many components for the SAP Fiori design system, and it is hard for me to show all the details designs of the components I designed. In this project, I will mainly discuss the flow I design work on the design system design. And use the components I list below as examples to show how the design works.

Multi-user onboarding pattern

Onboarding pattern

Privacy notice

Fiori Android AR annotation

Fiori CXD design system

Design System Work Flow

When I joined the conversational design system team, we did not have an end-to-end flow design process to guide our users on how to onboard, explore, document, and deliver the high standard component for our users. I checked many online resources, combined with my SAP Fiori Android and my side project work experience to help our team have the standard workflow for our design system.

Onboarding
The goal for the onboarding is to help designers getting prepare the project from three perspectives.
High level problems & project goals
The initial scope of the project and the need of our user, this user could product designer or the product's end user.
Key contributors and stakeholders
We share project briefs with stakeholders in kickoff meetings to align on scopes and timelines. Each new design exploration is documented in an ongoing presentation deck and reviewed in ad-hoc meetings with stakeholders.
Document setup
We need to set all the files in advance and share these documents with our stakeholders in the onboarding process. Depending on the case, these documents include the Jira link, Figma, and guideline documents.

Design exploration
Design exploration is a step for our component's designer hands on the design of the components and pattern. Our design exploration phase usually have three steps.
Design research
Depend on the need, designer should use different method to do the design research. For component design, exploring design diversity is important because it can help designers make design decisions in different contexts.
Design review
It usually needs multiple rounds of design review with the internal design team and our stakeholders to make the final design decision. It is essential for Including stakeholders in the design review to prevent the gap between technology restriction and the design.
User testing
Sometimes, the design decision is made by the internal team. However, if the team cannot reach an agreement, we will ask the research team to work with us to plan the user testing to confirm our design options.

Documentation
After the team consider the design is finished, the designer should take responsibility to document the design, including cleaning the design in the spec and stencil file, finishing the design guideline and delivering any documents our stakeholder need.

Figma Design Management

The CXD design system is based on web and IOS platforms, so it is important to make our components responsive and flexible through the auto-layout feature. I also defined the rule for naming the layers cleaning the design file. And picking plugins to accelerate our design process.

Responsive
We have only one component here, but it can expand to different sizes.

Plugins
The plugin is also a very important part of the design process. I picked Appearance (Theme switch), Measure(A plugin for easy measurement of sizes), Stark(accessibility checking plugin) to help the team accelerate and check the design.

Spec template
The spec template includes the "Must" and "Optional" templates. The "Must" template is the spec information designer must include in the design system. Our designer can decide whether to put the" Optional" template into their spec or not based on their component.

Design Process

Follow the design flow made by the SAP design operation team, cooperating with researchers, designers, and developers, my work is consists of taking ideas from concept to actual implementation.

Design Research

The design exploration method depends on the design requirement. When we create a pattern/component design existing in SAP products, we will try to analyze the current user flow/feature for different products with design variants. If it is a new component, usually, we will use the research method like competitive analysis to get references externally. For Android/IOS components and patterns, we always need to check the design guideline from Apple and Android to make sure our component/pattern aligns with them correctly. Below are some examples.

Fiori Android Onboarding Pattern Research
The Fiori Android onboarding pattern is the onboarding pattern SAP applications created for its business user. Because there is no official guideline to help our product designer plan how to design the onboarding before, I researched the current SAP application's onboarding flow, then concluded these steps into five main steps with variants in some of the steps.

Analysis SAP applications' current onboarding flow

Concluded all the steps into five steps

Fiori Android privacy notice pattern research
The Fiori Android privacy notice pattern is a new pattern for the SAP Android design system, so I use the competitive analysis to analyze different privacy-related designs on the market and expand the design scope from onboarding only to in-screen and setting pages control based on my exploration. I also sync with developers about my questions during my design exploration before the hand on the design to make sure there is no development constraint for the design scope I defined.

Fiori Android privacy notice competitive analysis - Related applications

Fiori Android privacy notice competitive analysis - Feature analysis

Fiori Android privacy notice competitive analysis - Other design systems

Concluded all the steps into three main parts

Purpose of the research
The purpose of the research is use the research process to help me get a broad perspective on the component I need to design and work with stakeholder to expand or shrink its design scope for covering most of the user case SAP applications need.

Design Review

From the low-fi prototype to the hi-fi prototype, every time I have the design in hand, I'll present them to our design team and stakeholder to get crucial feedback. The design review can help me get the design feedback from design and technical perspectives for design iteration and implementation. The design review will continue until the design leader signs the final design.

Privacy notice design review

Fiori Android AR annotation design review

Usability Testing

Depending on the result of the design review and the design purpose, the designer can decide whether the design needs usability testing or not. Usually, we will cooperate with the user research team to work together on the research plan, and then the research teams need to recruit interviewees. After all the research is finished, the researcher will generate the research report and review it with the component's audit. Below is the example of the research report for the Fiori Android AR annotation component and Privacy notice component.

Privacy notice research report

Fiori Android AR annotation report research report

Final Design

The final design decision depends on all the steps above; sometimes, the design scope will change based on our feedback during the design. All the components' design needs a dark and light theme. If the component is on the mobile platform, we also need to design different screen sizes for it. Below are some of the example from the Fiori Android onboarding pattern.

Fiori Android onboarding - Theme

Fiori Android onboarding - Activation

Fiori Android onboarding - Sign in