Tangibilizando a solução
A hora de trabalhar em cima das ideias
Introdução
Este artigo faz parte de um conjunto que estou publicando sobre o projeto re:Bank. Se você chegou aqui de paraquedas, recomendo que leia estes três artigos antes, na ordem:
Tangibilizando a solução
Agora que já sabemos para quem vamos projetar a solução (Personas), as suas dores e necessidades e quais produtos e serviços vamos oferecer (Proposta de Valor), podemos começar a propor ideias de como essa solução poderá ser. Na abordagem de projeto que estamos adotando aqui — e explicada detalhadamente, passo a passo em outro artigo — estamos na etapa de Elaborar.
Nessa etapa vamos mapear os fluxos principais que imaginamos que os clientes farão em nossa solução, no caso, um app mobile. Além disso, vamos rascunhar as principais telas e depois passá-las para mockups de alta fidelidade.
Neste artigo, utilizarei o projeto re:Bank para ilustrar a forma como tudo isso é feito.
Mapa dos Fluxo Principais
Fazer o mapeamento dos principais caminhos que o usuário fará em seu produto ajuda a pensar melhor nas condicionais que podem acontecer durante o uso. Além disso, também auxilia a ter uma ideia inicial de quantos passos (telas) os usuários passarão até completar o seu objetivo.
No caso, podemos observar que tudo se inicia quando o usuário baixa o app e o instala. A partir daí, quando ele abre o app, precisamos verificar se já possui conta ou se é novo cliente. Se já possui conta, ele pode ir para a tela de Login, caso contrário, inicia o cadastro.
Após o Login ou o término do cadastro, assumindo que este foi aprovado, o usuário passa para a tela Inicial (Home). A partir dela, ele pode fazer diversas operações como verificar o saldo, consultar o extrato, consultar a fatura do cartão de crédito, pagar uma conta, fazer Pix e fazer uma transferência.
A dica aqui é: comece mapeando os fluxos principais do seu cliente em seu produto. Isso vai te ajudar lá na frente quando for rascunhar as interfaces (digital ou analógica), canais e pontos de contato.
Rascunhos
Fazer primeiro os rascunhos à mão nos dá mais liberdade de criar. Fazendo-os com lápis, podemos testar outras formas e sem medo de nos comprometermos com o que acabamos de rabiscar. Temos a liberdade de apagar e melhorar.
Além disso, rascunhar as telas tem o objetivo de entender melhor como as informações serão apresentadas e organizadas na tela. Nesse momento, estamos pensando na estrutura, sem nos preocuparmos com cores e animações — isso nós vamos nos preocupar no passo seguinte. Um design com uma boa estrutura permite que elementos como cor, tipografia e animações tenham um melhor desempenho.
A dica aqui é: faça os rascunhos pensando na estrutura. Por hora, se preocupe apenas com isso.
Mockups de Alta Fidelidade
Após feito os rascunhos e termos a validação dos stakeholders, podemos passá-los para mockups de alta fidelidade.
Opa, peraí! Já passar para alta fidelidade? Sem testar com os usuários?
Nesse projeto, vamos testar um protótipo de alta fidelidade com os usuários, pois queremos, além de testar os fluxos, também vamos testar o look n' feel para eles. Não há problema algum em testar com protótipo de papel, é uma decisão de projeto e nesse decidimos testar com o de alta fidelidade.
Conclusão
Este artigo foi mais curto e direto ao ponto. Vimos porquê é mais interessante mapearmos o fluxo de uso do produto antes de irmos direto rascunhar as interfaces. Além disso, discutimos sobre passar as telas para alta fidelidade ao invés de montarmos um protótipo de papel e que isso é mais decisão de projeto e o que se quer testar.
Se você curtiu tanto este artigo quanto essa série, por favor, clique e segure quase que infinitamente no botão de “palmas 👏” do Medium! Dessa forma, a plataforma saberá que é um conteúdo relevante e mostrará para mais pessoas!
E é isso! Muito obrigado pelo seu tempo e até a próxima etapa! 😄
