Design overview

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. Now in 2021, the Fiori design system has revolutionized to Fiori 3.0 and currently consists of 3 different platforms: Web, iOS, and Android.

My role

As part of the Fiori for Mobile team, I support the Android build, initiated by the SAP x Google partnership. This includes, but is not limited to:
•  Designing components and patterns that are consumed by the Fiori for Android SDK
•  Working closely with team of researchers and developers for a seamless end-to-end process
•  Creating pixel-perfect stencils for the design system
•  Mapping out and maintaining design system guidelines

Challenge

Creating scalable and viable components and patterns in SAP Fiori for different enterprise use cases.

Product related

Department  | SAP mobile
Duration | 1 year
User | SAP product designer / developer
Toolbox | Figma, Sketch, Flinto, Abstract, Android Studio

My patterns

•  Onboarding
•  Multi-user onboarding
•  Privacy notice

Onboarding

Multi-user onboarding

Privacy Notice

Design Process

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

The Fiori for Android team follows an Agile workflow, comprised of 2-week sprints where we come together to update one another on corresponding tasks. This Agile workflow aligns with our Fiori for Android release cycles, which span over the course of a few months (usually 3-5 months).

Understand the requirement

When design a brand new components or enhancements for components that are already part of the system. The process always begins with first understanding what needs to be designed and the end-goal. At the beginning of design the components, I usually will ask three questions which are what's the ask and requirement? What is the component? What is the scope?

Exploration

Once I’ve understood what the design request is, I move onto the discovery and exploration phase. The first thing I usually do is check the related components in material design, then I will check how other products will present the similar components. at last because the Fiori for Android topic was introduced to the Fiori family after the iOS topic, some components may already have an iOS design, so I’ll also refer to that existing design for parity and consistency within the design system.

Prototype

After getting some inspiration for potential designs, I will create different design options, and review these options with the team. Below are the checklist when I working on the prototype.
•  How the interaction will work.
•  Where the component would be used.
•  Which Fiori colors and typography are appropriate and accessible.
•  The responsiveness across different devices (mobile vs. tablet).

Design options for the privacy notice

Design Review

Once I have the design options for the component, I'll present them to the design owner and the rest of the team to get crucial feedback. These design reviews are sometimes kept between the design lead and Android team (5 designers) or other times with the entire Fiori for Mobile team (15 designers), depending on the scope of the component.

Design research

Sometime, after the design research, we still cannot decide which design option is better, since the design system team really hard to connect with real user, in that case, we will cooperate with the researcher team to help us get the feedback from the user, and let us know which design direction would be better.

Research report for privacy notice (Part)

Iteration

After getting valuable feedback from my team, I’ll continue to iterate on my designs. I will narrow down options and have a good idea of what direction I should go in for a particular design. However, this iterative process is continuous until the design lead signs off on the final design.

Specification

Once the design is finalized, I make sure the specs are ready for development. The process of mapping out specs includes making sure everything is pixel-perfect, and interaction flow easy to understand.

Onboarding Abstract "Inspect" view

Multi-user onboarding user flow

Developer Handoff

Once specs are all good to go, I will hand it off to development. During this time when the component is being built, there is ongoing communication with development to answer any questions they may have and use Android Studio to check the apk, to make sure the component implement meets the design.

Guideline

While the component is in development, I start to compose the article that goes into our guidelines. After finish the guideline draft, I’ll send it to the rest of my team for feedback. Once done editing the copywriting, fixing grammatical errors, and editing images and animations then the article is ready to be published to our external guidelines site. Click this link to check Fiori Android guideline.

Stencils with auto layout

The last part of the design process is to ensure the component’s integration into our design system’s library, meaning creating stencils and reusable elements of the final component design. Once finalized, the component is then ready to be used by any designer, across SAP and beyond. Below are the checklist for our new Figma stencil requirements.
• Link every text style.
• Link every color style.
• Link universal components (buttons/icons).
• Apply auto layout, constraints, resizing.
• Padding.
• Create variants.
• Organize and order (left-right, top-bottom).
• Proper naming.
• Dark and light mode.
• Everything must be in cozy style.

Onboarding pattern in Fiori Andorid Stencil