Mastercard Panels and Benchmarking Insights

Driving efficiency through automation

CLIENT

Mastercard

MY ROLE

UX Designer

Persona empathy mapping, customer and user journey mapping, card sorting, wireframing, InVision prototyping, interaction design, visual design

PROJECT SUMMARY

Mastercard Panels is a self-service analytics platform which enables banks to gain insight into consumer behaviour based on data from the Mastercard payments network. It provides a wide range of information – such as drivers for consumers to use a particular card more (e.g. airline miles, retail points, no annual fee, etc.) and detailed profile of high spenders – and use them to strategically win over their competitors’ cardholders.

Mastercard Benchmarking Insights enables Mastercard to conduct surveys among banks in a particular market. On completion of responses, Mastercard produce anonymised reports showing a bank’s performance against industry benchmarks across a number of key performance indicators (KPIs).

Both platforms provide its users the insights necessary for informed decision making and allow them to slice and dice data from KPI down to its various metrics for more granular analyses.

Ripe for digital transformation

As one of the largest card companies in the world, Mastercard hold a vast amount of data on industry and consumer behaviour. Mastercard leverage this data by providing business insights to their clients in the form of tailored reports.

Due to its bespoke nature, reports took several months to complete. It did not help that it was a very manual process of consolidating data from research institutes around the world, creating the report in Excel and PowerPoint, and sending off the PDF by email or posting printed copies to their clients.

Mastercard analysts spent a huge chunk of their time putting the reports together. Time that could have been spent on drawing more insights were spent on building the actual report. In case of errors or updates, they would have to resend the newer version by email. This would end up with both parties sometimes not knowing where the latest version was as they were buried in their inbox.

Mastercard sought a digital transformation, one that would provide efficiency without compromising quality and data integrity. They envisioned a self-service analytics tool integrated with:

dynamic and interactive charts, where clients can drill down on the data
flexible data management with ability to create new KPIs from available metrics
end-to-end survey management – from survey creation, distribution, response submission, and response aggregation
report builder and capability to distribute reports to clients in multiple countries and languages
robust user management module

Mastercard Panels and Benchmarking Insights

From discovery to design to delivery

Data and design workshops were held with the stakeholders in Mastercard’s headquarters in New York and RecommenderX’s office in Dublin. The design workshops included user interviews, empathy mapping, developing personas, affinity mapping, and user journey mapping. Stakeholder participation was crucial as they walked us through their process in detail, helped us understand their requirements, and supplied deep industry knowledge our team would not otherwise have.

The two platforms have different purposes but have some common modules. Panels was the first one to be built. We worked at 2-week sprints which involved brainstorming, design jams, wireframing, and regular meetings with the client.

We tackled the project per module, initially focusing on the more complex ones like the chart builder and report builder. The team thought that by working on the larger modules first, it will be easier to finish the smaller ones subsequently. But it was not as effective as we thought. We couldn’t test the charts with real data earlier because the data ingestion interface was not built yet. We adjusted the product roadmap and brought the data management frontend sprints forward.

With all modules complete, we produced comprehensive clickable prototypes on InVision to gather internal and client feedback. The prototypes demonstrated use cases and wayfinding between the different modules. Mastercard also used these prototypes to perform their own internal user testing, while NTT Data and Butterfly London conducted external testing.

We put into consideration the user tests results in the next round of design iterations.

Getting stakeholders involved in workshops was critical to the success of the project.

Designing a whole visual language

Mastercard’s design guidelines, while comprehensive, contained limited examples of digital use. It focused more on document layout and imagery and none on interfaces of this complexity and density. Using their more general guidelines (colour, typography, iconography, layout), we designed elements – buttons, forms, lists, tables, toolbars, etc. – and all their states as well as larger components like charts and formula builders. Regular meetings were held with Mastercard’s brand team for validation and approval.

All elements and components were compiled in an extensive Sketch library shared between the design team through Abstract. Not only did this ensure consistency in prototypes, it also cut down the time spent on prototyping and prevented the creation of duplicate symbols. And since the two platforms used the same library, it resulted in reduced design and development time for Benchmarking Insights as most of the elements and components were already built in Panels.

A project of this scale is not without its challenges

A change in approach. The backend, frontend, and design teams initially worked on the same modules. There were times when we became each other’s blockers due to unresolved usability or technical issues. The team then reassessed the product backlog and adjusted it so the modules in the design team’s sprints were ahead of the rest. By the time the frontend developers were due to work on those modules, all mockups and specifications were ready.
Overdocumentation. The beauty is not always in the details. The specifications were too detailed to update in an agile setup. Changes were approved by product owners during some meetings where the design team were not involved. To remedy this, I consulted the frontend developers (primary audience for the specs) which documents were most useful to them and kept those ones. And over time, I also learned how to write specs more efficiently, making them more flexible and high level and written to be less prescriptive and more to encourage conversation among teams and stakeholders.
Learning curve. The design team had limited knowledge of the finance industry and needed to understand several concepts required to successfully deliver this project. Workshops were held with the client and our internal data team on metric creation, data resolution, competitive sets, segmentation, and benchmarking logic.

A role of many hats

I was one of two UX and UI designers reporting to the Head of Design. While all of us worked on bits and pieces from all the Panels modules, we were split to different phases of the project. I was the process owner for low to medium fidelity prototyping and detailed specifications, which included:

Documenting workshop outcomes
Creating user flows for each module
Drawing features and functions from the user journeys
Describing usage and behaviours of components

These documents encouraged smooth handover to and reduced back-and-forths with the development team, helped new joiners get up to speed with the projects, and were also used as the basis for the training material content.

We changed approach in Benchmarking Insights since we already established the general look and feel of the system. This resulted in us getting involved in different aspects of the design and have more accountability. We took on modules as a whole and were responsible for the wireframes, visuals and the specs. I was responsible for the whole survey lifecycle as well as data management.

Going digital meant empowering their customers to discover their own insights.

Outcome

The platform significantly reduced the amount of time spent in building the report. As the reports are dynamic, Mastercard analysts can simply use a report template, change the data set with a click of a button, and the charts will update accordingly. They no longer need to create charts in Excel and insert them in PowerPoint. The report builder also has built-in Mastercard palettes to ensure they create reports that are cohesive and consistent with their brand.

With reports being delivered through the platform, it decreased the likelihood of human error e.g. accidentally sending an outdated version of the report or emailing with no attachment. It also made it easy for users to look for certain reports as they are all located in their report library. They no longer have to dig through their email inbox to find them.

Going digital also meant empowering Mastercard customers with the ability to discover their own insights, and not be limited to the standard reports they receive.

Panels launched into production in August 2018 and Benchmarking Insights in December 2018. The success of the first phase led to two more phases to add more features.