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:
Following our research, we analyzed the user journeys and flows of the existing Masterpass registration process:
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:
We tested and iterated the wireframes and developed a visual design for the registration screens:
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.