Minha atuação

UX Designer no time de UX do CCAP (Checkout Capabilities)

Oferecemos experiências e telas padronizadas que podem ser utilizadas em checkouts ou em diferentes fluxos do Mercado Pago.

Impacto

• 🧩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

O que é a Amount Screen?

É a tela em que a pessoa indica um valor em dinheiro, seja para operar (no caso de pagamento de serviços, transferências, etc.) ou para fazer uma configuração (limites, simulação de custos, etc.)

Conhecemos ela como “Calculadora” ou “Tela de inserção de valor”.

Problema

Atualmente cada time do Mercado Pago cria sua própria Amount Screen. Ao relevar as telas produtivas, encontramos inconsistências que colocam em risco a experiência e não cumprem com as heurísticas de usabilidade.

Heurísticas comprometidas:

• ✕Consistência e padrões
• ✕Reconhecer em vez de relembrar
• ✕Flexibilidade e eficiência de uso

Estrutura

Componentes

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

Validação de faixas

O time integrador pode configurar faixas para definir o comportamento de alguns componentes. Dessa forma, por exemplo, é possível fazer a validação inline do valor inserido no amount field.

De acordo com a faixa, é possível definir:

• variantes de wording para o helper, error message, anticipo, algumas ações complementares e atalhos
• quando mostrar o anticipo ou outras ações complementares ou atalhos
• quando habilitar ou desabilitar acionáveis

Também é possível configurar várias faixas para um mesmo componente.

Resultados

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