Volver al portafolio
App · Aviación y Mascotas

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 PetMIA Pet
01

Contexto

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.

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

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.

03

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.

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

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

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

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

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

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

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

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

04

Todas las pantallas

Apertura
Login
Login completado
Crear cuenta
Confirma tu e-mail
Teléfono para el código
Código vacío
Código completado
Completar la cuenta
Foto de perfil
Sacar una foto o elegir de la galería
Home con las mascotas
Banner de socios
Banner del asistente de IA
Banner del pin MIA
Menú agregar: mascota o chatbot
Pet ID
Ficha de la mascota
Datos del viaje
Pet ID compartido
Mascota que requiere atención
Socios con descuento
Check-in con la cámara
Configuración
Editar perfil
Preferencias

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

05

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.