Overview
Problem Statement
Research & Discovery
Ideation & Strategy
Design & Prototyping
Testing & Iteration
Outcome & Impact
Reflection & Next Steps
Overview
Enhancing Key Management: A More User-Centric, Accessible, Modern and Secure Approach
Enterprise Application: CyberSource, VISA
Duration: 3 months
Role: Lead UX Designer, UI Designer
Tools: Figma, usertesting.com
Team: Business Product Manager(BPM), Technical Product Manager(TPM), Lead Developer Lead, QA Lead.
Problem Statement
Background
Key Management is part of CyberSource's Payment Configuration that enables customers to manage their API keys, which are required to execute transactions and access other payment-related features. These API keys have expiration periods. Once expired, customers must generate and use a new API key. If a key expires without being updated, customers lose access to transactions and key platform features, leading to operational disruptions.
Challenges
Transaction Disruptions & Revenue Loss
When customers fail to update expired API keys, they experience service interruptions, leading to potential revenue loss for both CyberSource and its customers.
High Volume of Unused Keys
A significant portion of generated keys remains unused, inflating system overhead and management complexity.
Accessibility Compliance Issues
The existing portal has multiple ADA compliance issues, making it difficult for all users, including those with disabilities, to manage their keys effectively
Outdated UI & Inconsistency
The portal’s outdated UI library results in inconsistent user experiences compared to other CyberSource modules, affecting usability and brand perception.
Limited Sandbox Awareness
Many users are unaware of the sandbox environment, leading to unnecessary production key creation and potential security risks during testing.
Objective
The goal of this initiative is to redesign the Key Management Portal to be more user-friendly, accessible, and efficient by:
Reducing transaction failures due to expired API keys.
Improving key utilization rates by minimizing unused API keys.
Enhancing ADA compliance for an inclusive user experience.
Modernising the UI to align with CyberSource’s latest design standards and security recommendations .
Research & Discovery
Heuristic Evaluation Findings
Error Prevention & Recognition
In the key generation flow, a user, depending on their type, could create some or all types of keys. However, the UI allowed the creation of any key type. If the user selected a key type they did not have access to, the UI displayed a generic error message: 'Something went wrong. Please try again.' The UI failed to prevent the user from making this mistake, and the error message lacked clarity and useful information.
Screenshot: Select Key Type
Lack of Clear Warning
Once a key is generated, it is displayed on the UI. For security purposes, the key is shown only once and disappears if the browser is reloaded or if the user revisits the page. However, the UI did not provide prominent or sufficient information about this behaviour, leading some users to lose their keys.
Screenshot: Key generated screen
Screenshot: Key listing
Inconsistent Information Hierarchy
In the key listing UI, a 'View Logs' link appeared in each key list item. This link directed users to another page where, depending on their role, they could see all account-level activities. However, all these links led to the same webpage, breaking the hierarchy in information display and creating inconsistency in navigation.
Date-Time Readability & User-Friendly Formatting
The UI displayed dates in the ISO 8601 extended format, making them hard to interpret and impacting readability. A similar issue in another Cybersource project showed that the Month-Date-Year HH:MM:SS Timezone format performed better. While the ISO format is machine-friendly, a more user-friendly format enhances usability.
Inconsistent status info Expired/Inactive.
The UI displayed inconsistent key statuses. On the key listing page, it showed "Inactive," while elsewhere, it displayed "Expired." This inconsistency may confuse users, making it unclear whether the key is no longer active or has completely expired.
Personas
The Key Management Module primarily serves 2 user personas.
Developers are the dominant user group, interacting directly with the portal or through Account Managers for key management.
Account Managers, though fewer in number, handle large no. of merchant accounts, generate keys upon developer requests, and notify developers via email or shared credentials to update keys.
Approximate primary user distribution chart.
User Interview Key Findings
Developers
Primarily use the "Generate Key" and "Recently Generated Keys" features.
Key Management Challenges: Developers often copied keys to Notepad or documents, and when handling multiple keys, they frequently lost track of them.
Key Type Confusion: New developers struggled to differentiate between symmetric and asymmetric keys. Testing specific features requires only one of these types. Workarounds included referring to documentation or asking other developers for help.
Date Interpretation Issues: The extended date format was difficult to interpret, leading developers to rely on the list order to determine the most recently created keys.
Lack of Sandbox Awareness: Many developers were unaware of the sandbox environment and instead used production environments for testing. The sandbox environment could enhance security and prevent unnecessary creation of production keys, minimizing risks and maintaining a clean production setup.
Account Managers
Primarily focused on tracking expiring keys and using the "Generate Key" feature.
Key Management Challenges: Account managers often relied on Notepad or documents to store keys. When managing multiple keys, they frequently lost track, leading to errors and delays
Limited Expiration Notifications: The key expiration alerts were only sent to the registered email, which posed a problem for account managers who did not have access to that email account, resulting in missed updates and potential service disruptions.
Every Monday, the first thing I do is check if any keys are expiring within the next 30 days
-an Account Manager from a major bank
Insight from Customer Support Team
When service disruptions occurred due to key expiration, customers reached out to the Support Team for assistance. To mitigate the impact, a two-week grace period was offered, allowing customers extra time to update their keys and restore service continuity.
Ideation, Strategy & Wireframes
Introduce Friction to the Key Creation Process
To enhance security and reduce the volume of unused keys, users will be required to re-authenticate via a one-time password (OTP) sent to their registered mobile number or email before generating a new key. This added friction will encourage users to generate keys only when necessary. This approach aligns with the cybersecurity team's recommendations, reinforcing secure practices and mitigating potential risks.
OTP Flow
Enhanced Expiry Notifications: Reducing Missed Updates and Service Disruptions
To address the issue of limited expiration notifications, where alerts were only sent to the registered email—posing challenges for account managers without access—we decided to implement a multi-channel notification strategy. Expiry alerts would be prominently displayed on the dashboard and the key management landing page, ensuring critical information is visible to all relevant users. Additionally, the key listing page would feature a default “Expiring Soon” filter, allowing users to quickly identify and act on expiring keys.
To further minimize risks, we decided to send email reminders at multiple intervals: 30 days before (existing), 2 weeks before, 7 days before, and 1 day before expiration. These enhancements aim to reduce the risk of missed updates and prevent potential service disruptions.
Main Dashboard
Dropped Ideas During Ideation:
1. Add New Email/Phone for Expiry Notifications: While this approach could improve notification reach, it was deemed impractical due to the significant changes required in the legacy system, which was nearing decommissioning.
2. Automated Voice Calls: The idea involved sending automated voice calls to registered phone numbers. However, this posed challenges for portfolio accounts managing millions of merchants, potentially leading to overwhelming call volumes. Additionally, since automated voice call services were not available on any VISA platform, the onboarding process would require multiple approvals and could take months to implement.
3. Revamping the "Key Type" Selection UI
We decided to redesign the "Key Type" selection interface to introduce category-based sorting and security-driven recommendations. This approach not only streamlines the selection process but also guides users toward safer choices by highlighting preferred key types for specific use cases.