Interfaz de estandarización de la Amount Screen, con componentes de campo de valor, switch, conversión, badge y tags

Mercado Pago

Amount Screen: Estandarizando una Pantalla Crítica Utilizada por Múltiples Integradores

Skills UI | Contenido | Gestión de integradores

Mi rol

UX Designer en el equipo de UX de CCAP (Checkout Capabilities)

Ofrecemos experiencias y pantallas estandarizadas que pueden ser utilizadas en checkouts o en diferentes flujos de Mercado Pago.

Impacto

🧩Un patrón único para +15 flujos
🔍3 heurísticas de usabilidad corregidas
🤝Workflow de integración de punta a punta
📐7 componentes documentados y reutilizables
🚀Guideline listo para escalar

¿Qué es la Amount Screen?

Es la pantalla en donde la persona indica un monto de dinero, ya sea para operar (en el caso de pago de servicios, transferencias, etc.) o para hacer una configuración (límites, simulación de costos, etc.)

La conocemos como “Calculadora” o “Pantalla de ingreso de monto”.

Pantalla Pago con QR mostrando el campo Ingresá el monto con el valor $5 completado

Problema

Actualmente cada equipo de Mercado Pago crea su propia Amount Screen. Al relevar las pantallas productivas, encontramos inconsistencias que ponen en riesgo la experiencia y no cumplen con las heurísticas de usabilidad.

Heurísticas comprometidas:

✕Consistencia y estándares
✕Reconocer antes que recordar
✕Flexibilidad y eficiencia de uso

Cuatro pantallas de Amount Screen diferentes usadas en Simular préstamo, reservas, transferencia y agregar valor, evidenciando la falta de estandarización

Estructura

| |

Componentes

De pantallas fragmentadas a un patrón único

Comparación entre el estado vacío y el estado completado de la Amount Screen estandarizada, con el botón Continuar deshabilitado y habilitado

Guideline - Documentación y sustento del proyecto

Profundización en variaciones del componente y sus usos

Documentación de los estados Idle y Error del amount field en sus variaciones: Placeholder o estado 0, Monto pre-cargado o cargado, Helper, Helper Balance, Suffix y Converter, cada una con definiciones y particularidades de uso

Lógicas de funcionamiento de acuerdo a valores completados y disponibles

Validación de rangos

El equipo integrador puede configurar rangos para definir el comportamiento de algunos componentes. De esta forma, por ejemplo, se puede hacer la validación inline del monto ingresado en el amount field.

Según el rango, se puede definir:

variantes de wording para el helper, error message, anticipo, algunas acciones complementarias y atajos
cuándo mostrar el anticipo u otras acciones complementarias o atajos
cuándo habilitar o deshabilitar accionables

También se pueden configurar varios rangos para un mismo componente.

Ejemplo de configuración de rangos de valores (Rango A, B y C) entre un monto mínimo y máximo para operar, con cinco pantallas mostrando diferentes estados de validación

Resultados

El proyecto Amount Screen estandarizó una pantalla que cada equipo reconstruía a su manera, trayendo consistencia cross entre las verticales de Sellers e Individuals. El guideline es la consecuencia directa de ese trabajo: documenta los patrones, los componentes reutilizables y el workflow de integración que sustentan esa estandarización en cualquier nuevo flujo.

2 Grandes verticales unificadas (Sellers & Individuals)
7 Componentes documentados de punta a punta
8 Etapas de workflow con owners definidos

Accesibilidad

Acceso restringido

Amount Screen: Estandarizando una Pantalla Crítica Utilizada por Múltiples Integradores

Validación de rangos