Mercado Pago

Amount Screen: Standardizing a Critical Screen Used by Multiple Integrators

Skills UI | Content | Integrator management

Amount Screen standardization interface, with amount field, switch, conversion, badge, and tag components

My role

UX Designer on the CCAP (Checkout Capabilities) UX team

We offer standardized experiences and screens that can be used in checkouts or across different flows of Mercado Pago.

Impact

What is the Amount Screen?

It’s the screen where a person enters a monetary amount, whether to complete an operation (like paying for services, transfers, etc.) or to set up a configuration (limits, cost simulations, etc.)

We call it the “Calculator” or the “Amount entry screen.”

Pago con QR screen showing the Ingresá el monto field filled in with the value $5

Problem

Right now, every Mercado Pago team builds its own Amount Screen. When we audited the screens in production, we found inconsistencies that put the experience at risk and didn’t meet usability heuristics.

Heuristics at stake:

Four different Amount Screen variants used in Simulate loan, Bookings, Transfer, and Add value, showing the lack of standardization

Structure

| |
Anatomical diagram of the Amount Screen (minimal structure) showing the NAV, TAREA, MONTO/HELPER, CTA, and TECLADO blocks, with reading and interaction questions tied to each block

Components

Grid of reusable Amount Screen components: flow header, title text, feedback label, tags, screen task, action, reason field, category selector, helper text, financiera, switch, CTA, and numeric keypad

From fragmented screens to a single standard

Comparison between the empty and filled states of the standardized Amount Screen, with the Continue button disabled and enabled

Guideline - Documentation and ongoing support for the project

A closer look at the component’s variations and uses

Documentation of the Idle and Error states of the amount field across its variations: Placeholder or state 0, Pre-filled or filled amount, Helper, Helper Balance, Suffix, and Converter, each with definitions and usage particularities

Logic based on filled-in and available values

Range validation

The integrating team can configure ranges to define how certain components behave. This makes it possible, for example, to run inline validation on the amount entered in the amount field.

Depending on the range, you can define:

  • wording variants for the helper, error message, anticipo, and some complementary actions or shortcuts
  • when to show the anticipo or other complementary actions or shortcuts
  • when to enable or disable actionable elements

Multiple ranges can also be configured for the same component.

Example configuration of value ranges (Range A, B, and C) between a minimum and maximum amount to operate, with five screens showing different validation states

Outcomes

The Amount Screen project standardized a screen that every team used to rebuild their own way, bringing cross-vertical consistency between Sellers and Individuals. The guideline is the direct result of that work: it documents the patterns, reusable components, and integration workflow that support this standardization in any new flow.

Accessibility

Unpacking accessibility on the Amount Screen project sparked a series of studies together with Meli’s accessibility team, and it gave us a piece of content

→