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
iPassContexto
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.
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.
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.
- 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".
- 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.
- 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.
- 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.
- 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.
Todas las pantallas
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
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.
Otros proyectos para conocer.
App · Aviación y MascotasMIA Pet
App del Aeropuerto Internacional de Miami para quienes viajan con mascotas: identidad digital del animal, check-in y aliados, hecha en Ivy
Ver proyecto
App · TatuajeTintaê
App de reservas para estudios de tatuaje: de la referencia al turno confirmado con el artista, en pocos toques
Ver proyecto
E-commerce y MascotasManada Animal
E-commerce y experiencia digital de pet shop
Ver proyecto