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.
Fiori Android design system (Apr 2020 - Jun 2021)
- Working closely with the team of researchers and developers for a seamless end-to-end component design process.
- Creating pixel-perfect stencils for the design system.
- Mapping out and maintaining design system guidelines.
Fiori Conversational design system (Jun 2021 - Present)
- Leading the team iterate CXD design systems stencil and spec.
- Purposing the new design process for component design and maintaining workflow.
- Defining the delivery standard for CXD stencil and spec file.
- 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.
Department: SAP design language & system
Duration: 2 years
User: SAP product designer / developer
Toolbox: Figma, Sketch, Flinto, Abstract, Android Studio, SAP Conversational AI team
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
Fiori Android AR annotation
Fiori CXD design system
Design System Management
Like any other product, a design system is only as functional as usable. As a design system designer, it is crucial that creating an easy use component library for our customers to improve their design and development efficiency. When I joined our SAP conversational design system team, I found many problems for our stencil, spec, and final component implementation. To fix these problems, I proposed a new design flow and cooperated with the whole team to improve the experience and usability for our users.
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.
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.
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 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.
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.
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.
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.
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.
Support work can be support developer to implement the design or answering questions from the designer who has questions for our components after we published our components to the public.
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.
We have only one component here, but it can expand to different sizes.
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.
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.
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.
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.
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
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
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