J.P. Morgan Chase
Checkout on Steroids
Background story
Let me tell you a story to help you better understand my role, impact, and the circumstances I navigated in this project.
When I joined JPMorgan as a Design Manager, my goal was to build a design team to create the JPMorgan Checkout Solution from scratch.
However, shortly after I joined, the company announced a hiring freeze, putting my plans to hire a team of designers on hold. What wasn’t put on hold were the deadlines and expectations for delivering the product.
Hiring Freeze
Hiring Freeze
Hiring Freeze
Hiring Freeze
Hiring Freeze
The “team” of one!
So, I rolled up my sleeves and built a “team” of one—ME! Over the next six months, I single-handedly designed and delivered the MVP for the entire project, which included:
Consumer
Checkout
A consumer-facing checkout, which is what shoppers see when they make a purchase.
Merchant Admin Tool
Commerce Center
A merchant-facing admin tool, where businesses customize the checkout’s look, payment methods, security settings, and access reports—all without needing technical expertise.
White-Label Design System
Chameleon
A flexible and scalable design system that helps merchants match their branding while staying compliant and easy to use.
Building the Team, Driving the Vision
Six months later, the hiring freeze was lifted, and I was finally able to bring on three designers and a researcher. This allowed me to step back into my primary responsibilities: driving design strategy, aligning design with business objectives, and mentoring the team to achieve long-term goals.
I’m not sharing this to toot my own horn but to highlight an important takeaway from this case study—not only my ability to manage and lead a team but also my
capability to deliver under pressure and move fast when necessary.
So, what is Checkout?
Checkout Product is a solution for JPMorgan Chase merchant clients that offers a smooth, secure, and customizable online shopping experience.
It allows customers to easily enter their payment info, which is then processed by JPMorgan’s Merchant Services.
The key benefit?
Checkout helps merchants reduce the hassle of PCI compliance by integrating seamlessly with JPMC’s payment processing, making life easier for everyone involved.
Business OKRs!
From business perspective our newly formed team was challenged with the following OKR’s for MVP
Objective
Drive adoption of Checkout and Drop-in UI for merchants
Key Results
- Process •••* transactions – * Actual numbers are hidden due to confidentiality
- Enable $•••* in TPV through Checkout – * Actual numbers are hidden due to confidentiality
- Achieve 25% adoption of Checkout among Commerce Platform clients
- Onboard ••• clients utilizing Checkout by the end of the year – * Actual numbers are hidden due to confidentiality
Volume
Objective
Scale Checkout revenue and increase merchant engagement
Key Results
- Generate $••• * in direct revenue from Checkout – * Actual numbers are hidden due to confidentiality
- Enable $••• * in MS-linked acquiring revenue – * Actual numbers are hidden due to confidentiality
Revenue
Objective
Enhance flexibility and security of Checkout solutions
Key Results
- Deliver enhanced security controls via Commerce Center
- Integrate with J.P. Morgan’s in-house Merchant Fraud (CMF) solution
- Develop customization features to increase merchant adoption across industries
Security
Objective
Improve Checkout’s usability, accessibility, and customization
Key Results
- Maintain a CSAT score of 4+ (out of 5) for pre- and post-production support
- Achieve WCAG 2.2 AA compliance across all Checkout experiences
- Reach 60%+ competitor MOP (Method of Payment) parity
Customer Experience
Design OKRs!
From a design perspective, I set OKRs to support business goals while ensuring a great user experience, efficient processes, and full compliance. These focused on research-backed solutions, design system adoption, and accessibility, all aligned with broader company objectives.
Objective
Design a seamless, user-friendly checkout experience that enhances client satisfaction.
Key Results
- 100% of design solutions are backed by research or data.
- 100% of design solutions meet experience success criteria and definition of done.
User Experience
Objective
Optimize design processes to maximize efficiency and drive business success.
Key Results
- Achieve 100% adoption of the design system.
- Deliver 100% of features at least one quarter ahead of development.
Efficiency & Profitability
Objective
Maintain robust design and accessibility standards, ensuring compliance and best practices.
Key Results
- 100% of delivered designs meet WCAG 2.2 AA accessibility standards.
- Ensure the compliance team reviews and approves 100% of risk-sensitive deliverables.
Risk & Controls
Design Process!
Design processes are often presented as a rigid, step-by-step framework. In reality, it’s more of a guideline than a rulebook. At J.P. Morgan, we follow a structured but adaptable approach to ensure that our designs are thoughtful, user-centric, and aligned with business needs.
Requirements
We work closely with product to define, refine, and sometimes push back on requirements. The goal is to ensure a clear understanding of the problem and confirm we’re solving the right one.
Testing Assumptions
We validate designs through internal critiques or, when possible, external testing with clients. The method depends on time, project complexity, and available resources.
Research
We choose the best research method based on the project—user interviews, competitive analysis, or desk research—to gather insights and industry best practices.
Design Handoff
Finalizing specs for engineering, covering edge cases, error states, and accessibility. Every detail is annotated to ensure a smooth and accurate implementation.
Design Iterations
An iterative process with multiple rounds of feedback from product and engineers. We refine solutions while considering technical constraints to find the best design approach.
Post-Launch QA
Our work doesn’t end at handoff. We review the live product, collaborate with engineers, and ensure the design is implemented correctly.
The most important rule: Common Sense
Now, here’s where I tell my team something that might sound contradictory: The best design process is just common sense.
Yes, there are frameworks, methodologies, and the famous Double Diamond process. But after 15 years in design, I’ve learned that real-world constraints don’t always allow for a textbook approach. Sometimes, research isn’t necessary. If a project is small, obvious, or time-sensitive, spending weeks on research is just slowing things down. The best designers aren’t the ones who follow process blindly—they’re the ones who know when to adapt, when to move fast, and when to challenge unnecessary steps.
This is why I always emphasize to my team: apply common sense first. It’s the most valuable skill a designer can develop, and when combined with a strong sense of ownership, it leads to the best outcomes. Process is a tool, not a rulebook. The real magic happens when you know how to use it wisely.
What was delivered!
Consumer-Facing Checkout
A best-in-class checkout for seamless, frictionless transactions. Designed for speed and ease, it adapts to any brand while ensuring a smooth, intuitive flow. Optimized for conversion, it follows top UX practices with clear actions and effortless form filling. Built for scale, it supports multiple payment methods, accessibility, and responsive layouts.
Drop-in UI: Embedded Checkout
The consumer-facing checkout is also available as an embedded form, known as Drop-in UI. This flexible solution lets merchants host their own checkout page while seamlessly integrating our secure, PCI-compliant payment form. It ensures a smooth user experience while giving businesses full control over their checkout flow without handling sensitive payment data directly.
Commerce Center: Merchant Tool
A powerful merchant tool that puts full control over checkout customization in one place. From design customization to match brand aesthetics, to flexible payment method selection, merchants can tailor the experience to fit their needs. Security settings ensure compliance and fraud protection, while detailed reports provide insights into transaction performance.
Chameleon: The Design System
Chameleon was designed as a lightweight, white-label, and highly flexible system.
Built for power and adaptability, it enables merchants to create a fully customized UI while maintaining consistency, scalability, and ease of use.
Accessibility: Built-In Compliance
All designs were crafted to be 100% compliant with WCAG standards, incorporating proper color contrast, keyboard navigation, screen reader support, and clear, accessible interactions.
By embedding accessibility into the design process from the start, the experience remains inclusive, seamless, and user-friendly for everyone.
Measured Business Outcomes!
Effort means little if we don’t measure the impact. I believe that design—like any part of the business—must have clear, measurable outcomes to track success and drive improvements. Every decision should be backed by data, ensuring that our work delivers real value and moves the business forward.
Adoption
01. Client Growth
Successfully onboarded ••• * clients to the Checkout platform.
* Actual numbers are hidden due to confidentiality
Customer Experience
02. Full Accessibility Compliance
Achieved 100% WCAG 2.2 AA accessibility compliance across all designs.
Customer Experience
03. Competitive Parity
Reached 60% competitor parity in payment method offerings.
Customer Experience
04. High Customer Satisfaction
Maintained a customer satisfaction score of 4.3 throughout the year.
Customer Experience
05. Customization Features
Developed customization tools to drive greater merchant adoption.
Security & Compliance
06. Enhanced Security
Delivered advanced security controls via Commerce Center to improve fraud prevention and risk management.
Revenue & Growth
07. Direct Revenue Growth
Generated $••• * in direct revenue through Checkout adoption.
* Actual numbers are hidden due to confidentiality
Revenue & Growth
08. Acquiring Revenue Impact
Enabled $••• * in MS-linked acquiring revenue to drive business success.
* Actual numbers are hidden due to confidentiality
Revenue & Growth
09. Enhanced Security
Delivered advanced security controls via Commerce Center to improve fraud prevention and risk management.
The Final Look
A picture is worth a thousand words—so here’s a glimpse into the real, shipped product. These screenshots showcase the final designs in action, highlighting the polish, usability, and attention to detail that went into every screen.
Recognition & Awards
Six months in, the hiring freeze lifted, and I finally built out a team of designers and a researcher, allowing us to move faster and scale our impact. I transitioned back to design management and strategic work, focusing on bigger-picture initiatives.
That same year, I was promoted to Executive Director (ED)—though, let’s be honest, bank titles tend to be a bit overinflated. More importantly, my team was recognized as 🏆 PXD’s Best Team of the Year, a testament to the incredible work we accomplished together.
Thank you for scrolling all the way!
