Levando transferências, chaves Pix e acompanhamento de devoluções para o Mercado Pago no desktop, para quem gerencia sua conta pelo computador.
Estados de página aos quais a Área Pix se adapta
Cenários de pedido de devolução mapeados em 2 momentos
Públicos, cada um com sua primeira experiência
Ilustrações autorais que criei para a primeira experiência
O Pix nasceu no celular. No desktop, quem usava o Mercado Pago só conseguia fazer parte do que o app oferecia, e os vendedores, que tocam o negócio pelo computador, sentiam isso mais. Projetei a Área Pix para a web: cadastro e gestão de chaves Pix, transferências e acompanhamento de pedidos de devolução, numa página que se adapta à situação de cada pessoa.
Fui o product designer do projeto, com uma UX writer e nossa design lead, ao lado de produto e engenharia. Também ilustrei a primeira experiência.
Uma pesquisa do time com pessoas que usam Pix mostrou que muita gente nova confundia conceitos básicos, não entendia a portabilidade de chaves e não lembrava quais chaves tinha cadastradas. Quem usava o desktop também dizia que a experiência era inconsistente com o app e que não dava para fazer tudo num lugar só.
Só adaptar as telas não funcionaria: a mesma página precisava fazer sentido para quem não tinha chave Pix, para quem estava trazendo uma chave de outro banco (portabilidade) e para quem esperava um pedido de devolução, tanto pessoa física quanto vendedor. Além disso, a maioria dos componentes tinha sido feita para mobile, então precisamos repensar como eles se comportariam na web.
Usei a experiência mobile como referência e decidi o que manter, adaptar ou deixar de fora, preservando o máximo da experiência original dentro das limitações técnicas de desenvolvimento.
Mapeei os caminhos felizes de pessoa física e vendedores, além dos estados de erro, antes de projetar as telas.
Documentei todos os casos de uso de chaves (sem chave, com chave, portabilidade de entrada e saída, várias portabilidades) e as regras de exibição do MedPix.
Rodadas de feedback com o time, especialistas de design system, produto e desenvolvimento.
A página se reorganiza de acordo com a situação da pessoa: sem chaves cadastradas, com ou sem pedido de portabilidade, com chaves cadastradas ou com portabilidade em andamento. Pedidos de devolução pelo MED, o mecanismo do Banco Central para devolver Pix em casos de fraude, têm prioridade sobre o cadastro de chaves.
Pessoa física e vendedores usam o mesmo fluxo, mas chegam por motivos diferentes. A pessoa física é convidada a usar CPF e celular como chaves para pagar mais rápido; o vendedor, CNPJ e celular para começar a receber. Com a UX writer, projetei um modal de primeira experiência para cada perfil, com e sem chaves cadastradas, e criei as quatro ilustrações que levam cada mensagem.
Uma pessoa pode ter vários pedidos de devolução e portabilidades abertos ao mesmo tempo, e empilhar todos os alertas esconderia o que importa. Lançamos uma versão mínima primeiro e definimos as regras completas de exibição como próximo passo: uma mensagem por vez, priorizada por status, que a pessoa pode dispensar.
A Área Pix foi lançada na web no 4º trimestre de 2023, e depois o time a ampliou com o Pix Copia e Cola. Não tenho mais acesso aos dados pós-lançamento.
Guardar os dados pós-lançamento. Perdi o acesso a eles, então não consigo mostrar o impacto real que esse fluxo teve. Lição aprendida.
Projetar para estados, não para telas: a mesma página precisava funcionar bem para quem estava começando no Pix e para quem estava lidando com uma fraude.
Obrigado a Thiago, Thaci e Andreza.