Estudo de caso sobre a recente atualização da interface do aplicativo de pagamentos PicPay
Lançado no ano de 2012, apesar dos desafios dos anos iniciais, após 2016 o aplicativo começou a se popularizar ganhando mais atenção no mercado. Atualmente o PicPay é um dos maiores aplicativos de pagamento no Brasil, resultado da conquista de inúmeros usuários ao longo de sua trajetória.
Contando com incontáveis produtos e serviços, desde a facilidade para realizar transferências via Pix, sendo o PicPay um dos pioneiros a incrementar essa possibilidade no app, um dos destaques do PicPay em seu inicio foi sua funcionalidade que permitia o usuário mandar o comprovante de pagamento por mensagem direta. Além de também oferecer cartões, carteira digital com rendimentos CDI, possibilidade de investimentos, marktplace financeiro (com oferta de diversos produtos financeiros), o aplicativo é recheados de ferramentas pensando no usuário.
Apesar desde o primórdio o aplicativo se mostrar preocupado com a experiência do usuário, através da funcionalidade que permitia o envio de mensagens diretas, demonstrando que não era um mero app que servia apenas para efetuar pagamentos, após a recente atualização da interface no app, a experiência do usuário foi afetada, uma vez que um app que costumava ser simples e intuitivo ficou com uma interface poluída e confusa.
Para explorar mais a fundo e problema e encontrar uma solução, a metodologia escolhida foi o Design Thinking: Double Diamond, que consiste em quatro etapas:
Imersão: consiste em buscar informação para se aprofundar na pauta;
Ideação: produção de ideias para solucionar o problema a partir da apresentação de informações coletadas anteriormente;
Prototipação: fase de testes, modelagem de uma versão de teste da solução;
Desenvolvimento: finalização para a versão oficial.
desk research
Com a recente atualização de interface do aplicativo acarretando em um descontentamento, fica evidente que a mudança não foi benéfica aos usuários, uma vez que muitas pessoas não se agradaram com o novo layout. Tendo esse ponto em mente, o objetivo desse estudo de caso é solucionar o problema da interface do Picpay, projetando um novo layout que atenda as necessidades do usuários e assim como antigamente, a interface seja simples e intuitiva como costumava ser.
Na barra de comentários do aplicativo, há alguns comentários nos quais os usuários demonstram insatisfação com as recentes atualizações de interface, e como é possível notar, esses comentários possuem muitos feedbacks de outros usuários que concordam com a reclamação trazido à tona, evidenciando que o número de usuários insatisfeitos é elevado.
Após a coleta de dados, ficou evidente que o design anterior agradava muito os usuários, mas com a nova atualização, os pontos positivos da antiga interface foram perdidas. Ao projetar a solução, é necessário resgatar alguns valores e conceitos que foram deixados de lado nas recentes atualizações, sendo esses:
- Simplicidade;
- Praticidade;
- Melhor manejamento dos componentes;
- Intuitividade.
brainstorming + método dos 5 porquês
Por que os usuários estão insatisfeitos com a nova interface?
porque ela é confusa e pouco intuitiva
Por que ela é confusa e pouco intuitiva?
porque os componentes são grandes ocupando muito espaço na tela, as telas são parecidas entre si, dificultando a distinção de onde é o que, já que tudo é parecido
Por que isso é um problema?
porque o usuário vai ter dificuldade para se localizar e encontrar o que precisa de forma fácil
Por que é ruim para o usuário ele ter dificuldade para encontrar o que precisa?
porque a experiência do usuário será prejudica
Por que a experiência do usuário ser prejudica é um problema?
porque ele estará insatisfeito com o produto, podendo optar por outra ferramenta para atender suas necessidades de forma mais prática
wireframe de baixa fidelidade
Para o desenvolvimento de um wireframe de baixa fidelidade foi escolhido manter a essência e a identidade visual da marca, utilizando a paleta de cores características do PicPay e mantendo o mesmo layout onde houveram acertos, mas para as telas que foram modificadas, a interface sofreu algumas mudanças de modo que não pudesse prejudicar a experiencia do usuário realizando uma mudança drástica.
programação
- HTML;
- CSS;
- JavaScript;
- React;
- Vite.