Masterpass

Masterpass is Mastercard’s digital wallet product. Users can store their credit cards and shipping information in their Masterpass wallet, and then when making a purchase from a merchant that accepts Masterpass payments, the user does not need to enter their credit/shipping information on the merchant’s website, thus speeding up the checkout process. One of the issues facing Masterpass was a difficult user registration process. The existing Masterpass registration process took 15 steps for the user to complete. Our user experience team designed and implemented a new streamlined registration process that only takes 3-5 steps and makes for a better experience.

Masterpass is a complicated product because banks can implement their own Masterpass wallet. For instance, Citibank has a Citi Masterpass wallet. When a user registers for Masterpass, Mastercard needs to know which bank the user is affiliated with so that we can direct the user to register for the correct wallet. This makes the registration process complex and difficult. Based on research and indirect observation using web analytics, we found that the existing Masterpass registration process failed to provide a good registration experience:

Old Masterpass Registration Sign In Old Masterpass Registration Wallet Selector Old Masterpass Registration Old Masterpass Checkout

Following our research, we analyzed the user journeys and flows of the existing Masterpass registration process:

Masterpass Registration Flow

Once we understood each of the journeys that a user could take through the Masterpass registration process, we began sketching and wireframing new screens and flows:

Masterpass Registration Wireframe Masterpass Registration Wireframe

We tested and iterated the wireframes and developed a visual design for the registration screens:

Masterpass New Registration Visual Design Masterpass New Registration Visual Design Masterpass New Registration Visual Design

Using the visual design we created, I built a responsive high-fidelity prototype of the new Masterpass registration experience. The Masterpass application is built using the Angular Javascript framework and the Bootstrap CSS library. I also used Angular and Bootstrap to build the high-fidelity prototype for the new Masterpass registration flow. By using the same technologies as used in the Masterpass application, the high-fidelity prototype I built could be handed-off to the development team and they could reuse some of the code from the prototype:

New Masterpass Registration Welcome Page New Masterpass Registration Registration Page New Masterpass Registration Mobile

The prototype was used to conduct user testing and was updated based on the feedback from the testing. The new registration flow was implemented in production.

View The Prototype

 

View The Live App