Capa do projeto Redesign Função PIX, com o título em branco sobre fundo em degradê laranja e a tela inicial do app ao lado.
Capa original de divulgação do projeto, em 2022.

Contexto

A iteração foi trabalho final da matéria "Experiência do Usuário", optativa no curso de D. Gráfico (UFG), servindo como primeira experiência do grupo com a temática.

O tema guia da disciplina consistia em buscar pontos de atrito na interação da terceira idade com as novas tecnologias.

O case teve a finalidade de repensar o fluxo de interação da função PIX, até então novidade como opção para pagamentos no Brasil. O foco da proposta era tornar o processo mais claro e intuitivo aos usuários do aplicativo do banco CAIXA, principalmente os mais velhos.

Três telas do app lado a lado: menu lateral do PIX, tela inicial do internet banking e tela de pagamento via PIX.
A: Menu lateral · B: Tela inicial do app · C: Tela única para o PIX

O principal agravante colhido na análise do fluxo do aplicativo estava na dificuldade de encontrar e preencher dados durante a transferência, função escondida por um menu lateral, botões semelhantes e uma única tela vertical extensa para preencher todos os campos e etapas.

Registro de interação com o protótipo desenvolvido no Figma.
Diagrama dos cinco planos de J.J. Garrett — Estratégia, Escopo, Estrutura, Esqueleto e Superfície — do abstrato ao concreto.
Diagrama visual com as fases da metodologia da Garrett.

A metodologia usada para o desenvolvimento do redesenho foi a proposta de J.J. Garrett em seu livro The Elements of User Experience, sendo guia metodológico da disciplina. Adiante, avalio como essa condição influenciou na progressão do resultado final.

Análise

Com um levantamento rápido no vídeo do protótipo e uma revisão de heurísticas e convenções de usabilidade, foi possível captar os seguintes pontos de carência na interface:

Clique ou faça scroll para interagir ↓

Tela inicial do app, com os cards de acesso rápido e o primeiro banner do Mural Caixa destacados em ciano — um em outline, o outro preenchido.
Tela inicial do app, sem destaques, mostrando os cards de acesso rápido e o Mural Caixa.
Tela do PIX, com o cabeçalho em degradê azul e o botão flutuante 'Acessar todas' destacados em ciano.
Tela de descrição do PIX, com o bloco de texto colado ao formulário e a grande área vazia abaixo destacados em ciano.
Tela de descrição do PIX, evidenciando os pesos de texto e o título em caixa alta do campo de descrição.
Tela de carregamento com a mensagem 'Aguarde um segundinho, sua transferência está em andamento'.
Recortes ampliados do formulário e da lista de movimentações, com bordas e alinhamentos desalinhados destacados em ciano.
    1. Elementos da identidade não conversam, botões e banners parecem frutos de identidades diferentes; ora escolha por preenchimento e degradês, em outros elementos puramente outline. Acredito que essa ambiguidade nasce de uma restrição do escopo original: atualizar os elementos que faziam parte do novo fluxo, porém preservando aspectos e a filosofia geral da identidade antiga, já que o foco não era um rebranding visual completo.
    2. Existe um atrito visível entre a identidade escolhida e a linguagem visual do sistema escolhido para a aplicação (iOS). Entretanto, é justo considerar que o aplicativo era uma primeira tentativa séria do grupo com a ferramenta e ainda não existiam componentes pré-fabricados como atualmente.
    3. É relevante considerar que os espaços das interfaces poderiam ser melhor distribuídos, dado que alguns exemplos demonstram uma concorrência visual entre elementos muito próximos e espaços negativos excessivos. Muito provável que o impasse seja fruto da restrição de redesign parcial.
    4. Pesos textuais muito discrepantes entre títulos de sessão e corpo de texto. Também ocorre uma escolha injustificada de textos em caixa alta em alguns componentes informativos. A escolha de fonte principal também soa equivocada, pois prioriza estética pela legibilidade.
    5. Espaçamento entre texto e elementos muito apertado, gerando dificuldade de absorver a informação e leitura.
    6. Escolha leiga para indicadores de status entre as telas, poderia ser mais eficiente e menos redundante.
    7. UX writing amador nas telas de carregamento. Houve a priorização de uma voz paternalista/emocional (provavelmente fruto de uma escolha de narrativa para o rebranding) em detrimento de instruções claras sobre o que está acontecendo.
    8. Falta refinamento no alinhamento de textos e espaçamento apropriado em alguns botões da interface. As bordas dos elementos também carecem de um design system harmonioso.
    9. Apesar da escolha de animações para a troca de telas do protótipo refletir a ideia de progressão, ainda tem um ritmo lento para a função, principalmente em casos onde ela pode ser repetida várias vezes ao longo de um dia.
    10. Carência de uma configuração para alterar o tamanho dos textos e elementos da interface, requisito essencial pensando na acessibilidade do público alvo trabalhado.

      Conclusão

      Avalio em retrospecto como a fundamentação do projeto na metodologia de Garrett causou um engessamento no refinamento do produto. A principal crítica feita a esse sistema está relacionada ao seu caráter datado, qual representa um fluxo de desenvolvimento de soluções de software do início dos anos 2000 focado na construção, porém carente de processos iterativos adotados por metodologias modernas. É possível imaginar como uso de testes com o público alvo destacariam boa parte dos pontos analisados anteriormente.

      Ainda sobre o modelo, também é relevante destacar sua superficialidade ao generalizar conceitos complexos das etapas em frases simples, sem uma fragmentação de processos e seus resultados esperados. Por essa ótica, é possível prever como o ponto de partida com certo nível de abstração afetou o resultado.

      Outros fatores a se considerar para as pontas soltas são o repertório acadêmico extremamente gráfico e ainda introdutório dos autores, somadas ao tempo reduzido para atingir um estado palpável para a aplicação e o caráter fracionado de desenvolvimento durante o decorrer do curso.

      Por fim, a aplicação reflete a primeira experiência dos estudantes com a área e ferramenta (Figma), carecendo de uma visão mais aguçada sobre a influência dos pequenos detalhes na usabilidade final. Todavia, o artefato cumpre com seu objetivo geral de reformular a experiência e navegação do aplicativo para um processo mais claro e agradável para o usuário.