1. Mastercard Panels: enables banks to understand consumers attitudes and choices about payments and banking products
2. Mastercard Benchmarking Insights enables Mastercard to survey banks in a particular market and produce anonymized and aggregated benchmarked KPIs that address top-of-mind business issues across the payments and banking industry
RecommenderX's design team engaged for over a year in designing two major analysis platforms for Mastercard: Panels and Benchmarking Insights.
Workshops • Personas • User Journeys • Affinity Mapping •
Low and high-fidelity clickable prototypes • user testing
Problem
Much of the working time of several Mastercard analysts was devoted to consolidating a reliable database of survey data from research institutes around the world, and then moving on to comparisons, analysis and insights. In benchmarking scenarios the surveys were also done by this team. With the data in hand, bespoke charts and reports were made and distributed to each client. All these steps involved a lot of legwork using different software and formats.
Brief
Mastercard sought a better balance between wrangling and analysis without compromising data consistency and reliability. The platform needed to have a powerful analytics tool that takes into consideration several business rules, statistical significance tests and compliance with industry regulations.
Reports needed to be built and managed on a scalable basis and distributed to customers in multiple countries and languages through the platform itself.
These reports would be interactive and could be directly manipulated by clients (slice and dice, segments) and would always be kept up to date – a dramatic change when compared to the distribution of static PDFs.
Discovery
No one on the RecommenderX team had ever worked in the financial market or with data analysis of this complexity. We needed to learn more about the business and the problems we were given to solve. But there were also other challenges: changing culture or one's workflow is not simple task. Having direct contact with the Mastercard stakeholders was important not only for us to learn and collect information, but to truly listen, collaborate and make them all part of the project. This would certainly increase our chances of designing the right product but also to get buy-in and reduce resistance to change.
First, workshops were held both at Mastercard HQ in New York and the RecommenderX office in Dublin.
The above findings were translated into the construction of Personas and updates to the requirements list and project scope.
From there, we worked to define and validate the users journeys with the client.
Prototyping
Sketches were turned into wireframes, which became clickable low-fi prototypes in InVision. They were instrumental in gathering internal feedback during meetings, which were held on a regular basis throughout the project.
First user tests
The prototypes were sent to Mastercard for approval, which they submitted to NTT DATA for external testing with their users from different markets.
UI Library and Visual Designs
Once the prototype was approved, the next step was to evolve it into a higher level of fidelity — detailing all screens and states, and using a visual and interactive language that was compatible with Mastercard branding.
It was imperative that we establish and maintain the consistency of all elements and patterns of interaction across dozens of pages and hundreds of states. This has a huge impact on the user experience and how the system is perceived. Consistency meant reduced cognitive load for Mastercard staff who use both the Panels and Benchmarking Insights platforms. On the business side, it represents major savings throughout all stages of design, development, training and maintenance.
For the UI elements, we created an extensive library on Sketch that was shared between the team and both projects through Abstract. It included all buttons, form fields, icons, as well as larger components such as navigation menus and toolbars.
Designed by Pentagram in 2016, the Mastercard brand guidelines are very comprehensive and cover a variety of media and contexts, but were mostly for offline uses or low complexity applications such as landing pages. There were no specifications that matched with such a complex and dense system.
Mastercard Design Guidelines v.1.00 © 2016 Mastercard
Regular meetings were held with the client's branding team to ensure our interfaces were in compliance with the company's brand.
Writing the full specification in Confluence ensured consistency of all interactions and copy and promoted a smooth handover to developers.
The detailed specifications were done by module e.g. Chart Builder. It documented the user journeys, flows, as well as potential features that may be included in future phases.
