SAP Fiori intergrated design system

Challenge

The project's main goal was to iteratively integrate SAP Fiori Stencil updates and contributions from international design teams into a unified design system, replacing fragmented approaches. This system served as a single source of truth, improving efficiency, ensuring design consistency, and facilitating team collaboration. The key challenge was integrating updates from SAP Fiori Stencil and various teams without overwriting existing components or causing conflicts, while managing frequent contributions to avoid inconsistencies in the design process.

Approach

As DesignOps, I adopted an adapted double diamond approach to develop our design system. This process, traditionally split into two phases of divergent and convergent thinking, was tailored to our needs:

Discover and define: We explored core design challenges, conducted research, identified workflow gaps, and gathered insights to create a clear problem statement for the design system.

Develop and deliver: We then proceeded with creating the design system, establishing its components, iteratively testing solutions, and documenting the user handbook.

Conception

To streamline automatic updates from SAP Fiori Stencil and support contributions from multiple international design teams, an intermediate Figma file, known as the "Pre-release file," was developed. The "Pre-release file" functions as a comprehensive prototype of a SAP Fiori Stencil release. It incorporates all design components, properties, naming conventions, and descriptions from the most recent SAP Fiori Stencil version by organizing them into component sets. This setup allows the initial SAP Fiori Stencil to serve as the core design library, ensuring that future updates can be rapidly integrated through Figma’s library swapping feature. As a result, any updates to SAP Fiori Stencil are quickly reflected within the "Pre-release file".

Additionally, contributions from international design teams are managed through a branching and merging process. Designers contribute by creating branches of the "Pre-release file," which are then reviewed and approved by a designated design library administrator. Once all contributions are finalized, the "Pre-release file" is duplicated and published as the newest version of the design library. This final version includes all elements from the SAP Fiori Stencil, the latest contributions from international teams, and two color themes introduced by the marketing department.

Initial setup

After conducting multiple focus group discussions and brainstorming sessions, we determined our initial design library, incorporating all design components derived from the SAP Fiori Stencil. These components include:

Component name: A distinct and unique identifier for each UI component to prevent miscommunication between designers and developers, ensuring the components function correctly without issues.

State changes: Suggested default states and corresponding visual changes to indicate different interactions or conditions.

Annotations: Descriptive notes and page annotations to clarify the purpose and function of each component.

Breakpoints: Defined size specifications and breakpoints for responsive design, provided for developers to ensure proper scaling across devices.

Iteration

The design system remains a work in progress, evolving through continuous iterations. As new components are introduced, the design system team has been assessing their impact on the overall product. Feedback from international design teams and the development team has been instrumental, shedding light on both successes and areas for improvement.

Key Wins:

• Reduced development time for new components, thanks to the reusable design elements inherited from SAP Fiori Stencil.

• More efficient handoff between design and development, requiring less clarification on component details.

• Greater consistency across the coded design, leading to a more cohesive user interface.

Other projects