Mastercard Developers Global Launch

March 2015 - September 2016
As global experience lead, I was tasked with owning the design of the Mastercard Developers platform from concept to launch. I was also responsible for the recruitment and training of a team to build and own this product. I partnered with product and engineering teams to define success criteria, develop product roadmaps, and architect the final product. In addition to hands-on design work, I managed internal teams in New York, Dublin, and Singapore, as well as agency and consulting teams.

View live site

A Ground-up Rebuild

In 2016, Mastercard was undergoing a massive cultural and corporate transformation re-configuring itself from a 50 year old financial services giant into a tech company agile enough to respond to the accelerating rate of change in payments. The Mastercard Developer Zone was initially launched by MasterCard Labs in 2011, but over years of mismanagement had become a clearing house for initiatives that the company didn’t fully understand.

As a primarily B-to-B company with a stable of powerful services, monetized APIs should have been an obvious strategy. However, the product needed a new identity and new shepherding to achieve its potential and gain sponsorship among Mastercard leadership.

Usable Documentation

The primary role of Mastercard Developers is to host Mastercard API documentation and support engineers building with Mastercard services. To better understand this mission we conducted interviews and workshops at Mastercard and partner organizations to build usage models and drive design.

Through our research we defined a common usage pattern for referencing our API content: foraging, consuming, testing, and revising. This pattern resulted in the sidebar navigation, which served double duty as a display and control surface, displaying the hierarchy of the documentation and allowing single-click navigation through the content.

For the “testing” phase, we created in-line sandbox testing of API endpoints. This allowed developers to hit endpoints using supplied or custom data and test how the API would perform once fully implemented.

Rebranding & Landing Experience

We relaunched the product as Mastercard Developers to signal our commitment to our community of developers. As a final touch, we built a landing experience that demonstrated the modular nature of our products and showed that we were tinkers and builders ourselves. The animation renders in-browser using SVGs. We also built a tool for non-developers to create custom animations for new API products coming onto the platform. Follow this link to read more about the animation generator.

Systematic Design Across Teams

When we launched the re-platform project, I started with no team and lots of expectations. I led an agency search to help build the foundation of the new design while building my team. We ultimately partnered with Work & Co and this collaboration laid the groundwork of our design.

As our collaboration with Work & Co transitioned to the team I had recruited, we needed to complete the initial design project and create new workflows to deliver on the product roadmap. To accomplish this, our team trained with the product team to write design user stories directly into the Rally product management system. We also built and maintained a comprehensive UI Kit to quickly build high fidelity mock-ups and prototypes shortening the testing and development cycle.

Results

Mastercard Developers launched in the Fall of 2016. The new platform saw a double digit surge in new registrations, a massive decline in support calls, and accolades from the CEO leading to a feature at the 2016 Money 2020 press conference. Our team secured additional funding and headcount, the product and engineering teams doubled in size over two years.