O PicPay \u00e9 uma das maiores plataformas de pagamento digital do Brasil, com mais de 26 milh\u00f5es de usu\u00e1rios ativos. Seu recurso de Mensagens Diretas (o “chat”) chegou a alcan\u00e7ar 12 milh\u00f5es de usu\u00e1rios, mas era utilizado quase exclusivamente como canal de suporte ao cliente. A possibilidade de transformar essa funcionalidade em um espa\u00e7o de comunica\u00e7\u00e3o interpessoal surgiu como uma oportunidade estrat\u00e9gica para atrair e engajar novos usu\u00e1rios.<\/p>\n\n\n\n
Realizamos uma auditoria completa da experi\u00eancia de mensagens existente e identificamos problemas cr\u00edticos, como navega\u00e7\u00e3o confusa, aus\u00eancia de indicadores de status das mensagens, falhas recorrentes e uma linguagem visual desalinhada ao design system do PicPay. Al\u00e9m disso, funcionalidades j\u00e1 consideradas essenciais em aplicativos de mensagens modernos (como grupos de conversa) ainda n\u00e3o existiam na plataforma. Para estabelecer um novo padr\u00e3o de qualidade e familiaridade, analisamos aplicativos amplamente utilizados pelos nossos usu\u00e1rios, como WhatsApp, Instagram e Telegram.<\/p>\n\n\n\n
Redesenhar a experi\u00eancia de mensagens do aplicativo,<\/strong> modernizando a linguagem visual, incorporando funcionalidades essenciais e criando experi\u00eancias nativas e consistentes para iOS e Android.<\/p>\n\n\n\n O redesign foi adaptado para respeitar as conven\u00e7\u00f5es nativas de iOS e Android, considerando diferen\u00e7as importantes de navega\u00e7\u00e3o, composi\u00e7\u00e3o de novas conversas, uso de FAB, comportamento do teclado e estrutura da barra de abas. Mais do que ajustes visuais, essas decis\u00f5es influenciaram diretamente a forma como usu\u00e1rios descobrem, compreendem e interagem com as funcionalidades principais da experi\u00eancia.<\/p>\n\n\n\n Foram entregues fluxos completos e telas prontas para produ\u00e7\u00e3o em ambas as plataformas, cobrindo toda a experi\u00eancia de Mensagens Diretas.<\/p>\n\n\n\n A seguir, o fluxo de cria\u00e7\u00e3o de grupos exemplifica como o mesmo recurso foi desenhado de forma consistente, mas adaptado \u00e0s expectativas e padr\u00f5es de intera\u00e7\u00e3o espec\u00edficos de cada sistema operacional.<\/p>\n\n\n\n Para avaliar o impacto do redesign, conduzimos uma pesquisa com usu\u00e1rios ativos de Mensagens Diretas um m\u00eas ap\u00f3s o lan\u00e7amento, utilizando o canal de suporte oficial in-app do PicPay. A abordagem permitiu coletar feedbacks diretamente no contexto real de uso, sem redirecionar usu\u00e1rios para ferramentas externas.<\/p>\n\n\n\n Conseguiram finalizar conversas com menos trocas de mensagens, gra\u00e7as \u00e0 introdu\u00e7\u00e3o de estados mais claros e padr\u00f5es de intera\u00e7\u00e3o mais flu\u00eddos<\/p>\n<\/div>\n\n\n Disseram que a ado\u00e7\u00e3o de padr\u00f5es visuais familiares tornaram a nova experi\u00eancia intuitiva desde o primeiro uso<\/p>\n<\/div>\n\n\n Passaram a usar mais o aplicativo ap\u00f3s a inser\u00e7\u00e3o de funcionalidades in\u00e9ditas, como mensagens em grupo<\/p>\n<\/div>\n<\/div>\n\n\n\n Projetar simultaneamente para iOS e Android me levou a enxergar al\u00e9m das diferen\u00e7as visuais entre plataformas. Aprofundar o estudo no Material Design e no Human Interface Guidelines da Apple evidenciou o quanto certos comportamentos de intera\u00e7\u00e3o parecem “naturais” apenas porque estamos acostumados ao ecossistema do nosso pr\u00f3prio dispositivo.<\/p>\n\n\n\n Padr\u00f5es como gestos de navega\u00e7\u00e3o, comportamento do teclado, uso de modais e hierarquias de intera\u00e7\u00e3o t\u00eam impacto direto na percep\u00e7\u00e3o de fluidez e familiaridade da experi\u00eancia e adaptar esses detalhes corretamente \u00e9 essencial para que a feature pare\u00e7a verdadeiramente nativa em cada plataforma.<\/p>\n\n\n\n Al\u00e9m disso, contribuir para o Design System do PicPay enquanto estruturava uma biblioteca dedicada para o DM ampliou minha percep\u00e7\u00e3o sobre os limites entre componentes compartilhados e solu\u00e7\u00f5es espec\u00edficas de contexto. O processo ajudou a entender com mais clareza quando vale expandir um sistema global e quando \u00e9 mais eficiente criar estruturas independentes para atender necessidades particulares de um produto.<\/p>\n","protected":false},"excerpt":{"rendered":" Modernizando a experi\u00eancia de mensagens do PicPay com adapta\u00e7\u00f5es espec\u00edficas de plataforma para iOS e Android<\/p>\n","protected":false},"author":2,"featured_media":0,"menu_order":1,"template":"","project_area":[2],"case_discipline":[],"case_platform":[],"class_list":["post-1001","case","type-case","status-publish","hentry","project_area-product-design"],"_links":{"self":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/case\/1001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/case"}],"about":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/types\/case"}],"author":[{"embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/users\/2"}],"version-history":[{"count":0,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/case\/1001\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1001"}],"wp:term":[{"taxonomy":"project_area","embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fproject_area&post=1001"},{"taxonomy":"case_discipline","embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcase_discipline&post=1001"},{"taxonomy":"case_platform","embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcase_platform&post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Processo<\/h2>\n\n\n\n
Diagn\u00f3stico do Problema e Benchmark<\/h2>\n\n\n\n
Explora\u00e7\u00e3o Espec\u00edfica por Plataforma<\/h2>\n\n\n\n
Cocria\u00e7\u00e3o, Componentes e Handoff<\/h2>\n\n\n\n
Telas Finais<\/h2>\n\n\n\n
Resultados<\/h2>\n\n\n\n
87%<\/h3>\n\n
63%<\/h3>\n\n
74%<\/h3>\n\n
O que aprendi<\/h2>\n\n\n\n