Mastercard Connect

I led the design of reimagining and modernizing how Mastercard Connect users search for contacts and how admins maintain the contacts list. This project will influence the revamp of Connect and be considered as part of the upcoming roadmap.

Team: Jeffrey Shen, Alysa Liu, Jirachaya Kiriruangchai, Andrea Juwono

What is Mastercard Connect

Mastercard Connect (MC) is where Mastercard's customers, like large banks, come to manage their business. A birthright function of MC is My Company Manager (MCM), which allows users to manage everything pertaining to their company, such as Contacts, Portfolio, and Related Companies.

MCM - Contacts Page

Contacts is a feature in MCM and a core feature in Connect that stores all of a company's internal and external contacts. There are view-only users who search for contacts and admin users who are tasked with maintaining the database.

Problem

>50% of user issues in MCM are linked to the Contacts feature. The tedious process of using Contacts has lead to outdated contacts lists and inefficient searching. Contacts' location also raises security concerns, since there could be confidential information in MCM that not every should be able to see.

Solution

Relocating the Contacts page using the new navigation pattern and moving it out of MCM to remove security concerns. We also redesigned the table for a more elevated feel that is consistent with the rest of the platform, combined scattered filter and search features for a better search experience, and streamlined contacts editing.

Feature 1

Easily access Contacts without security concerns

Feature 2

Easily organize and understand the Contacts list and individual contacts

Feature 3

Straightforward one-step adding, editing, and assigning contacts

How did we get here?

We were initially given the task of redesigning the information architecture to better integrate MCM into Connect. However, our research said otherwise. The problem wasn't in MCM, but more specifically in Contacts.

Research Insights

01 Managing contacts is a laborious and cumbersome process

Users have to go through several screens and permissions just to assign, edit, or reassign contacts.

02 Users want to be more confident that they are searching for the right person

The current search and filter features are scattered. The rigidness of the table also makes it hard for users to be intentional with how they organize information.

03 Inconsistent experience due to outdated design and navigation

MC has dozens of features, some of them older and some of them newer. Contacts is an older feature that has an outdated design, which leads to an inconsistent experience, both visually and functionally.

04 Security concerns due to confidential information in MCM

Confidential information could exist in the portfolio tab and the related companies tab. Since every user has access to Contacts, they would subsequently have access to those other tabs, which raises security concerns.

Affinity map of research insights

Challenge

We need to make updating and managing contacts easier so contact admins are actually willing to go in and fix things and keep the contacts list up-to-date for the convenience of their own company as well as externally cooperating companies.

We also need to make search more flexible, clear, and efficient for view-only users. They need to be able to search in ways that make sense to them, provide enough context so they clearly understand the contacts they’re searching, and be able to complete these search tasks efficiently.

Success Metrics

Minimize the number of clicks and pages a user needs to go through to navigate to the Contacts page.

Reduce the amount of time it takes for a user to find the contact information they need

Reduce the amount of time it takes to update contacts

Goal

How might we make navigation to MCM more secure, make search more flexible and faster, and make updating Contacts list less tedious?

Final Designs

More accessible Contacts page with a customizable table for easier contacts search and organization

Navigation

More efficient and secure navigation

We relocated Contacts using the new navigation pattern. This allows users to easily access it directly from the navigation, and removes any security concerns by removing it from MCM, and instead as its own standalone application within Connect. To better delineate the different Contacts lists and types, we've also added them into the navigation to help users kickstart their search in the right place.

Contacts Table

Users choose how and what they want to see in their table

The redesigned contacts table provides more flexibility for users to customize them. In addition to choosing the columns they want to see, they can also move columns around to their own needs

Choose columns

Move columns

Filters

A unified filter for each group of contacts

We’ve consolidated the scattered and confusing filters to create more specific filters so users can conduct a better search. All filter options are in one place and users can now filter by more varied and focused options specific to internal and external contacts

External Contacts Filter

Internal Contacts Filter

Contact Types

Easily understand the different contact types in MC

There are over 100+ different contact types that exist in Mastercard Connect. Due to the sheer amount of types, and because they originally already had an option to view all contact types, we made it into its own page so users can easily look through and search for what they need.

Outcomes

We presented our solutions to senior leadership and cross-functional partners to advocate for the implementation. Since Mastercard already has plans to revamp the design of Connect, this project would be relatively low engineering lift, thus easy to implement is the team decides to do so.

Going forward we hope to do more user testing in order to understand whether the solutions we created are truly useful and whether there are edge cases we forgot to consider.

Takeaways

Our team realized the real problem, which deviated from the initial problem given, and gathered all our insights and convinced the Mastercard team to pivot direction. Don’t be afraid to propose a pivot or make a change if you have the evidence for it. Because of our efforts, we were able to better advocate for the users and create a solution that truly caters to their needs.

© Billy Tseng 2023

© Billy Tseng 2023

© Billy Tseng 2023