SAP
Building the Data & Analytics Web UI Kit
Designing a shared component library and rollout strategy for 165+ designers across SAP’s analytics products.
OVERVIEW
Timeline
August 2024 – April 2025 (Build & Launch)
July 2025 – Present (Strategy & Growth)
Team
4 UX Design Leads & 5 Frontend Developers
Role
Designed 11 components and collaborated with 4 development teams on implementation.
Led communications to drive adoption across our organization of 165+ designers.
Shaped the post-launch strategy for the kit, including release cadences, a contribution framework, and a design system resources portal.
Impact
Since launch, the DNA Web UI Kit has been used across 150+ design projects. My Data Token component alone grew to 115,000+ inserts, becoming the most widely used DNA component across the organization.
Within months, 100+ designers had also onboarded to the design system portal to access release notes and learning resources.
BACKGROUND
What is DNA Design?
The Data & Analytics (DNA) Design team supports SAP Analytics Cloud, SAP Datasphere, and SAP Business Data Cloud. Together, these products help businesses unify, visualize, and analyze data at scale.
The team spans 8 countries with 165+ designers, researchers, and technical writers.
A closer look at SAP Analytics Cloud, one of three products supported by the DNA Design team
THE PROBLEM
165+ analytics designers with no shared design library
SAP’s Web UI Kit provides foundational tokens and atoms, but not the DNA-specific patterns our analytics products rely on. This created three key challenges:
CHALLENGE #1: INCREASED DESIGN EFFORT
Building custom components from scratch increases design time and reduces efficiency.
CHALLENGE #2: INCONSISTENT IMPLEMENTATION
When designers create their own versions of the same components, UI inconsistencies emerge across DNA products.
CHALLENGE #3: POOR SCALABILITY & MAINTENANCE
Adapting designs for new features becomes inefficient without a shared, maintainable foundation.
THE SOLUTION
Introducing the DNA Web UI Kit
The DNA Web UI Kit extends from SAP's design system to centralize DNA-specific components, patterns, and layouts. Each page includes usage guidelines, implementation examples, visual specs for developers, and accessibility annotations.
MY CONTRIBUTIONS
I designed 11 components and patterns for the DNA Web UI Kit
Each involved alignment with product design and development stakeholders, building the component and writing documentation, and completing a final quality sign-off with the UI Kit Owner.
Certain elements have been hidden or recreated due to NDA restrictions.
Avatar
DNA-specific avatar with variants for our 10 personas.
Data Token
Interactive tokens for configuring data visualizations.
Filter Settings Dialog
Dialog for managing filter configurations.
FPA Icon Guidelines
Documented usage guidelines for the FPA icon font.
Menu
Common contextual menu patterns for DNA products.
Message Strip / Toast
Message strip notification patterns for DNA products.
Semantic Icons
Guidelines and standards for semantic icon usage.
Settings
Settings dialog with variants for product-specific pages.
Switch
Guidelines for switch alignment and grouping patterns.
Upload File Dialog
Dialogs for file upload interactions.
User Menu
User account and profile menu.
COMPONENT SPOTLIGHT
A deep dive into the Data Token, one of the kit's most complex components
The Data Token is one of the most frequently used elements in SAP Analytics Cloud (SAC) and Datasphere (DSP).
For customers, it’s the main interaction point for building and configuring data visualizations. For designers, it appears in nearly every analytics workflow, making it one of the first components they reach for.
It was also one of the most complex components I worked on, requiring alignment across 10 design stakeholders.
Step 1: Stakeholder Alignment
The Data Token existed in fragmented forms across SAC and DSP – each product had developed its own variations independently, with no shared foundation.
Before building the component, I needed to align the foundational pattern across both products, including spacing, size, color, text styles, and internal elements.
I gathered all existing implementations and worked with 10 designers across SAC and DSP to align on a unified proposal before starting new design work.
Before: How many variations could a data token possibly have?
After: A consolidated proposal for SAC and DSP.
Result: An aligned design across products.
Previously, the spacing, color, and button styles varied across products. After alignment, a single unified pattern could be applied consistently across all areas.
Step 2: Building the Component
Designing for accessibility and scalability.
With the proposal approved by design leads, I built the Data Token in Figma, accounting for multiple variants, theming support, minimum touch targets, and keyboard navigation.
Structuring the Data Token for Flexibility (Pre-Figma Slots)
The Data Token supports many configurations: leading icons, trailing icons, status indicators, buttons, and combinations of these elements. Before Figma Slots was available, the challenge was enabling that flexibility without creating an unmanageable component.
OPTION 1: EXHAUSTIVE VARIANT MATRIX
One approach was to map each token configuration to a separate variant.
However, the number of variants would grow rapidly as configurations multiplied –
bloating the file, slowing performance, and making the component difficult to maintain.
OPTION 2: NESTED SWAPPABLE INSTANCES (THE BETTER WAY)
Instead, I designed leading and trailing element containers with swappable nested instances.
Common elements were now accessible through a dropdown, and designers could still use Figma’s
swap instance tool for custom elements when needed.
This structure kept the file lightweight, preserved library performance at scale, and allowed
the component to support new use cases without detachment.
Step 3: Collaborating with Development
Bridging the gap between design specs and live implementation.
Working with 4 development teams, I quickly realized that understanding how engineers built components was just as important as the design itself.
To avoid details getting lost in translation, I reviewed their CSS libraries, demo kits, and code already in production to ensure technical feasibility for implementation.
I also sought developer feedback early and often, which surfaced an unexpected issue: I was now over-speccing. My annotations repeated default variables that were already defined in the base component we were extending from, and developers interpreted those details as intentional overrides.
To avoid unnecessary custom code and keep the components adaptable for future UI themes, I changed our handoff approach to only list deviations from defaults. This change simplified the specs and led to more accurate implementations across teams.
Following the work on the Data Token, I used these specs to create a handoff template for the DNA Web UI Kit.
ROLLOUT STRATEGY
Official Launch
Introducing the Web Kit to the organization.
The DNA Web UI Kit launched at a global DNA Design meeting in April 2025, where I introduced the first set of components with live demos. Within three weeks, the Data Token alone had been used over 1,000 times across six teams.
Ongoing Strategy Development
How do we drive adoption and streamline communications?
The kit launched with strong momentum, but lacked the infrastructure to sustain adoption.
Designers needed a clear way to find updates, ask questions, and contribute improvements.
When I returned to the team full-time in July 2025, I partnered with a senior designer to define
the next phase of the system: a central resource hub, governance model, structured release cadence,
and dedicated communication channels.
We presented the strategy to the Head of Design and rolled it out across the organization in Q4
2025.
What's new?
DNA DESIGN SYSTEMS SHAREPOINT
A central portal for release notes, video tutorials, and FAQs.
CONTRIBUTION & GOVERNANCE
New component requests are submitted by design leads each quarter, collectively discussed, and voted on based on usage frequency and cross-product requirements.
RELEASE CADENCE
Bi-weekly releases for bug fixes and minor updates. Quarterly releases for new components and large-scale changes, with the roadmap defined each quarter alongside design stakeholders.
COMMUNICATION CHANNELS
A quarterly newsletter with each release, and a dedicated Teams channel for design systems questions.
IMPACT
1,000+ implementations in 3 weeks → 115,000+ in a year
Adoption that grew steadily... and kept growing.
Just three weeks after launch, the Data Token had been used over 1,000 times by designers across six teams. Within a year, it surpassed 115,000 inserts, becoming the most widely used component in the DNA Web UI Kit.
The system has since been used across 150 projects, enabling designers to reuse shared patterns rather than recreating components across products.
The strategy rollout in Q4 2025 extended that reach. The DNA Design Systems SharePoint portal received 610 total views from 110+ unique designers in its first few months, with viewership up 19% in the most recent 30-day period, indicating sustained and growing engagement.
FEEDBACK
Kind words from my collaborators :)
"I appreciate your patience, focus, and ability to turn complexity into clarity while tackling the holistic big picture all the way down to the granular details. You've been an invaluable asset to this team."
— Amina Musa, Analytics UX Design Lead @ SAP
"Thank you again for your detailed mock ups and supporting us with sign offs in the Horizon theming support! We are all amazed by the fine details you spec out in the Form section header, RSS tokens and the complex (advanced) filter dialog! Truly and deeply appreciated!"
— Michelle Wong, Senior Developer @ SAP
"Amazing newsletter. Super easy to digest and very relevant for our product design team. Thanks team for putting in the extra efforts!"
— Joelle Jones, Analytics UX Design Manager @ SAP
REFLECTION
Scaling design through systems thinking
What the DNA Web Kit taught me about people, process, and ownership.
Prior to this project, I assumed design systems work focused on building components in Figma. Instead, I found that creating components was often the shortest part of the process. The majority of the work went into aligning stakeholders, refining proposals, collaborating with development teams across different codebases, validating implementation, and planning for long-term adoption and maintenance.
Working in an organization the size of SAP gave me a new appreciation for how much collaboration goes into building a successful design system. With a single component proposal requiring alignment across 10 contributors, coordination with four development teams, and careful quality checks before release, I learned that meaningful change depends on patience, clear communication, and building consensus around a shared direction.
Looking ahead, I'm excited to continue evolving the DNA Design System as AI reshapes the way designers work. As AI becomes part of everyday design workflows, I believe design systems have an even greater role to play in providing consistency, structure, and quality at scale. I'm especially interested in exploring how AI can strengthen the design system itself through better documentation, improved discoverability, and more intelligent ways for designers to find and apply the right patterns, while ensuring the system continues to evolve alongside the people who use it.
