DNA Web UI Kit — Design System, AI Tooling, and Impact at SAP

components

Building reusable UI that scales across products and teams.

As part of my work on the DNA Web UI Kit, I designed and documented components intended for use across SAP Analytics Cloud, Datasphere, and Business Data Cloud. Each component involved cross-functional collaboration with UX leads, developers, and accessibility advocates — balancing Fiori guidelines, product-specific requirements, and consistency across the platform.

Creation Item List

The Creation Item List component needed to be unified across SAC, DSP, and BDC, which had each diverged in structure, token usage, and visual style. I updated the base component set to make the "Create" header a boolean property, rebuilt the BDC variants using the base component, ensured all Data Builder options were included, and updated color tokens to use the correct sapList_Background and sapList_BorderColor variables with a corrected 16px border radius.

A key discussion during this component involved avatar background colors and when color is appropriate. The guiding principle: colors should maximize perceptual contrast between items, not be chosen for aesthetics or harmony. I also contributed to an accessibility discussion around keyboard interaction — specifically whether arrow keys in a grid should follow the UI5 pattern (up/down for vertical movement) or the Fiori Keyboard Interaction spec (up/down mirroring left/right). The team agreed on a hybrid approach aligned with both documents, pending input from the Central Accessibility team.

App Start Page

Updated the BDC Application Start Page to use SAC components, ensuring visual and structural consistency across all three products. Work included creating subcomponents for the table and toolbar to allow interchangeable use across products, cleaning up auto-layout and descriptions in the spec, and ensuring all pages were responsive.

Page Switcher Component

Some product toolbars used a custom pagination/page switcher component not covered by the SAP design system. I led the effort to evaluate whether an existing component could substitute it, or whether a new one needed to be built and added to the Q1 kit release. After consulting with component owners, I designed and specced the Page Switcher as a subcomponent — documenting the logic for arrow state (disabled on first/last page), adding text and instance properties for easy value changes, and adding a variant property to toggle between active and disabled arrow states.

System Information Bar

The System Info Bar in both SAC and DSP was using hardcoded HEX values for Tenant Type colors, violating UXC-010 compliance. I updated the component to use SAP theming variables instead, making it properly themeable and removing hard-coded values from the affected components: the System Info Bar, favicon, and color swatch.

Admin Floorplan

Multiple inconsistent save patterns existed across admin settings in the product, creating an unpredictable experience for administrators. This component work fed directly into the broader Admin Settings unification effort — establishing a consistent floorplan standard that could be applied across products.

AI guide

Teaching the design org to work with AI, not around it.

Placeholder — add context about the Claude DNA Design AI Guide here.

What it is

Placeholder — describe the document, its purpose, and who it was made for.

How it was used

Placeholder — describe the workshop, adoption, and impact on the design org.

impact

Contributing beyond the design file — inside and outside the org.

Placeholder — add an intro to your broader involvement at SAP here.

Intern Committee

Placeholder — describe your involvement, what you did, and the outcome.

LifeAtSAP

Placeholder — describe your content work with the Germany and New York teams, what you created, and your impact.

D-Shop

Placeholder — describe what D-Shop is and your involvement there.