Crafting the Best Version of SAP Data Custodian

The Problem

SAP Data Custodian was without a design resource in 2022. In its state, Data Custodian needed wireframes for engineering to develop the product and was behind in adoption of the new SAP design system released in 2023, SAP Fiori Next.

My work started with defining tasks. I frequently met with 6 product managers that spanned the different features of Data Custodian and I was involved in projects from concept to implementation.I processed user stories to understand what needed to be built and when it came to prioritizing, I evaluated projects against business and financials goals - The items involved with the biggest deals & aligned with SAP’s focus on cloud capabilities, came first.

For my designs, I incorporated Nielsen Norman visual design principles and usability heuristics to create the best look and feel and experience that made sense and was smooth. I considered size, color, spacing, and placed an emphasis on visibility of system status, error prevention, and helping users recognize, diagnose, and recover from errors.

On the left is a design for Tokenization, a feature requested from Apple, that replaces sensitive data with a token that can be traced back to the original value. I processed the design requirements from a user story and for the creation fields, I designed sets of “specification” options that appeared based on the “tokenization field type”. For a custom field type, users could customize the length and value of their input and allow or forego permissions.
On the right, is a design for Data Anonymization, a feature that similarly protects sensitive data but differs from Tokenization in that the data behaves differently after interaction. Once data is anonymized, it is permanently altered and untraceable.In the design, I gave users feedback to help them understand what they were doing & how it was going.Steppers indicated progress while color indicated a result. I delivered both features against tight deadlines.

New Design System

What is Fiori Next? It is the new design system developed and released by the central design team in Germany company headquarters that standardized elements like font, color, and spacing. It featured new components and page templates for designing efficiency and everything was fully responsive across different breakpoints.

Here is a before and after redesign I delivered featuring the audit log page. The reason I worked on this page was because we got customer feedback to our chief product officer, where we learned users had difficulty navigating the page’s table due to a limited pagination function. The page was also outdated against requirements from a PM and the central design team, so I redesigned the page.

Now...After

In the redesigned audit log page, there is new pagination, a custom message banner component, and a standards compliant design.The new pagination afforded users the ability to select how many items they wanted on 1 page as well as type the number page they wanted to navigate to.
For the banner, I learned Fiori Next only offered red and green “failure” and “success” banners so I broke away from the established design system and designed a custom “warning” message banner component with a yellow background, a warning icon, and a “learn more” button that took users to documentation our user assistance developer published. The reason I did this was because users were frustrated trying to display more audit logs within a date range when the system had a technical constraint limiting display to the first 1000. I also implemented the new design system to meet company design standards, and my work was validated by the central design team.

These are dialog designs that ensure users are certain when interacting with sensitive items. On the left, the user must check all checkboxes AND click the link to our product documentation before the “delete key” button becomes active. I worked with our UA Developer to design the content of the checkboxes and the link. We collaborated a lot to make content throughout the product succinct, helpful, and properly presented. We also ensured a match between the user experience and instructions. On the right is a dialog with the design system implemented and showcases how a dialog looks when tasks are complete and the “delete” button is active.

Design System Implementation Continued

‍• Easier to browse by separating info into multiple pages.
• Align with design principles of SAP central design team.
• Seamless cross-platform experience between desktop and mobile.

This design showcases the characteristics of the new design system: rounded corners, new icons, new font, and new colors.

Old landing page design

New landing page design with new design system implemented

Old certificates table design

New key log design with better organization

I built the Figma library from the ground up, altogether delivering 3 new features and 9 feature improvements while collaborating with a team of over 15 that included PMs, engineers, and user assistance.

Impact

Post-launch, we saw 20% less service tickets, saving Data Custodian on labor costs. We also saw an increase in task completion efficiency which led to an increase in adoption and extensions of existing licenses, resulting in an increase in revenue.