Aaron Mayor

| Mastercard Checkout Services

Launching B2B2C products consistenly with our implementation partners

We're not re-inventing the wheel when it comes to online checkout ecosystems, but we are looking to build a scalable, consistent checkout experience that can flex across different checkout ecosystems.

Project Overview

Introduction

Mastercard Checkout Services delivers a suite of products that enhance the online payment experience by making it more secure, seamless, and efficient for payment service providers, retailers, and the customers they serve globally.

Key offerings include tokenization, guest checkout solutions, installment payment options, and other tools aimed at reducing fraud and minimizing friction throughout the checkout experience.

Challenges

As we looked to expand our footprint around the globe, several strategic questions came up:

❓

How might we address the differing needs of payment service providers and online retailers, given that they are distinct in operations and priorities?

❓❓

What strategies will help us scale product adoption while ensuring our partners deliver a consistent and high-quality experience for card-paying customers?

❓❓❓

In a market crowded with established players like Apple Pay, PayPal, and Klarna, how do we differentiate our solutions to sway card-paying customers to use our services?

Outcome

We provided white-glove design service to support our business partners in delivering a consistent and high-quality user experience when implementing our products. These services included:

📦 📐

Provided guidelines and packaged design assets to help partners implement our products smoothly and to our gold standard

⚙️⬆️

Web components that automatically update to deliver the latest iterations of our product experience

🤝💬

Co-creation workshops with our business partners to showcase value and build a working relationship

My Role

As one of four Product Designers on the team, my responsibilities included:

Conducted usability tests, A/B studies, and user interviews to assess UI and content comprehension; synthesized findings to guide product decisions and to showcase the rationale behind our thought process to internal and external partners
Created Figma toolkits, microsites, and documentation to support account teams in showcasing products to clients
Collaborated with developers to build reusable web components, streamlining product implementation; Collaborated with the QA team to establish a design QA process, reducing defects in production by 80% while increasing efficiency across design & dev teams.
Designed and presented high-fidelity screens and prototypes illustrating user flows for customer integration into their checkout experiences
Updated our 3-library design system: UI components, content strings, and screen types used by our design & dev teams

As one of four Product Designers on the team, my responsibilities included:

Conducted usability tests, A/B studies, and user interviews to assess UI and content comprehension; synthesized findings to guide product decisions and to showcase the rationale behind our thought process to internal and external partners
Created Figma toolkits, microsites, and documentation to support account teams in showcasing products to clients
Collaborated with developers to build reusable web components, streamlining product implementation; Collaborated with the QA team to establish a design QA process, reducing defects in production by 80% while increasing efficiency across design & dev teams.
Designed and presented high-fidelity screens and prototypes illustrating user flows for customer integration into their checkout experiences
Updated our 3-library design system: UI components, content strings, and screen types used by our design & dev teams

Customer Experience (CX) Guides 📦 📐

"Consistent guidance, predictable outcomes"

Our B2B2C products are deployed through partner implementations, where the intended UX is sometimes lost in translation.

To ensure consistency, accessibility, and clarity of our products, we created CX Guides that aligned partners around design principles, patterns, and user expectations.

These guides made go-to market easier than ever for our partners when implementing our products into their ecosystem. Below is a high-level view of what a CX Guide for our Click to Pay (C2P) offering:

Brand Presentment

Creating trust starts with consistent branding across the checkout journey. Our branding recommendations include proper usage of iconography, placement, and content labels. This branding lives on:

Payment Labels
Card Loader
Card List
Product Education

Creating trust starts with consistent branding across the checkout journey. Our branding recommendations include proper usage of iconography, placement, and content labels. This branding lives on:

Payment Labels
Card Loader
Card List
Product Education

My contributions:

While the iconography was co-designed with members of EMVCo, I created the design assets for handoff to development teams

My contributions:

While the iconography was co-designed with members of EMVCo, I created the design assets for handoff to development teams

Use Cases

Click to Pay is a comprehensive, user-friendly checkout solution designed for various use cases. We included detailed flows with annotations, design guidance and technical implementation notes for all scenarios. The scenarios range from the most common primary ones to error states and rare edge cases.

First time user
Recognized user
Recognized by IDLookup

Click to Pay is a comprehensive, user-friendly checkout solution designed for various use cases. We included detailed flows with annotations, design guidance and technical implementation notes for all scenarios. The scenarios range from the most common primary ones to error states and rare edge cases.

First time user
Recognized user
Recognized by IDLookup

My contributions:

I, along with a UX Researcher, ran usability and moderated tests to find what users were wanting or missing when shopping online
I created the Figma prototypes to demonstrate how C2P would feel in a typical checkout environment

My contributions:

I, along with a UX Researcher, ran usability and moderated tests to find what users were wanting or missing when shopping online
I created the Figma prototypes to demonstrate how C2P would feel in a typical checkout environment

CX Patterns

With established CX patterns ready to reference, not only will we be able to ensure a consistent experience but we can showcase the rationale of our patterns in case there are concerns of why we approach

Data disclosure (PII)
Payment label
Card loader
One-time passcode (OTP)

With established CX patterns ready to reference, not only will we be able to ensure a consistent experience but we can showcase the rationale of our patterns in case there are concerns of why we approach

Data disclosure (PII)
Payment label
Card loader
One-time passcode (OTP)

My contributions:

I created a Figma file prototypes to showcase each individual CX
Worked with a content designer and legal team to address any liability concerns

My contributions:

I created a Figma file prototypes to showcase each individual CX
Worked with a content designer and legal team to address any liability concerns

Moments that Matter

Here we highlight key touch points that are essential for an optimal experience and to minimize drop-off rates.

Identify a user
Check for linked cards
Display linked cards

Here we highlight key touch points that are essential for an optimal experience and to minimize drop-off rates.

Identify a user
Check for linked cards
Display linked cards

My contributions:

Added annotations to the design assets to help explain what each component does from the perspective of a user

My contributions:

Added annotations to the design assets to help explain what each component does from the perspective of a user

Resources

Any of our design assets, technical documentation, other resources are provided if our partners want to do a deeper dive on how to implement Click to Pay

My contributions:

Worked with our technical teams to gather their resources to be used in this CX Guide

My contributions:

Worked with our technical teams to gather their resources to be used in this CX Guide

Impact of Customer Experience Guides 👍

Impact of CX Guides 👍

Before our partners would go to market with our products, we would review their implementation in a staging environment and note any discrepancies from the original design.

Now that the CX guides available, there are fewer revisions and rework meaning less development time, less back and forth, and a quicker go live date.

Lessons Learned 📝

Having a source of truth that is continually evolving is essential when securing buy-in from internal stakeholders, development teams, legal teams, and external partners.

These CX guides preserves all the rationale behind our designs and is vetted and approved by leadership of our cross-functional teams.

Co-creation Workshops 🤝💬

"Collaboration is necessary because no single person sees the whole problem"

While showing what we have to offer in a concise, digestible manner helps with getting our foot in the door. It doesn't quite always get us to the finish line of closing the deal.

Any questions or concerns that our potential partners may have, we can address directly during our co-creation or workshopping sessions.

Here we meet (usually virtually) to discuss how a partnership can be beneficial for them from a both a business and user standpoint. Below is how we collaborate to see how Click to Pay can be implemented without disrupting their internal ecosystems or their users' experiences.

High-fidelity Mockups

Our account managers would case out potential partners and request for a designer to create high-fidelity mockups that would include Click to Pay or our other offerings in their existing ecosystem.

These mockups were created with an ideal environment in mind because we wanted to open the conversation with what a successful partnership looks like.

My contributions:

I created mockups in Figma using our design system and any design resources that the account manager was able to gather. But it was not uncommon for me to grab screenshots from their checkout experience to create these mockups.

My contributions:

I created mockups in Figma using our design system and any design resources that the account manager was able to gather. But it was not uncommon for me to grab screenshots from their checkout experience to create these mockups.

Co-creation and Workshop Sessions

After the potential partners review our CX guides and high-fidelity mockups, our account managers would get us all at the table to see how we can move forward with this partnership.

Design, as well as, folks from product, dev, and account would be on the call to talk thru any questions, concerns, or tradeoffs.

My contributions:

During the call with the team and potential partner, I would drive the initial conversation sharing the research that backed our design choices at key moments.
Share other partners where we have implemented our checkout services, while the team discusses how this partnership can be mutually beneficial.

My contributions:

During the call with the team and potential partner, I would drive the initial conversation sharing the research that backed our design choices at key moments.
Share other partners where we have implemented our checkout services, while the team discusses how this partnership can be mutually beneficial.

Provide Resources

If the partnership continues, the design team would package up more documentation and case studies that the partner take back to their teams for review.

Provide Resources

If the partnership continues, the design team would package up more documentation and case studies that the partner take back to their teams for review.

My contributions:

Worked with the development team to create documentation for the technical aspects of our offerings. This documentation would live as a microsite, sometimes as a Figma file or PowerPoint.
Share out the Figma file and prototype of the mockups we created. Any notes gathered during the initial call would be summarized right there on the Figma file.

My contributions:

Worked with the development team to create documentation for the technical aspects of our offerings. This documentation would live as a microsite, sometimes as a Figma file or PowerPoint.
Share out the Figma file and prototype of the mockups we created. Any notes gathered during the initial call would be summarized right there on the Figma file.

Impact of Co-creation sessions 👍

The main value of these sessions is that it created a working relationship that would serve us long term even if our current offerings didn't meet what they were looking for.

From a design standpoint, we also got some critical feedback not just on the products itself but how we can better package and socialize what we offer.

Lessons Learned 📝

Everyone has different motivations, different agendas, and has their own perspective on how to develop a beneficial partnership.

Even if we ultimately want the same thing, we are all juggling different priorities and tradeoffs need to be negotiated. Bending but not breaking on our design standards is something I've learn to navigate in these situations.

Web components ⚙️⬆️

"Consistency is not an accident"

Once our partners are onboard and ready to implement we have web components readily available for their use or just to reference. These web components were created in collaboration with our development teams, tested by our QA team, and piloted with trusted partners.

Here's how I, and the design team, played a role within our cross-functional teams to deliver scalable, flexible web components that simplified partner integration without compromising the design standards we've set and that our users expect.

Planning with the development team

A weekly meeting with the development team where we could all get on the same page on what's needed from each other to bring our designs to life.

Share any new updates coming from product or legal that may impact any of our current or upcoming work
Discuss user research, design iterations and technical feasibility
Plan out timelines for design and dev workstreams

There were also ad hoc working sessions with the assigned developer if they needed more clarification on the design or expected behavior of the web component.

A weekly meeting with the development team where we could all get on the same page on what's needed from each other to bring our designs to life.

Share any new updates coming from product or legal that may impact any of our current or upcoming work
Discuss user research, design iterations and technical feasibility
Plan out timelines for design and dev workstreams

There were also ad hoc working sessions with the assigned developer if they needed more clarification on the design or expected behavior of the web component.

My Contribution:

Any new component needed or update to an existing component, I would liaise with the development team about what design and product were looking to do.
I would estimate the time and level of effort from a design standpoint and work in this new task into sprint planning
Set the cadence of our check-ins and working sessions to ensure that we keep moving towards the same goal

My Contribution:

Any new component needed or update to an existing component, I would liaise with the development team about what design and product were looking to do.
I would estimate the time and level of effort from a design standpoint and work in this new task into sprint planning
Set the cadence of our check-ins and working sessions to ensure that we keep moving towards the same goal

Design Phase

After reviewing the requirements and criteria from product, dev, and any user insights, the web components go into a design phase that usually takes 1-2 sprints worth of time.

Here we reference any existing designs or research that we can leverage to this new web component.
May propose to extend the effort so that we can conduct usability testing
Keeping both product and dev teams looped in on components in this stage of the workflow

After reviewing the requirements and criteria from product, dev, and any user insights, the web components go into a design phase that usually takes 1-2 sprints worth of time.

Here we reference any existing designs or research that we can leverage to this new web component.
May propose to extend the effort so that we can conduct usability testing
Keeping both product and dev teams looped in on components in this stage of the workflow

My Contribution:

Design iterations; Getting early feedback from team members that are already aware of the context for
Designing variations for responsiveness and any different states of the web component
Making sure the designs are following WCAG AA standards
Review and critique with the larger design team
Design annotations including specs for UI, expected behaviors, and technical requirements that come from the dev team

My Contribution:

Design iterations; Getting early feedback from team members that are already aware of the context for
Designing variations for responsiveness and any different states of the web component
Making sure the designs are following WCAG AA standards
Review and critique with the larger design team
Design annotations including specs for UI, expected behaviors, and technical requirements that come from the dev team

Design Annotations

Once designs have been finalized with design, product, dev, legal, we annotated the web component's expected behavior, UI styling, any tidbit of information when developing or testing the component

My Contribution:

I created the Figma file and prototypes for the web components that I spearheaded

My Contribution:

I created the Figma file and prototypes for the web components that I spearheaded

Design QA

Once the development team has a web component ready for production, we first run a QA exercise to make sure nothing got lost in translation from the finalized design.

Visual QA to make sure the component looks as expected
Functional QA to make sure the component behaves as expected Payment label

Once the development team has a web component ready for production, we first run a QA exercise to make sure nothing got lost in translation from the finalized design.

Visual QA to make sure the component looks as expected
Functional QA to make sure the component behaves as expected Payment label

My Contribution:

Performed the Design QA tasks for any web components that were waiting for the greenlight before pushing the components to prod
I created a Design QA checklist template to streamline the task that other designers and developers can use

My Contribution:

Performed the Design QA tasks for any web components that were waiting for the greenlight before pushing the components to prod
I created a Design QA checklist template to streamline the task that other designers and developers can use

Handoff and Enablement

Once the new web components are pushed live, it is the design team that creates and socializes any supporting documentation to our partners both internal and external.

Typically, we make this announcement once a quarter with all the new updates to the design of our web components.

Deliverables for this included:

Developer documentation; The design team would format any documentation provided by the development team
Design documentation; Updating the design system with release notes
Prototypes demoing the new component

Once the new web components are pushed live, it is the design team that creates and socializes any supporting documentation to our partners both internal and external.

Typically, we make this announcement once a quarter with all the new updates to the design of our web components.

Deliverables for this included:

Developer documentation; The design team would format any documentation provided by the development team
Design documentation; Updating the design system with release notes
Prototypes demoing the new component

My Contribution:

I created a Figma file prototypes to showcase the new web component and how it integrates seamlessly into existing flows
Updated the release notes in our Design System and socialized that to larger team

My Contribution:

I created a Figma file prototypes to showcase the new web component and how it integrates seamlessly into existing flows
Updated the release notes in our Design System and socialized that to larger team

Impact of Web Components 👍

Less design and development time since we were all aware of any shifting priorities coming from us or product or legal. No wasted effort in something that was not going to be pushed to production anyway.

External partners found the value of web components essential when agreeing to use our products since it takes the burden away from them to make the updates and they can continue to focus on their core business.

Lessons Learned 📝

Having a workflow that includes all of the involved parties makes working smooth, albeit a bit slower than I would have liked.

Slow is smooth, smooth is fast.

Fewer miscommunications, more flexibility, and fewer mistakes make up for all the hoops we have to jump through.

Impact and Lessons Learned 🎉

"Focus on the process, and the outcome will take care of itself."

Impact and Lessons
Learned 🎉

Impact and Lessons Learned 🎉

"Focus on the process, and the outcome will take care of itself."

The Customer Experience Guides, Co-creation workshops, and the Web Components solve a critical challenge:

how do we scale a consistently across dozens of partner implementations without being in every integration meeting?

The Customer Experience Guides provides the blueprint, the Web Components deliver plug-and-play consistency, and the Co-creation Workshops align teams on the vision. This combination ensures our product works beautifully in any ecosystem.

My lessons learned from this experience

Everyone speaks a different language. Designers speak design, dev speaks dev, product speaks product, business speaks business. For effective collaboration I've learned to figure out what language to speak to get all these moving parts going in the same direction.

I now go into each meeting prepared with what I want to get across and how to frame my thoughts to the appropriate audience so nothing gets lost in translation.

My lessons learned from this experience

Thanks for coming by! 👋 😊

Resume

Made with ☕️

Thanks for coming by! 👋 😊

Resume

Made with ☕️

Thanks for coming by! 👋 😊

Resume

Made with ☕️