Matthew BretzFront-End UX Engineer and Designer
matthew.a.bretz@gmail.com
Find me on LinkedIn
Resume (PDF)

Case Study:Mastercard - Mastercard Global Presence Showcase Application

  • Three.js
  • AngularJS
Stack: Three.js | AngularJS
At a Glance:

Designing and Developing a touchscreen experience to engage and inform Mastercard investors.

The Opportunity Space

Mastercard wanted an interactive kiosk application to demonstrate its global reach and impact to investors during its Investor Day showcase at the New York Stock Exchange. To meet this need, we assembled a small ad hoc team to design and produce a 3D application powered by WebGL and AngularJS.

Designing and Developing the 3D Globe Experience

I collaborated with a Visual Designer to create the user experience and visual design for the application, which featured a 3D globe rendered with the Three.js library. Users could interact with the globe by rotating it and selecting map pins representing Mastercard's offices and operations around the world. Selecting a pin would open a content panel with information about that location's impact and role within Mastercard's global network.

I coordinated development of the project by gathering requirements from business stakeholders and worked closely with the project's Lead Developer, assisting with Three.js code and developing and styling the AngularJS partials that composed the application chrome and the content panels corresponding to the map pins on our 3D globe.

Driving Impact

The application was deployed on a touchscreen kiosk with an accompanying video sizzle reel at Mastercard's Investor Day event, where it served as an engaging and informative tool for communicating the company's global presence and impact to investors and stakeholders.