Delivering Design System Components for SAP Fiori

Designed and shipped reusable component patterns for the SAP Fiori design system, giving product teams consistent, accessible building blocks to work from.

2023Lead DesignerDesign System · Web

Two SAP Inventory mobile app screens showing a horizontally scrollable tab bar with categories like Repair Tools, Safety Equipment, and Medical Supplies, with the right screen demonstrating a tab reordering interaction

Problem

Product teams were rebuilding the same interface patterns in slightly different ways, creating inconsistency and rework across the SAP Fiori ecosystem.

Approach

Audited existing tab bar usage across products to define the full matrix of variants teams actually needed.
Specified each configuration — text-only, icon, and mixed layouts across two to four tabs — with clear states and spacing rules.
Documented the components so engineers and designers could adopt them without guesswork or one-off interpretations.

Outcome

24: Component Variants Shipped
100%: Accessibility Compliant
Adopted: Across Product Teams