My role

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.

Impact

• 🧩Um padrão único para +15 fluxos
• 🔍3 heurísticas de usabilidade corrigidas
• 🤝Workflow de integração ponta a ponta
• 📐7 componentes documentados e reutilizáveis
• 🚀Guideline pronto 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”.

Problem

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

Estrutura

Components

De telas fragmentadas a um padrão único

Guideline - Documentação e sustentação do projeto

Aprofundamento em variações do componente e seus usos

Lógicas de funcionamento de acordo com valores preenchidos e disponíveis

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.

Outcomes

O projeto Amount Screen padronizou uma tela que cada time reconstruía do seu jeito, trazendo consistência cross entre as verticais de Sellers e Individuals. O guideline é a consequência direta desse trabalho: documenta os padrões, os componentes reutilizáveis e o workflow de integração que sustentam essa padronização em qualquer novo fluxo.

• 2 Grandes verticais unificadas (Sellers & Individuals)
• 7 Componentes documentados de ponta a ponta
• 8 Etapas de workflow com owners definidos

Acessibilidade