Craig Graue
UX Architect
Made with

Mastercard Connect

Designing the framework for doing business with Mastercard

Mastercard Connect

The Challenge

Mastercard Connect is a B2B customer portal where banks, merchants, and other partners manage all of the Mastercard products and services they use behind the scenes. Historically, Connect was merely a gateway where users could sign in but were sent to any number of disparate experiences with different tools in the ecosystem.

Our challenge was to create a UI & interaction framework that would not only redesign the gateway into Mastercard's B2B tools, but also begin migrating those tools into the new holistic experience model. Once we had the framework design underway, we worked with many internal product teams to make their tools easier for customers to use while migrating to the new design.

Discover

Mastercard Connect

Customer Advisory Panel

The nice thing about working in the B2B space is that your customers are a fairly contained set of users. Every six months, Mastercard customers were invited to a closed conference of sorts to learn about the latest product innovations and service offerings. From among these attendees, we drafted a panel of heavy Mastercard connect users and customer champions to join us for a co-creation session during the event. The sessions began as active-listening sessions for us to really understand their challenges with using the old system. We also used this time to better understand the different needs of our customers and the various customer employees that used the Connect ecosystem.

Personas

Based on the interviews during the panel workshops, we created many personas. We referred to them throughout the entire framework design process.  Additionally, as we began to migrate individual products into the new Connect ecosystem, we created new personas or evolved existing ones to include any new insights and challenges we found.

We created most of our personas in PowerPoint / Keynote to make them easily shareable with stakeholders and internal partners.  I do not have permission to share the actual personas, but here are a few examples of the people we focused our efforts on:

  • Administrative banking users: responsible for managing user access and product catalogs for the entire enterprise
  • Tactical banking users: focused on only using specific tools in the ecosystem to support their specific job roles (issuing cards, settling funds, etc.)
  • Merchant users: their primary focus is on accepting credit cards and making sure they are receiving their funds properly

Define

Mastercard Connect

User Journeys

Each of our initial personas presented us with many different journeys they might take within the ecosystem.  However, the one journey that every user has in common is signing up as a new user or an entirely new businesses within Connect.

Prior to the redesign, users and businesses could only sign up using very long paper forms that had to be faxed or mailed to the appropriate parties.  A customer could only obtain these forms by calling our support center.  Obviously, this process took quite a bit of time before they could even begin using Mastercard's systems. 

We created journey maps in Omnigraffle to show the steps users took in order to sign up.  After collaborating with many internal groups such as franchise, security, and operations, we created a future-state journey map that would allow users to fully sign up within 24-48 hours. 


Design

Mastercard Connect

Sketches

I typically begin any design work with low fidelity sketches.  This almost always begins with pencil & paper in my notebook but many times we were able to sketch along with customers or stakeholders as part of a design sprint workshop. 

In the case of our user sign-up process, we began by distilling several pages of paper forms into a series of screens and form fields to only get the information we absolutely needed up front to get customers signed up.  Rather than send them paper forms with many extra boxes & fields "just in case," we created a dynamic online form system that asked additional questions based on previous answers in the flow.

Prototype & Test

After many rounds of sketching and feedback, we used the Sketch app to mock up the actual screens in the new UI framework.  Since the actual UI framework was designed to be responsive, our Sketch files made it easy to create mobile variants as well.

We uploaded the desktop & mobile flows to Invision to create a clickable prototype.  This made it really easy for our customers & stakeholders to test drive the flows and enter information like they would for a live user registration.  We also used the prototypes to test with our internal groups to make sure we would get all of the right information they needed to complete the user registration behind the scenes. 

Testing our designs with real customers provided invaluable feedback that informed not only the improvement of this particular screen flow, but enhancements to the overall UI framework as well.  With every new product or service that began redesigning and migrating to the Connect ecosystem, the overall experience evolved even further.

Reflection

Working on Mastercard Connect showed me first hand how much I enjoyed working as a UX architect across multiple systems in an ecosystem.  While I was still getting my hands dirty with designing individual screens & interactions for some products I really enjoyed identifying and designing patterns to create a larger framework.


I learned so much about how our different customers and their employees use the various Mastercard systems on a daily basis.  It was stressful for them when they are accounting for millions of dollars in transactions per day in the old system where the experience was clunky and confusing.  In the new Connect framework, they never feel lost or that they've somehow ended up somewhere that they shouldn't be. 

We also built a contextual help framework that allows individual products & services to provide links to specific support documentation based on the page the user is viewing at the time.  We wanted to create an experience where customers felt comfortable doing their daily work, making it easy to do business with Mastercard.