To provide a seamless purchase experience for users, MasterPass is a modal transaction environment that appears over a site’s shopping cart instead of redirecting the user to a separate page, as PayPal does. This eliminates the disruption and attendant drop-off risk inherent in a redirect. The sign-up process is logically laid out to keep the user engaged until they finish creating an account.
To design a universal payment platform and digital wallet that brings together a user’s payment cards, shipping addresses, and loyalty accounts, wrapped in an interface that can also support other digital wallets, all without taking the user away from the purchase experience (c.f. PayPal), and an initial sign-up with a low drop-off rate.
The prototyping software, Axure, is notoriously difficult to work with and I am proud that I was able to make the program do things it was not meant to do, since it allowed us to give test users greater latitude and less oversight during testing.
Complex modal overlays
The MasterPass web app involves a complex assortment of functions that take place within a single modal window. In order to simulate this in Axure, which does not natively support such sophisticated objects, I had to employ a number of tricks. The end result appeared to the test users as a seamless experience.
Signing up for a MasterPass is an involved process because of the volume of information required. The challenge was separating it into a manageable number of steps which each feel lightweight on their own, and communicating brisk progress. We created a five-step sequence. Throughout the design process, we had to balance good usability with the specific branding requirements of the client.
This screenshot shows the fully-functional password validation system, which allowed test users to create their own passwords rather than requiring a script.
Axure has no support for animation per se. Using a hack, I was able to simulate animate icons which serve an important purpose during processes that entail waits.
The MasterPass application is able to detect a user’s credit card provider after the first six digits are entered. Using Axure’s substring functions as well as some more trickery, I was able to create a foolproof card number detection system to simulate the real thing and could accommodate any card type available.
This page also includes a drop down that populates with user-generated information. Dynamic drop downs are not a feature of Axure and this was entirely created from scratch using elaborate code.
Live, dynamic content
The card carousel was perhaps the crown jewel of this prototype. When a user adds their card, it shows up in this carousel slider with the appropriate background type for their card provider. The dynamic font color is – you guessed it – not a native Axure function, and required extensive coding to build.
While carousels are no longer a well-accepted UI paradigm, they represented a feat of Axure hacking. All carousel sliders in the MasterPass prototype are capable of storing up to 18 items.
All throughout the MasterPass prototype, user-defined data is used and reused. The app remembers passwords required for access to the user’s account and in this screen shot, the security message the user picks upon sign-up is displayed prominently as it would be in the finished application.