SafePay Web Solution
Project Overview: Developing a SafePay method of payment selection for web platforms
The objective of this project is to design and implement the SafePay modality for web platforms. The SafePay User Interface is currently exclusive to Chase’s native application. This project aimed to develop a unified UI for SafePay that seamlessly integrates across all banking payment products within the Chase ecosystem, specifically for the web experience . This modality will enhance online payment security, ensuring a safe and seamless transaction experience for users.
Project Overview:
Research and Analysis: Conduct a comprehensive analysis of existing payment security measures and identify best practices to inform the development of SafePay. Audit current banking payment products to ensure seamless integration. Align with users mental models to include the SafePay native value adds.
System Design: Outline the technical architecture and user interface for the SafePay modality, ensuring it aligns with current web standards and user expectations as set per the native experience.
Testing and Quality Assurance: Execute rigorous testing scenarios to validate the performance, security, and usability of the SafePay modality.
Deployment and Monitoring: Implement the SafePay modality on the web platform by integrating with Chase banking payment products (Pay Chase Card, Zelle, Transfers, Wires, Bill Pay, My Chase Loan…), followed by ongoing monitoring and maintenance to ensure optimal performance and security.
This project aims to position the SafePay modality as a leading solution in online payment security, fostering user trust and encouraging adoption.
My Role: Lead UX Designer
Timeline:
3 months for discovery
2 months for design/user research
1 month for delivery
Project Background
What is SafePay?
SafePay standardizes payments within the Chase ecosystem, ensuring a modular and consistent user experience across various form factors with a unified interface. The available modalities include full page, bottom sheet, drop down, and container options, accommodating both mobile native applications for iOS and Android as well as responsive web interfaces.
A diverse array of payment methods is offered, allowing users to utilize DDAs, credit and debit cards, rewards points, and payment over time options. Additional capabilities include split tender transactions, linking external cards, and establishing default payment methods.
SafePay promotes a cohesive digital identity across user journeys and channels, facilitating a smooth integration experience for journey teams. The SafePay UI component libraries enable these teams to leverage our service APIs, thereby creating seamless integrations.
Why is SafePay important to Chase?
SafePay is critical in enhancing the user experience in digital payments by focusing on both security and usability. As online transactions increase, a seamless interface with built-in security features becomes vital. Users expect not only secure transactions but also an intuitive experience that allows them to navigate financial processes effortlessly.
A well-designed SafePay interface significantly reduces friction during the payment process. For instance, users can complete transactions quickly with minimal steps, thanks to streamlined account visibility, organization and display. This efficiency not only enhances consumer trust but also meets the operational demands of businesses that rely on prompt transactions.
Furthermore, a user-centric approach to SafePay includes informative feedback mechanisms, such as real-time notifications and visual cues that enhance understanding during the transaction. This transparency builds confidence, making users more likely to engage in online commerce, knowing their information is secure.
In summary, SafePay is essential not only for safeguarding financial transactions but also for creating an efficient and trustworthy user journey. A strong focus on UX/UI elements can lead to a more positive experience for both consumers and businesses, ultimately driving growth in the digital payment landscape.
Discovery Phase
Key Stakeholder Requirements
Alignment with SafePay Value Propositions
Alignment with Native Experience: Ensure that SafePay integrates naturally into the current banking ecosystem without disrupting user familiarity and maintaining the cohesive interface and interaction patterns.
Integration into Existing Banking Payment Products
Compatibility: Assess technical requirements to ensure that SafePay can be incorporated into existing banking infrastructure without extensive overhauls.
Flexible APIs: Develop robust APIs to facilitate smooth integration, enabling quick adoption by banking payment products.
Design Approach
1. Audit of Banking Payment Products
Information Architecture: Audit banking payment products to review the structure, organization, and flow of payment information to enhance user experience and optimize operational efficiency.
Method of Payment Analysis: Review current banking payment products to evaluate their selection approaches, identifying strengths and weaknesses in user interaction.
Stakeholder Interviews: Conduct stakeholder sessions with integrating journeys to gather feedback on payment selection methods within banking payment products.
3. Audit of Chase Pattern Library
Component Utilization: Identify usable components within the Chase pattern library that can enhance the design and maintain consistency across platforms.
Best Practices: Understand design rationales behind Chase’s choices to incorporate effective methodologies into SafePay’s user interface.
User Experience Consistency
Holistic Approach: The design should promote a unified experience, where users can readily identify and use SafePay features similarly to existing payment methods.
A seamless experience between a web interface and a native app is vital for user familiarity and confidence, enhancing engagement and minimizing frustration. This consistency ensures smooth transitions between platforms, keeping the user journey uninterrupted and intuitive.
2. Competitor Research
Benchmarking: Analyze competing banking payment solutions to identify best practices and opportunities for differentiation within SafePay.
Feature Comparison: Document which features resonate best with users and how they enhance overall payment experiences.
Ideation and Design Phase
Evaluation through ideation
Ideation phase allowed for the design team to iterate on our discovery learnings and stress test various selection modalities including drop downs, list, slide-in panels, radio button groups, tile groups, accordions, and text inputs within banking payment journeys.
Through these stress tests, design recommended and aligned with stakeholders on 3 modalities to take into user testing. We ensured technical feasibility prior to testing to help us build a target state solution. This discussion is crucial for developing a more efficient payment system that effectively accommodates diverse consumer needs while enhancing overall user satisfaction.
Drop Down Method of Payment Selection
Drop-down selection, allows users to view and select their preferred payment method from a comprehensive list without disrupting banking payment journey flows BAU patterns. This familiar interface provides a sense of security as users easily identify well-known options like internal and external accounts.
List Method of Payment Selection
List selection presents payment options in a more compact form. This approach enhances visibility, making it easier for users to compare multiple payment methods at a glance. It appeals to users who prefer quick access and the ability to make informed decisions without navigating through extensive menus.
Pre-selection + Slide in panel to edit Method of Payment Selection
Slide in panel for edit of method of payment selection allows users who do not frequently edit their method of payment to move seamlessly throughout a banking payment journeys. In order to change account selection, users click the link to “select a new account” triggering a slide in panel that shows all eligible accounts for the method of payment selection.
User Research
Let’s test it out…
This study was intended to understand customers mental models for payments and inform the design and development of SafePay CxO reusable component across all banking payment journeys.
How did users react?
“ I naturally think of credit card payments as a single step. The single step is how much you're paying. Then for transfers, it's making sure you're choosing the correct to and from, which it sounds silly, but it can be easy to mix up. You can mix up the to and the from or which account you're putting money into. There's been times when I transfer to the wrong account and have to either cancel or it's not cancellable. So, I like being able to choose with more real estate for account selection during transfers.”
-Jake C
Payment mental models vary across journeys with transfers viewed as being more complex.
Participants described making few active decisions for Zelle and Pay Chase Card as they rarely changed payment methods. However, for Transfers, additional complexity exists as users actively choose ‘transfer from’ and ‘transfer to’ accounts each time. Due to this complexity, participants were open too full page concept to help reduce errors posed by this complexity.
Customers weigh balance and amount, preferring concepts with those on the same page.
For Zelle and Pay Chase Card, participants described weighing the amount alongside the account balance to ensure sufficient funds. Because deciding the amount is the core active decision, they gravitated towards the drop-down concept to reduce steps, keep inputs on the same page, and present account balance alongside the amount.
“ Creating a separate list page is helpful because it avoids you going on autopilot and doing things mindlessly without thinking about it. For payments where I am constantly using the same account, like Pay Chase Card, a drop down with the same account I always use makes sense. When I’m trying to be more thoughtful about my payment, I want to slow down to reduce the risk of making a mistake and sending money to the wrong account.
-Edgar S
Key Questions Include :
Which elements of the SafePay CxO design concept best support users in completing payments? Why?
What is the payment decision-making hierarchy for the banking payment flows (Zelle, Transfers, Pay Chase Card)?
What is the ideal balance between showing all payment methods versus having click to display?
What is the impact of splitting SafePay onto its own page, separate from a journey’s other decision making inputs?
Key Insights
Logos, visual feedback, and limiting steps helps to reduce the cognitive load of payments.
Across concepts, participants called out elements that reduce cognitive load. The drop-down offers visual feedback upon account selection, reducing noise by hiding other accounts. It also minimizes the number of steps, reducing the number of mental reviews required before hitting “Next”. Lastly, logos were seen as both aesthetic and functional, helping distinguish between payment methods especially if switching tabs too check the balance of external DDAs.
Journeys differ based on available MOPs and decision complexity, requiring a more flexible integration structure.
Customer mental models for Zelle, Pay Chase Card, and Transfers presented nuance based on the number of active decisions and the number of types of payment methods present. These factors contributed to varying preferences of the interaction patterns and displays of SafePay. Our integration structure may need to evolve to accommodate these nuances.
Delivery
Let’s build this!
After analyzing user testing feedback with stakeholders, our team concluded that a one-size-fits-all payment selection does not provide an optimal user experience. Consequently, we designed and implemented both a dropdown and a list component, enabling user journeys to adapt according to the complexity of the payment method and the users' mental models of payment selection in their specific journey flow.
For delivery, our team adhered to the following process:
Collaboration with Product Team: We partnered with product team members to draft comprehensive product requirements.
Requirement Documentation: Epic requirements were created for both happy and unhappy paths of internal and external DDAs based on user and journey-dependent use cases.
Error Evaluation: We examined potential user and technical errors to develop specific requirements for the unhappy path edge cases.
Technical Confirmation: A thorough technical review was conducted to ensure compatibility with existing systems, assess performance needs, and adhere to security protocols. We collaborated closely with developers to ensure the original design intent was preserved.
Compliance and Accessibility: Ensuring our designs were ADA compliant and maintain regulatory statures are an essential part of our delivery process.
ADA: To fulfill compliance and accessibility standards, we created ADA-approved guidelines. These guidelines guarantee that both the dropdown and list elements are accessible to all users, including those with disabilities. Additionally, Headings and Text content (HAT) were provided with instructions for developers to follow during implementation.
LRCC: Once the components became functional and user-friendly, they were submitted for final review by the Legal, Risk Compliance, and Control team (LRCC). This crucial step confirmed that the solution complied with the organization’s standards and goals. Although feedback from LRCC might necessitate additional modifications, our designs ultimately received approval for delivery.