Design System - Matthew Correia

01 /

Problem

Glucose lacked component coverage, consistent documentation, and dependable adoption, so teams often created local solutions. After SAP acquired Signavio, the suite also needed to align with Fiori. Replacing Glucose immediately would have disrupted active product delivery, while Fiori did not cover every Signavio-specific need.

Across the suite, five-plus local button patterns had evolved independently; evidence that shared component coverage, adoption, and guidelines were not yet strong enough.

Within Governance alone, several alternative table approaches used different structures, densities, actions and data patterns for closely related needs. These four examples represent a wider suite-wide audit.

01 /

Problem

Glucose lacked component coverage, consistent documentation, and dependable adoption, so teams often created local solutions. After SAP acquired Signavio, the suite also needed to align with Fiori. Replacing Glucose immediately would have disrupted active product delivery, while Fiori did not cover every Signavio-specific need.

02 /

Process

I treated the work as both a system-maturity and organisational-adoption problem. I advocated for shared patterns, brought designers and engineers into contributing, helped establish a rotating steward model, made the case for moving from Sketch to Figma, and personally rebuilt most of the shared library there.

For the Fiori transition, I helped define a cleaner long-term direction: retire Glucose progressively rather than maintain it as a competing system. We combined a Fiori-aligned Glucose re-skin for existing UI, native Fiori components for new work, and a Signavio extension library for suite-specific gaps. I supported the strategy with early mock-ups and component comparisons; other design-system designers implemented the re-skinned library based on the Figma foundation I had built.

When SAP alignment became the direction, I compared Glucose and Fiori across controls, layouts and compound components to identify where the existing structure could be preserved beneath a new visual language, particularly in the context of the Governance app.

I audited table requirements across the suite with each product designer, then built one reusable component covering every identified use case. These proposals apply it to selected Governance examples; implementation varied by context.

02 /

Process

I treated the work as both a system-maturity and organisational-adoption problem. I advocated for shared patterns, brought designers and engineers into contributing, helped establish a rotating steward model, made the case for moving from Sketch to Figma, and personally rebuilt most of the shared library there.

For the Fiori transition, I helped define a cleaner long-term direction: retire Glucose progressively rather than maintain it as a competing system. We combined a Fiori-aligned Glucose re-skin for existing UI, native Fiori components for new work, and a Signavio extension library for suite-specific gaps. I supported the strategy with early mock-ups and component comparisons; other design-system designers implemented the re-skinned library based on the Figma foundation I had built.

03 /

Solution

The rebuilt library combined reusable components, variants, tokens, theming, and layout patterns for common enterprise UI. It separated private building blocks from published components and introduced clearer documentation, versioning, and implementation guidance.

I also helped define reusable form patterns through comparative testing, qualitative and quantitative customer feedback sessions, and design-engineering reviews. The guidance balanced top-aligned labels for scanability with side-aligned labels for dense, user-generated forms, and covered validation, required fields, read-only states, and multi-select behaviour. Workshops and improvements to the online style guide helped designers and engineers use the system in day-to-day delivery.

Because the Fiori re-skin preserved Glucose’s component structure and behaviour while changing its visual layer, existing design files could move across without being rebuilt. Re-skinned Glucose and native Fiori could coexist visually while the underlying migration continued.

I rebuilt and extended the form system with comprehensive states and flexible component structure, then documented its anatomy, spacing, labels and behaviour for consistent implementation.

I initiated and designed the Tags and Chips components, covering their variants, states and compound popover behaviour through to implementation specifications.

The later team-led Horizon re-skin preserved the component architecture, states and options I had established in Glucose. A broad visual change could therefore happen without rebuilding the system from scratch.

03 /

Solution

The rebuilt library combined reusable components, variants, tokens, theming, and layout patterns for common enterprise UI. It separated private building blocks from published components and introduced clearer documentation, versioning, and implementation guidance.

I also helped define reusable form patterns through comparative testing, qualitative and quantitative customer feedback sessions, and design-engineering reviews. The guidance balanced top-aligned labels for scanability with side-aligned labels for dense, user-generated forms, and covered validation, required fields, read-only states, and multi-select behaviour. Workshops and improvements to the online style guide helped designers and engineers use the system in day-to-day delivery.

Because the Fiori re-skin preserved Glucose’s component structure and behaviour while changing its visual layer, existing design files could move across without being rebuilt. Re-skinned Glucose and native Fiori could coexist visually while the underlying migration continued.

04 /

Outcome

Delivered
An entirely rebuilt shared Figma library, reusable components and tokens, form and table patterns, clearer documentation, implementation guidance, and cross-functional Figma enablement.

Enabled
A workable migration model combining a compatibility layer, native Fiori for new work, and an extension path for Signavio-specific gaps without disrupting product delivery roadmaps.

Observed adoption
By the time I left, starting new product work from a shared design-system foundation had become expected across the suite, and that adoption momentum carried into the Fiori transition.