Checkout on Steroids
Company
JPMorgan Chase
Role
Design Manager
Responsibilities
LeadershipDesign ExecutionUX Research
In this case study, I’ll walk you through how I led and executed a fast-paced, high-stakes Checkout initiative—showcasing my ability to manage a team, move quickly when needed, and deliver quality work under pressure.
Overview
Mission: Impossible (But Actually Possible)
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.
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:
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.
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
Volume
Objective
Drive adoption of Checkout and Drop-in UI for merchants
Key Results
- Process •••* transactions
- Enable $•••* in TPV through Checkout
- 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
Revenue
Objective
Scale Checkout revenue and increase merchant engagement
Key Results
- Generate $••• * in direct revenue from Checkout
- Enable $••• * in MS-linked acquiring revenue
* Actual numbers are hidden due to confidentiality
Security
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
Customer Experience
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
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.
User Experience
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.
Efficiency & Profitability
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.
Risk & Controls
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.
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.
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!
Checkout on Steroids
Company
JPMorgan Chase
Role
Design Manager
Responsibilities
LeadershipDesign ExecutionUX Research
In this case study, I’ll walk you through how I led and executed a fast-paced, high-stakes Checkout initiative—showcasing my ability to manage a team, move quickly when needed, and deliver quality work under pressure.
Overview
Mission: Impossible (But Actually Possible)
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.
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:
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.
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
Volume
Objective
Drive adoption of Checkout and Drop-in UI for merchants
Key Results
- Process •••* transactions
- Enable $•••* in TPV through Checkout
- 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
Revenue
Objective
Scale Checkout revenue and increase merchant engagement
Key Results
- Generate $••• * in direct revenue from Checkout
- Enable $••• * in MS-linked acquiring revenue
* Actual numbers are hidden due to confidentiality
Security
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
Customer Experience
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
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.
User Experience
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.
Efficiency & Profitability
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.
Risk & Controls
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.
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.
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!
