Projeto de Aplicação Mobile para Recarga de Bilhete de Transporte — Parte 8

MVP V1 — Wireframes e Telinhas

Bruno Katekawa
Aug 27, 2017 · 5 min read

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:

Esforço e Priorização para o MVP.

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!


)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade