Voltar para o portfólio
App · Eventos

iPass

App de cadastro de documento e biometria facial para entrada em eventos, feito na Ivy

Meu papel
UI/UX Designer Sênior
iPassiPass
01

Contexto

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.

Cliente
iPass
Empresa
Ivy
Ano
2023 a 2024
Papel
UI/UX Designer Sênior
02

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.

03

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.

  1. 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".

  2. 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.

  3. 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.

  4. 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.

  5. 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.

04

Todas as telas

Login
Escolha do documento
Upload de frente e verso
Continuar no celular por QR code
Aviso de pendência na selfie
Dicas para fotografar o documento
Câmera com moldura
Confirmação de legibilidade
Dados lidos pelo OCR
Documento ilegível
Dicas para a selfie
Encaixe do rosto
A foto ficou boa?
Foto sem nitidez
Cadastro concluído

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

05

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.