May 28, 2021
Nubank | Wireframing Challenge
Já ouviu falar sobre wireframes?
Wireframes, ou protótipos, são uma espécie de esboço inicial de um site ou aplicativo. É como se fosse um esqueleto representado por alguns elementos visuais antes da elaboração final do layout. Ou seja, ele é mais focado no conteúdo do que na aparência em si e seu objetivo é promover uma visualização mais “limpa” dos fluxos contidos no site ou aplicativo. Isso é fundamental pois facilita o processo de alterações, diminui gastos e auxilia na identificação precoce de erros e consequente implementação de soluções. É por esse motivo que os protótipos geralmente são feitos em escala de cinza e com elementos simplificados justamente para evitar qualquer distração que fuja do objetivo principal.
Na primeira vez que entrei em contato com esse tema e vi exemplos de alguns wireframes, não imaginei que o processo de criação deles seria tão complexo. Porém, como é o caso desse desafio, muitas vezes o desenvolvimento de algo simples e eficiente se mostra muito mais desafiador do que à primeira vista, uma vez que requer foco apenas nas informações que são realmente fundamentais. E esse é justamente o ponto chave da produção de um bom wireframe.
O desafio proposto foi produzir o wireframe de um aplicativo de minha escolha, baseado nos prints das telas que compunham o fluxo de uma das ações disponíveis no aplicativo.
Eu optei pelo Nubank porque é um aplicativo que considero extremamente intuitivo e muito simples de usar. Um de seus grandes diferenciais é a promessa de uma interação mais descomplicada entre o usuário e o banco e eu, como usuária assídua, acho que de fato entrega o que propõe.
Escolhi o fluxo da realização de um Pix, meio de pagamento eletrônico lançado recentemente pelo Banco Central e que permite a realização de transferências e pagamentos em segundos, que se popularizou bastante no Brasil nos últimos meses.
Assim, iniciei o processo produzindo um protótipo mais simples feito à mão antes de passar para o digital, com o objetivo de ter mais facilidade para focar somente no fluxo em si. Para pessoas perfeccionistas como eu isso é uma tarefa muito difícil e eu senti que esse primeiro contato com um esboço à mão ajudou bastante a manter o foco.
Depois, utilizei o Figma para criar um wireframe digital um pouco mais detalhado me baseando nos prints das telas do fluxo que escolhi. Além disso, acrescentei uma tela a mais em relação ao esboço, que é a tela de login, totalizando 10 telas para completar o fluxo.
Dividi em alguns pontos o fluxo da realização de uma transferência por meio do Pix pelo usuário:
- Escolha da ação
- Tipo de pagamento
- Valor da transferência
- Destinatário da transferência
- Escolha da conta e banco de destino
- Checagem de dados
- Confirmação da transação
Acabei colocando alguns detalhes a mais no wireframe em comparação com o esboço inicial porém optei pela omissão de grande parte dos ícones e de alguns textos secundários que não eram fundamentais para a realização da tarefa proposta.
Durante o desenvolvimento do projeto pude perceber o quão complexo é o trabalho e a quantidade de etapas que estão envolvidas por trás de um fluxo que, superficialmente, parece bastante simples. Assim, para que uma ação simples possa ser tão fluida, sem dúvidas ela teve uma execução muito bem pensada por trás.
Além disso, também reparei na importância de fazer o protótipo de baixa fidelidade (no meu caso feito à mão) antes de prosseguir para o protótipo digital mais detalhado. Ele foi extremamente útil e me proporcionou uma visão muito mais ampla do fluxo, então é uma técnica que pretendo adotar com certeza.
Todo esse processo foi muito enriquecedor e também muito divertido. Sinto que aprendi bastante durante o desenvolvimento desse projeto e sigo animada e inspirada para embarcar cada vez mais nesse universo.
Se quiser deixar um feedback sinta-se à vontade e agradeço a todos que tiraram um tempinho para essa leitura 😄
