iPass
App de cadastro de documento e biometria facial para entrada em eventos, feito na Ivy
- Meu papel
- UI/UX Designer Sênior
iPassContexto
O iPass é um aplicativo de acesso a eventos por reconhecimento facial: antes do evento, a pessoa cadastra um documento e uma selfie, e na entrada é liberada pelo rosto, sem ingresso impresso nem fila de conferência. O projeto foi feito na Ivy, onde atuei como UI/UX Designer Sênior, responsável pela experiência e pela interface de toda a jornada de cadastro.
Desafio
A validação depende de duas fotos boas: um documento legível e um rosto nítido. Quem faz essas fotos é o próprio público do evento, de qualquer idade, no celular, muitas vezes com pressa. Se a foto sai ruim, o cadastro trava e o problema aparece só na porta do evento. O fluxo precisava ensinar sem parecer tutorial e corrigir o erro na hora.
A jornada, passo a passo
Fundo verde da marca e um card claro no centro com uma tarefa por tela, título curto e um único botão principal. O verde-claro sempre avança, o petróleo sempre refaz.
- 01 / 05
Entrada e documento
Login com e-mail ou telefone e, logo depois, uma escolha simples entre CNH e RG. Quem já tem a foto pode anexar frente e verso (até 5 MB), e quem não tem tira na hora pelo botão "Tirar foto".
- 02 / 05
Do computador para o celular
Se o cadastro começa no computador, um QR code e um link levam a captura para o celular, onde a câmera é melhor. Quando a selfie volta com pendência, o app avisa em tom tranquilo ("mas fique tranquilo!") e chama para refazer, em vez de recusar o pedido.
- 03 / 05
Captura do documento
Quatro dicas com ícones antes de abrir a câmera (luz, tirar do plástico, encaixar na moldura, dados legíveis), a câmera traseira com a moldura verde, a confirmação de legibilidade e, por fim, os dados lidos pelo OCR (nome, CPF e nascimento) para a pessoa conferir antes de seguir.
- 04 / 05
Cadastro facial
O mesmo padrão de dicas para a selfie (sem óculos, chapéu ou máscara, rosto centralizado), a marcação oval na câmera, a pergunta "A foto ficou BOA?" com nova captura ou confirmação, e a tela de sucesso que já orienta para o dia do evento.
- 05 / 05
Erros com saída
Quando a imagem sai borrada, o app mostra a própria foto desfocada, diz o que aconteceu com o "NÃO" em destaque e oferece um único caminho: nova captura. Nada de código de erro ou mensagem genérica.
Todas as telas
Sistema Visual
Duas cores de ação com papéis fixos (verde-claro para avançar, petróleo para refazer), um card claro sobre o verde da marca e títulos grandes em preto: a pessoa entende a tela inteira num olhar, mesmo com o celular na mão e pressa.
Paleta
Verde iPass
#02AB89
Fundo da marca, molduras e destaques
Verde Ação
#53D769
Botões que avançam: Entrar, Vamos lá!, Confirmar
Petróleo
#017781
Botões que refazem: Nova captura, Cadastrar, Tirar foto
Gelo
#EFEFEF
Card de conteúdo
Preto
#000000
Títulos e textos
Aprendizado
Em fluxo de biometria, a qualidade da foto é um problema de design antes de ser um problema de tecnologia. Dar a dica antes da câmera, mostrar a moldura durante a captura e pedir a confirmação logo depois evita a maior parte dos erros, e quando o erro acontece, mostrar a própria foto ruim explica o problema melhor que qualquer texto.
Outros projetos para conhecer.
App · Aviação e PetsMIA Pet
App do Aeroporto Internacional de Miami para quem viaja com pet: identidade digital do animal, check-in e parceiros, feito na Ivy
Ver projeto
App · TatuagemTintaê
App de agendamento para estúdios de tatuagem: da referência ao horário marcado com o artista, em poucos toques
Ver projeto
E-commerce & PetManada Animal
E-commerce e experiência digital de pet shop
Ver projeto