Masterpass SDKs for Android and iOS
"It's just 5 or 6 screens"
...with 117 potential customer scenarios.
An image showing how the Masterpass experience sits inside of an app. Click the button, choose your card, return to the merchant to complete the transaction.
A high level view of how Masterpass sits inside of an app, in this case Fandango.

A digital wallet. Never store your cards on merchant servers.

For a year, I was working on the Native Masterpass SDK for iOS and Android platforms.

I was the sole designer for the project that included 3 project managers, 2 product owners, 1 server architecture lead, 6 iOS engineers, 6 Android engineers, and 2 QA engineers.
A decision tree diagram showing the possible experiences a user could end up in.
Through a process of identifying variables and user choices, we developed a user path diagram, and slotted it into the larger Masterpass web-based system.
The authentication fallback framework. From Face ID to Biometrics to PIN to Password.
The three major experience paths are based around whether or not we can identify a visitor.
The use case navigator. A list of use cases, when clicked, show a series of screens and how a user progresses through that use case.
These three experience paths spawned 117 possible usage scenarios over the mobile and web implementations.
A login experience. 3 screens showing the initial login, an OTP, and then the wallet screen.
Our dynamic "Phone or Email" input eliminated a user decision and page refresh seen in the web version of Masterpass.
Account registration screens showing a user choosing their authentication method (biometrics)
We cut registration by 30%, made authentication flexible, and able to detect what's available on your device.
4 screens showing the Masterpass wallet. Card view, expanded card view, PIN authentication, and Adding a Card
Adding a new card during checkout.
An iOS screen and an Android screen side by side, showing that most of the branding remains the same between the two platforms.
Masterpass was available on both Android and iOS platforms, and the apps share a common design language while keeping native interactions.

Design library. Manual merging, the horror!

Design tools have come a long way. I look back on this time in absolute shock that we actually had to do this kind of work.
A diagram showing a multi-step process of manually merging design changes into a master file.
I was part of the design system maintenance sub-team, that would manually merge changes from designers throughout the week, then re-release the DS to the team every Tuesday.
Atomic design elements being rolled up into larger components.
We had an atomic designed system, in Sketch, that had elements nested through multiple layers up to full screen designs.
Screens roll up into use cases.
Screens nested into flows. These were used in the Use Case Navigator that had 117 different scenarios.

Launched. 3 languages in 13 countries.

The Masterpass Native SDKs launched in Q1 of 2018 with support for English, Spanish and French. Working with the team was a pleasure, and I learned a ton about what you can and can't do in the payments space.

It also helped inform how I think about design team processes, the maintenance of the work we create, and how differently people use a tool when it's given to them.

Mastercard

Arrow icon indicating leaving the site.www.mongodb.com
ROLE:
Lead UX Designer
INITIAL PROBLEMS:
• Bloated registration

• Jarring initial interaction

• No support for native apps

More work

MongoDB
I built a team to transform a 7000-page beast of a marketing site.
View Work
Smiota
A platform to receive, transfer, manage, and deliver packages with chain of custody the whole way.
View Work
SOME OF MY PREVIOUS WORK
MongoDB
3.5 years
Mastercard
2.3 years
Xfinity
2 years
Agency Life
2.8 years