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.

Mãos segurando cartões do Nubank

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.

Protótipo de baixa fidelidade

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.

À esquerda: prints das telas do aplicativo do Nubank / À direita: wireframe produzido no Figma

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
Fluxo para realização do Pix

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 😄

--

--

--

UX/UI Designer student with a background in Psychology and Cognitive Sciences enthusiastic

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ana Luiza Fontana

Ana Luiza Fontana

UX/UI Designer student with a background in Psychology and Cognitive Sciences enthusiastic

More from Medium

Project 3: Add a feature

Ironhack: Project 1 — City mobility

Ironhack´s pre-work: Ivanna Jimenez_Challenge 1

Ironhack pre-work: Challenge 1: Design Thinking — Citymapper

Top view of a table where a group of people are brainstorming a UX solution with postits and quick sketches