From 100+ raw metrics to a business coach

Redesigning an enterprise merchant-intelligence platform so small-business owners get decisions, not dashboards.

Methodology transfer

Business acumen

Redesign

Design guidelines

In collaboration with Hyntelo & Mastercard EMEA

At a glance

Product:

Mastercard MMI

Role:

Design Lead
Owner of the method and design direction across CX, UX, and UI

Timeline:

March–June 2023

The context:

A specialized delivery company, engaged by the client, brought in the design team to lead the redesign. They specifically requested a trusted senior Design Lead, supported by a junior designer under his direction.

What I owned:

I directed the method and coordinated every stakeholder group — PMs, external collaborators, the client, and the design team — across CX journeys and use cases, UX concept and architecture, the insights-definition system, the UI concept, the interactive prototype, and weekly cross-party alignment.

Context

Stakeholder alignment

Design Thinking

The starting point of the Enterprise merchant-intelligence platform:
Area Insights for small-business merchants.

The opportunity

The platform exposed enormous value:
100+ merchant performance metrics, but the UX and UI were not engaging or well structured.

The business request

It was time to turn raw metrics into decisions a busy merchant could act on in seconds.

UX/UI assumption

The interface was data-dense and hard to read: no clear hierarchy, no real visual guidance, navigation that overlapped functions.

User assumption

A small-business owner logging in couldn't answer the only question that mattered: am I winning or losing against my competitors, and what should I do next?

The goal

A simple reskin was not the point.
The scope was a full CX UX UI redesign.

Context

Stakeholder alignment

Design Thinking

Mastercard requested a Design Lead to manage the design-thinking framework and own the method, not just the deliverables, by coordinating them and the delivery-company teams around the design direction, process, and deliverable outputs within a feasible roadmap.

The starting point: the method.

Problem framing

Stakeholder alignment

Design Thinking methodology

Co-design

Three main phases were set:
1) Explore, an explorative research,
2) Design, to start ideating and prototyping solutions,
3) Make, to deliver guidelines and support the dev team in realizing the solution following and agile approach.

Each project phase followed a well-defined and time-validated process I had experience on.

Given the challenging roadmap, a co-design approach was chosen to bring all representatives to the same table and make decisions quickly on insights and outputs. Solutions never drifted from business intent, technical constraints, or user needs, accelerating delivery.

Explore:
the research phase.

AS-IS analysis

Competitive benchmarking

UX trend research

Customer journey mapping

The Explore phase ran on three fronts:

  • organization (assets, business model, KPI definition, constraints),

  • context (competitors, trends, benchmarks),

  • and users (interviews and personas, with primary interviews run by the client).

The organization analysis

Business outcome and KPI definition canvas

UX/UI critique

The context analysis

The context - Trends and benchmark research

The user analysis

From interviews conducted in two countries (United Kingdom and Australia):

The users - Insights based on user interviews

"

I have to check too much data and access too many platforms… I can't afford this.

"

I’d like MMI to be a proactive platform, sending me useful insights without having to enter the platform.

"

I miss the actionable part when reading metric results.

What surfaced shaped the entire direction

The user was overwhelmed, not under-informed.

The job was not more data: it was simplified, readable, benchmarked insight.

Decisions die in the gap between metric and action.

Users reported confusion about what to do next.

The market was moving toward conversation and guidance.

Competitive and trend research pointed to conversational, goal-oriented, supportive tools, AI-adjacent experiences that suggest, not just display.

Design phase

Information architecture

Customer journey

User flows

The research converged into a single concept:
a proactive digital coach that helps the merchant focus on what matters, self-evaluate, and act. Not a dashboard, a guide. It rests on four pillars.

  • Conversational: text-based, conversational; attention on the message, not the metric.

  • Unique: insights that feel personal to this business; a customizable, single view.

  • Transparent: the way data is gathered and calculated is always one click away, with sources declared.

  • Immediate & intuitive: one-page navigation, one-click deep-dives, a traffic-light read of good/bad at a glance, distraction-free by default.

These pillars governed every downstream decision:
wireframes, navigation, and architecture all had to pass the coach test.

The first important step was to define and agree on the Customer Journey, clarifying the main user scenario to focus on.

The hard stop

At the start of the customer-journey design phase, the project hit a hard stop: the client wanted direct control over the deliverable formats.

The solution

Welcoming an internal Mastercard designer was a good idea to match the output formats with something familiar to the client.

Starting from the Occasional visitor

The redesign initially focused on the highest-leverage persona, the Occasional visitor, who checks in roughly every six months, and on three use cases that map a real decision journey: My checkup, Understand my competitors & market, and Check a new neighborhood (headroom opportunity).

The project continued

Delivery outputs were reframed, validated with the client-side designer, and accepted. The project restarted without losing the design direction.

Design the solution

Information architecture

Customer journey

User flows

Designing the customer journey, user flows, and navigation patterns for the redesigned MMI platform.

From insights to a consistent design language

It was time to develop low-fi wireframes and pretotypes (not prototypes) to understand the kind of experience, space, and surfaces available to create meaningful moments, instead of well-aligned elements that could be simply scrolled past and easily forgotten.

The core craft contribution was a systematic method for manufacturing insight. Rather than placing metrics on screen, an insights-definition matrix was built to feed three inputs into every piece of content:

  1. Tone of voice: Forward-thinking (open with a question, frame challenges as opportunities), Sophisticated (short, confident phrasing), Inclusive (break dense data into approachable chunks; lead with the human benefit).

  2. Jobs-to-be-Done: the specific decision the merchant is trying to make.

  3. Metrics selection: the right subset of the 100+ metrics, filtered by peers / area / period.

The metrics matrix

The wireframes

By filling the first pretotypes and wireframes with real data, one thing became clear to all teams: the real output to provide users was proto-insights: empathetic, benchmarked, decision-ready statements with a built-in so what. This is what turned a number into coaching.

The design system & UI

The UI was built strictly on the client's brand system, expressed through a consistent component language: card-based layout (separable topics, responsive by nature), traffic-light evaluation, text-led conversational messaging, enlarged counters to support each message, white space to direct focus, and bi-color iconography true to the brand. Signature patterns: expandable cards + a revealable detail panel for the homepage, and a competitor battle-card plus masonry wall with map/heatmap views for the neighborhood-opportunities experience, all honoring the one-click, distraction-free principles.

Iteration & validation

Designs were iterated inside each sprint’s review-and-validation loop. A clickable prototype was prepared for usability testing across two targets (general partners and merchants) to validate navigation and comprehension before development.

Make

Prototype testing succeeded with both stakeholders and beta testers. What followed was the codification of the design system and cross-functional design guidelines — the reference for implementation and for conceiving future metrics without losing experiential coherence. That final chapter happened after the design handover, when the implementation team continued from the documented system.

The project shipped successfully and became a market reality; the guidelines held across subsequent implementations. Later project teams kept the experience coherent with the system that had been defined.

Impact

Design solution

Methodology transfer

Stakeholder validation

By the numbers

100

+

metrics → decision-ready insights

Translation, not decoration: the core value created.

4

UX pillars governing every decision

A principled system, not one-off screens.

32

Design guidelines

Delivered for cross-functional integrations.