Projeto de Aplicação Mobile para Recarga de Bilhete de Transporte — Parte 8
MVP V1 — Wireframes e Telinhas
Esse é a parte 8 da série que compõe a jornada de um projeto pessoal que estou desenvolvendo. Se você chegou aqui de pára-quedas, recomendo começar pela parte 1.
Nessa parte apresentarei os wireframes e as telinhas (com iconografia, tipografia e cores) que elaborei para versão 1 do MVP. Os wireframes foram feitos com a ferramenta Figma e as telas em cores com Atomic.io (também estou utilizando essa ferramenta para prototipação).
As dimensões de cada tela é de 375 px x 590 px, pois utilizei como referência o meu celular, Sony Xperia Z2 com sistema operacional Android 6.0.
Retomando o diagrama Esforço e Priorização para o MVP que vimos na parte 7 do projeto. Temos:

Tour Inicial
Esse conjunto de telas tem o objetivo de apresentar o aplicativo ao usuário, mostrando para quê ele serve, ao mesmo tempo que mostra a sua flexibilidade em formas pagamentos e fala sobre segurança.
A seguir, wireframes e telas com iconografia, tipografia e cores.


Tela de Acesso
O aplicativo funciona com a modalidade de login e senha. Assim, segue wireframes e telas com iconografia, tipografia e cores para tela inicial


Cadastro de Usuário
Como medida de segurança, o usuário precisa realizar um cadastro no aplicativo. Assim, seus bilhetes e suas informações estarão melhor protegidas. Além disso, se o usuário desinstalar o aplicativo ou trocar de celular, basta acessar novamente sua conta para que todas as suas informações sejam recuperadas.
A seguir, wireframes e telas com iconografia, tipografia e cores.


Tela de Início e Menu Lateral
Após realizar o cadastro ou o login no aplicativo, o usuário é redirecionado para a tela inicial. Essa tela contém a lista dos bilhetes que o usuário já cadastrou no aplicativo e acesso ao menu lateral com opções de funcionalidades.
O aplicativo também avisa ao usuário quando não há nenhum bilhete cadastrado e orienta o usuário sobre o que deve ser feito.
A seguir, wireframes e telas com iconografia, tipografia e cores.


Cadastro de Bilhete
O usuário pode cadastrar em sua conta quantos bilhetes desejar, não importando o tipo de bilhete. Além disso, também pode associar um nome customizado para ele, por exemplo, “BU do Trabalho”. O cadastro é útil para que o usuário consiga monitorar o saldo do bilhete, consultar seu histórico de uso e efetuar recarga para o respectivo bilhete.
A seguir, wireframes e telas com iconografia, tipografia e cores.


Se o celular do usuário possuir a tecnologia NFC, o usuário também pode realizar o cadastro do bilhete utilizando essa tecnologia. A seguir, wireframes e telas com iconografia, tipografia e cores.


Consulta de Saldo e Histórico de Uso
Por ter uma lista com os bilhetes cadastrados, o usuário já consegue saber qual o saldo atual de cada bilhete e se algum deles está com saldo crítico (saldo crítico = saldo insuficiente para passar pela primeira catraca da viagem do usuário). Além disso, ao acessar mais detalhes sobre o bilhete, o usuário consegue ver o seu histórico de uso, bem como alterar seu nome customizado e remover o bilhete do aplicativo.
Obs.: Apesar do Histórico de Uso e Recarga fazerem parte a versão 2 do MVP, decidi já trazer nesse post, pois achei que seria interessante e que faz parte do contexto do tópico.
A seguir, wireframes e telas com iconografia, tipografia e cores.


Recarga do Bilhete
O usuário pode realizar a recarga dos bilhetes que cadastrou em sua conta, podendo escolher entre diferentes valores de recarga, em reais, e formas de pagamento. Caso o usuário não possua bilhetes cadastrados, o aplicativo avisa o usuário e o orienta sobre o que deve ser feito.
Obs.: Para a versão 1 do MVP, temos apenas a possibilidade de pagamento via cartão de crédito, mas decidi incluir os botões (sem as telas) para as outras formas de pagamento. A versões posteriores terão as telas para as demais formas de pagamento, isso será coberto nos próximos posts.
A seguir, wireframes e telas com iconografia, tipografia e cores.


Se o celular do usuário possuir a tecnologia NFC, o usuário também pode realizar a recarga do bilhete utilizando essa tecnologia. A seguir, wireframes e telas com iconografia, tipografia e cores.


Próximos passos
Estou elaborando o protótipo com as funcionalidades apresentadas nesse post e após o término, realizarei testes de usabilidade com usuário da versão 1 do MVP. Apresentarei no próximo post os resultados dos testes. Quais foram os insights obtidos a partir disso e as mudanças que foram necessárias fazer.
Caso desejem acompanhar a evolução do protótipo, segue o link para acessá-lo e interagir com ele: https://app.atomic.io/d/KjtZ6jDcR0VN
Qualquer dúvida ou sugestão, por favor, fiquem à vontade para compartilhar na seção de comentários. Estou aberto a discussões e troca de conhecimento. Muito Obrigado pela atenção!
Até o próximo post!
