Mastercard Developers

Mastercard Developers is a website that gives software developers access to APIs available from Mastercard. These APIs can be integrated into software applications and give access to Mastercard data and functionality. Our user experience team was tasked with re-designing the existing Mastercard Developers website.

Screenshots of the old Mastercard Developers website:

Mastercard Developers Old Homepage Old Mastercard Developers Registration Old Mastercard Developers API Grid Old Mastercard Developers Showcase

  • Our team started the project with user research by conducting surveys and interviews with developers. Based on our research we found several key takeaways regarding the existing website, including issues with the information architecture, code samples, registration, documentation, and access.

Old Mastercard Developers Bad Navigation Old Mastercard Developers Bad Code Samples Old Mastercard Developers Bad Registration Old Mastercard Developers Bad Documentation Old Mastercard Developers Bad Explanation

As part of our research, we also mapped the current user journey:

Mastercard Developers User Journey

Using this research, our team began creating wireframes of our proposed experience:

Mastercard Developers Wireframe 1 Mastercard Developers Wireframe 2 Mastercard Developers Wireframe 3 Mastercard Developers Wireframe 4

We performed testing throughout this process, and iterated the designs. We eventually created a visual language for the new website that reflects Mastercard’s brand while suiting the needs of the Mastercard Developers user interface.

Mastercard Developers Styleguide

The final development of the Mastercard Developers website was going to utilize the Javascript framework React, so I built a high-fidelity prototype of the new Mastercard Developers website using the React framework. By using React to build the prototype, the development team building the website could reuse some of the code I integrated into the high-fidelity prototype. I built the prototype working from the wireframes and visual design we created:

Mastercard Developers Prototype Homepage Mastercard Developers Prototype API Grid Mastercard Developers Prototype API Detail Mastercard Developers Prototype API Documentation


We used the high-fidelity prototype that I built using React to conduct concept and usability testing. We iterated the prototype based on the feedback from the testing, and passed the prototype off to the development team to build.


Current screen samples:

Mastercard Developers Homepage Current Mastercard Developers API Grid Current

Mastercard Developers API Documentation Current