SAP Fiori intergrated design system
I took the role as Design Strategist and DesignOps for the development of a comprehensive design system for a global financial services firm, aligned with SAP Fiori standards, while establishing a long-term strategy for collaboration and contributions from the company's international design teams. This system features a flexible, scalable library of reusable components, ensuring design consistency and improving development efficiency.
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.
- Discovery and Define-
Workshops
To collect qualitative insights from stakeholders and design teams, I facilitated multiple workshops, revealing key issues:
Lack of unified design system: Four international design teams, working on both customer-facing and internal applications, lacked a shared design system.
Inconsistent component creation: Without a central framework, designers often created localized components independently, leading to inconsistent design patterns and reduced efficiency.
Limited cross-team collaboration: The absence of collaboration between teams further amplified these issues, resulting in fragmented design practices and a slower development process.
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.
- Develop and Deliver-
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.
Learning
As a Design Strategist working on a design system, I gained key insights that enhanced my strategic thinking and design approach:
Stakeholder collaboration: Worked closely with cross-functional teams, including designers, developers, and legal experts.
Consistency and scalability: Learned how to create scalable and consistent design components that support future growth.
Documentation and knowledge transfer: Focused on clear documentation, creating a style guide, component library, and user handbook.
Design system governance: Developed processes to manage updates and maintain consistency.
Strategic alignment with business goals: Ensured the design system aligned with business objectives, enhancing efficiency, consistency, and brand cohesion.
