Volver al portafolio
App · Eventos

iPass

App de registro de documento y biometría facial para el acceso a eventos, hecha en Ivy

Mi rol
Diseñador UI/UX Sénior
iPassiPass
01

Contexto

iPass es una aplicación de acceso a eventos por reconocimiento facial: antes del evento, la persona registra un documento y una selfie, y en la entrada la habilitan por el rostro, sin entrada impresa ni fila de control. El proyecto se hizo en Ivy, donde trabajé como Diseñador UI/UX Sénior, responsable de la experiencia y de la interfaz de todo el recorrido de registro.

Cliente
iPass
Empresa
Ivy
Año
2023 a 2024
Rol
Diseñador UI/UX Sénior
02

Desafío

La validación depende de dos buenas fotos: un documento legible y un rostro nítido. Quien saca esas fotos es el propio público del evento, de cualquier edad, con el celular y muchas veces apurado. Si la foto sale mal, el registro se traba y el problema aparece recién en la puerta del evento. El flujo tenía que enseñar sin parecer un tutorial y corregir el error en el momento.

03

El recorrido, paso a paso

Fondo verde de la marca y una tarjeta clara en el centro con una tarea por pantalla, título corto y un único botón principal. El verde claro siempre avanza, el petróleo siempre rehace.

  1. 01 / 05

    Entrada y documento

    Login con e-mail o teléfono y, enseguida, una elección simple entre licencia de conducir (CNH) y documento de identidad (RG). Quien ya tiene la foto puede adjuntar frente y dorso (hasta 5 MB), y quien no la tiene la saca en el momento con el botón "Sacar foto".

  2. 02 / 05

    De la computadora al celular

    Si el registro empieza en la computadora, un código QR y un enlace llevan la captura al celular, donde la cámara es mejor. Cuando la selfie vuelve con un pendiente, la app avisa con un tono tranquilo ("¡pero quédate tranquilo!") e invita a rehacerla, en lugar de rechazar la solicitud.

  3. 03 / 05

    Captura del documento

    Cuatro consejos con íconos antes de abrir la cámara (luz, sacarlo del plástico, encajarlo en el marco, datos legibles), la cámara trasera con el marco verde, la confirmación de legibilidad y, por último, los datos leídos por OCR (nombre, CPF y fecha de nacimiento) para que la persona los revise antes de seguir.

  4. 04 / 05

    Registro facial

    El mismo patrón de consejos para la selfie (sin anteojos, sombrero ni barbijo, rostro centrado), la marca ovalada en la cámara, la pregunta "¿La foto salió BIEN?" con nueva captura o confirmación, y la pantalla de éxito que ya orienta para el día del evento.

  5. 05 / 05

    Errores con salida

    Cuando la imagen sale borrosa, la app muestra la propia foto desenfocada, dice qué pasó con el "NO" destacado y ofrece un único camino: nueva captura. Nada de códigos de error ni mensajes genéricos.

04

Todas las pantallas

Login
Elección del documento
Carga de frente y dorso
Continuar en el celular por código QR
Aviso de pendiente en la selfie
Consejos para fotografiar el documento
Cámara con marco
Confirmación de legibilidad
Datos leídos por OCR
Documento ilegible
Consejos para la selfie
Encuadre del rostro
¿La foto salió bien?
Foto sin nitidez
Registro completado

Sistema Visual

Dos colores de acción con roles fijos (verde claro para avanzar, petróleo para rehacer), una tarjeta clara sobre el verde de la marca y títulos grandes en negro: la persona entiende toda la pantalla de un vistazo, aun con el celular en la mano y apurada.

Paleta

Verde iPass

#02AB89

Fondo de la marca, marcos y destacados

Verde Acción

#53D769

Botones que avanzan: Entrar, ¡Vamos!, Confirmar

Petróleo

#017781

Botones que rehacen: Nueva captura, Registrar, Sacar foto

Hielo

#EFEFEF

Tarjeta de contenido

Negro

#000000

Títulos y textos

05

Aprendizaje

En un flujo de biometría, la calidad de la foto es un problema de diseño antes que de tecnología. Dar el consejo antes de la cámara, mostrar el marco durante la captura y pedir la confirmación enseguida evita la mayor parte de los errores, y cuando el error ocurre, mostrar la propia foto mala explica el problema mejor que cualquier texto.