MIA Pet
App del Aeropuerto Internacional de Miami para quienes viajan con mascotas: identidad digital del animal, check-in y aliados, hecha en Ivy
- Mi rol
- Diseñador UI/UX Sénior
MIA PetContexto
MIA Pet es una aplicación para el Aeropuerto Internacional de Miami (MIA) pensada para quienes viajan con animales: cada mascota recibe una identidad digital con datos, vacunas y microchip, que el tutor comparte con la aerolínea y usa para hacer check-in en los socios del aeropuerto. El proyecto se hizo en Ivy, donde trabajé como Diseñador UI/UX Sénior en todo el recorrido de la app.
Desafío
Viajar con una mascota implica mucha información: especie, tamaño, peso, vacuna antirrábica, distintos tipos de microchip, si el animal es de apoyo emocional o perro de servicio, condiciones médicas y de comportamiento. Todo eso tenía que caber en el celular de un pasajero apurado, completarse una vez y reutilizarse en cada viaje.
El recorrido, paso a paso
Fondo claro, azul de MIA en la marca y azul de acción en los botones, con un título grande y una tarea por pantalla. Botón gris mientras falta algo, azul cuando se puede seguir.
- 01 / 08
Entrada
Apertura con la marca del aeropuerto, login con e-mail y contraseña o con Google y Facebook, y el estado completado con el campo activo destacado en azul.
- 02 / 08
Crear cuenta y verificar
Registro con nombre, e-mail, contraseña y aceptación de los términos, confirmación por enlace en el e-mail y verificación del teléfono con un código de 4 dígitos. El botón solo se enciende cuando el código está completo.
- 03 / 08
Completar el perfil
Datos de la cuenta en cuatro campos y la foto de perfil, con la opción de sacar una foto o usar la galería en un panel que sube desde abajo, y la opción "Maybe later" para no trabar a quien tiene prisa.
- 04 / 08
Home de las mascotas
Las mascotas del tutor en tarjetas apiladas con foto, código y el botón "View ID"; debajo, un banner que alterna ofertas de los socios, el asistente de IA y el pin MIA, y un feed de consejos de salud. El "+" abre la opción entre registrar una mascota o hablar con el chatbot.
- 05 / 08
Pet ID y ficha completa
La tarjeta de la mascota (foto, código, especie, raza, sexo y fecha de nacimiento) con tres acciones: ver el ID, compartir y hacer check-in. La ficha se divide en bloques con marcador azul: castración, origen, tamaño, peso, vacuna antirrábica, microchip (ISO 15 dígitos, AVID 9 y 10 dígitos), estado de apoyo emocional o de servicio, condiciones médicas y de comportamiento y archivos como el CVI.
- 06 / 08
Compartir con la aerolínea
Cuatro campos (aerolínea, origen, destino y fecha) y el botón "Share pet id". La confirmación cambia según la ficha: para la mayoría, "Happy to have you and your pet at MIA!"; para una mascota que requiere atención, un aviso para hablar con la aerolínea antes de viajar.
- 07 / 08
Check-in en los socios
"At MIA your pet is a superstar!": restaurantes y cafés del aeropuerto con descuento para quien hace check-in con su mascota, y el check-in con la cámara del celular en el punto del socio.
- 08 / 08
Cuenta y configuración
Perfil con foto, edición de datos personales y preferencias de notificaciones, idioma y unidad de medida, porque la app atiende a pasajeros de varios países.
Todas las pantallas
Sistema Visual
Una base neutra y clara para que las fotos de las mascotas sean las protagonistas, el azul de la marca del aeropuerto en la identidad y un azul más vivo solo en las acciones. Los bloques de la ficha usan un marcador azul al costado para guiar la lectura de un formulario largo.
Paleta
Azul MIA
#005696
Marca, apertura y login
Azul Acción
#2C7ECB
Botones, enlaces y campo activo
Hielo
#EFEFEF
Fondo de las pantallas
Gris Campo
#D4D4D4
Campos y tarjetas
Grafito
#4A4A4A
Títulos y textos
Aprendizaje
Un formulario largo no tiene por qué parecer largo. Dividir la ficha de la mascota en bloques con un tema cada uno, mostrar solo lo que aplica (los campos del microchip se abren cuando se marca el tipo) y dejar la tarjeta del animal siempre arriba hace que el tutor sienta que está armando la identidad de su mascota, no completando papeles.
Otros proyectos para conocer.
App · EventosiPass
App de registro de documento y biometría facial para el acceso a eventos, 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