top of page
PetMach mejora la adopción de mascotas con una plataforma digital intuitiva y centrada en el usuario. Permite buscar mascotas por compatibilidad, facilitando la selección según las necesidades del adoptante y si tiene también de su mascota actual. Su navegación clara y diseño responsive garantizan una experiencia fluida en cualquier dispositivo, PetMatch brinda acompañamiento en todo el proceso con herramientas de adopción, tienda en linea, directorios de veterinarios y una comunidad de apoyo.
ROL
UX Design, User Research, Information Design
HERRAMIENTAS
Figma, Wireframing, Adobe Suite, User Interview, Research, Prototyping
DURACIÓN
5 semanas
PROBLEMA
El proceso de adopción de mascotas es complejo y poco personalizado. Los adoptantes tienen diferentes necesidades y preocupaciones, como encontrar una mascota compatible con su estilo de vida o con sus otros animales. La falta de información clara y acompañamiento dificulta la toma de decisiones y la integración del nuevo miembro al hogar.
SOLUCIÓN Y OBJETIVOS
Diseñar una plataforma digital intuitiva y responsiva que facilite la adopción a través de un sistema de compatibilidad, filtros avanzados y asesoramiento en cada etapa del proceso. La plataforma permitirá a los usuarios encontrar la mascota ideal, recibir acompañamiento post-adopción y acceder a recursos clave para garantizar una integración exitosa.
Investigación de usuarios
Para comprender mejor las necesidades de los adoptantes, realicé entrevistas y mapas de empatía, identificando dos perfiles principales: quienes buscan su primera mascota y quienes desean integrar un nuevo miembro a su hogar.
Descubrí que muchos adoptantes se sienten abrumados por procesos de adopción poco claros, la falta de información sobre los animales y la incertidumbre sobre la compatibilidad con su estilo de vida o sus mascotas actuales. Además, valoran un proceso guiado y acompañamiento posterior para asegurar una adaptación exitosa.
Estos hallazgos resaltaron la necesidad de una plataforma que no solo simplifique la búsqueda y adopción, sino que también ofrezca herramientas interactivas, asesoría personalizada y una comunidad de apoyo para hacer de la adopción una experiencia segura y emocionante.
PUNTOS DÉBILES
No hay herramientas que permitan saber si la mascota se adaptará bien a su estilo de vida o, en caso de tener con otra mascota.
Compatibilidad
Perciben el proceso de adopción como complicado y con requisitos poco claros lo que puede desmotivarlos.
Procesos
La navegación en las plataformas existentes es poco clara, con información dispersa y sin una guía clara sobre el proceso.
Intuición
Adoptantes se sienten solos sin asesoramiento o comunidad de apoyo.
Post-adopción
desarrollo de PERSONA
Francisco es un diseñador gráfico que trabaja desde casa y comparte su vida con Max, un perro que adoptó hace tres años. Ahora desea darle una oportunidad a otro perro, preferiblemente un adulto, pero enfrenta dudas sobre la compatibilidad entre ambos y la claridad del proceso de adopción.
Crear un mapa de recorrido del usuario para Francisco permitió identificar sus necesidades, preocupaciones y expectativas en cada etapa: desde la búsqueda de información hasta la integración del nuevo miembro en su hogar. Su experiencia destaca la necesidad de una plataforma que le brinde confianza, simplifique los trámites y ofrezca herramientas para evaluar la compatibilidad entre mascotas, asegurando una adopción responsable.
Diseño y concepto
El proceso de diseño comenzó con la creación de una arquitectura de información clara y accesible, asegurando que los usuarios pudieran navegar intuitivamente por la plataforma. Se definieron las principales secciones y se diseñó un flujo de adopción optimizado, priorizando la personalización y la facilidad de uso.
La interfaz de PetMach permite a los usuarios encontrar mascotas compatibles mediante filtros inteligentes y herramientas interactivas. Además, se desarrolló una experiencia visual atractiva y adaptable a diferentes dispositivos, garantizando accesibilidad en cualquier momento. El diseño se enfocó en ofrecer información clara, mejorar la toma de decisiones y hacer que el proceso de adopción sea eficiente e informativo.
Iteraciones para Home con posibles componentes para la página web
Componentes
Responsive
PROTPTIPO lo-fi
Se crearon prototipos de baja fidelidad para estructurar la navegación y definir la jerarquía de información dentro de PetMach. La acción principal, “hacer match con una mascota compatible”, se posicionó como el eje central, asegurando que los usuarios pudieran filtrar opciones según sus preferencias o si tienen con las características de su mascota actual.
Se priorizó una navegación clara con un flujo guiado que simplifica el proceso de adopción, desde que seleccionan la mascota hasta la integración en el hogar. Además, se incorporaron accesos directos a información clave, como requisitos de adopción, compatibilidad y asesoría post-adopción. Estos prototipos sirvieron para validar el recorrido del usuario optimizando la experiencia de uso y garantizando un flujo intuitivo para las primeras pruebas con usuarios.
Jerarquía visual clara
Estructura organizada con un encabezado, un área central enfocada en la adopción y un menú fijo. Navegación fluida y ordenada.
Menú fijo de navegación
El menú superior derecho da acceso directo a las secciones clave: Inicio, Adopta, Post-adopción, Apóyanos, Nosotros, Carrito y Perfil, asegurando una navegación intuitiva.
Protagonismo en la adopción
Las secciones "Encuentra a tu compañero" y "Compatibilidad con tu actual mascota" se ubican en el centro del diseño para facilitar la búsqueda y selección de mascotas.
Retroalimentación visual
Se añadieron indicadores visuales para resaltar la sección activa y ayudar a los usuarios a ubicarse dentro del proceso de adopción.
Diagrama de flujo
Se desarrolló un diagrama de flujo para mapear las interacciones clave y garantizar una navegación intuitiva en la plataforma. Este proceso permitió estructurar las conexiones entre secciones y optimizar la experiencia del usuario. Con esta base, se creó un prototipo de baja fidelidad para validar los flujos y funcionalidades iniciales a través de pruebas con usuarios.
Estudio de usabilidad
Llevé a cabo dos rondas de estudios de usabilidad para evaluar la efectividad y accesibilidad de la plataforma PetMach en distintas fases de desarrollo. En la primera ronda, se analizaron prototipos de baja fidelidad, lo que permitió identificar problemas en la navegación, interacción y presentación de información esencial.
En la segunda ronda, se utilizó un prototipo de alta fidelidad para evaluar el flujo de adopción. Aunque la función de "match" para evaluar la compatibilidad entre la mascota actual y la nueva aún no estaba implementada, los usuarios destacaron la importancia de incluirla. Además, el feedback de esta ronda reveló detalles estéticos enfocados en el diseño UI, como la necesidad de mejorar los botones interactivos y optimizar las imágenes para lograr una experiencia más intuitiva y visualmente atractiva.
Descubrimientos de la Ronda 1
Claridad en la interacción
Los usuarios tuvieron dudas sobre qué elementos eran clickeables (por ejemplo, si debían hacer clic en el título o en el fondo de los perfiles de mascotas), lo que generaba confusión.
Descubrimientos de la Ronda 2
Necesidad de una función de "match"
Los participantes expresaron que les encantaria poder interactúar con esta función en acción cómo se determina la compatibilidad entre su mascota actual y la nueva.
Flujo de adopción poco intuitivo
Se detectó que la forma de mostrar los perfiles de mascotas y los pasos del proceso de adopción resultaba confusa y requería mejoras en la disposición de imágenes y botones.
Falta de retroalimentación visual
Algunos participantes no recibieron confirmaciones claras al agendar citas o completar formularios, lo que afectó la confianza en el sistema.
Guía de estilo
Desarrollé una guía de estilo visual para PetMatch que combina la calidez y la modernidad en su diseño. Se utiliza Comfortaa para los títulos, aportando una sensación acogedora, y Inter para el contenido, garantizando legibilidad y seriedad. La paleta de colores se centra en el naranja como tono principal, complementado con un azul opaco para textos y morado pastel en botones, lo que facilita la interacción. Además, se integran fotografías que destacan las cualidades de las mascotas y un efecto biselado con tornasol en los fondos de los títulos y tarjetas, brindando un toque contemporáneo.
Prototipo hi-fi
Tras recopilar y analizar el feedback de los estudios de usabilidad, se realizaron iteraciones clave en el prototipo de alta fidelidad de PetMach. Se mejoró la accesibilidad y se optimizaron elementos interactivos, incorporando botones más intuitivos y retroalimentación visual inmediata para facilitar la navegación. Además, se integraron imágenes de alta calidad y elementos gráficos dinámicos que resaltan la información esencial y guían al usuario a lo largo del proceso de adopción.
Aunque en esta versión no se implementó la funcionalidad de "match", se explicó detalladamente a los usuarios la lógica de hacer match. Se mostró cómo se perfila cada mascota en función de sus características—como personalidad, nivel de energía y necesidades especiales—y cómo estos datos se asociarán con las preferencias y requisitos del adoptante para ofrecer recomendaciones personalizadas.
El prototipo final de alta fidelidad de PetMatch integra flujos de usuario mas intuitivos que facilitan la navegación, selección de mascotas, así como la navegación en cada etapa del proceso de adopción. Estas adaptaciones permiten a los usuarios encontrar rápidamente mascotas compatibles, entender el proceso de adopción y acceder a recursos post-adopción, consolidando una experiencia fluida, personalizada y alineada con sus necesidades y expectativas.
Proceso de adopción hecho a tu medida
PetMatch Refugio ofrece un flujo de adopción lineal sencillo, eficiente y personalizado, adaptándose a las necesidades específicas de cada usuario, desde Home hasta la confirmación del proceso. La plataforma destaca la importancia de hacer match con la mascota ideal, permitiendo al adoptante filtrar opciones y acceder a perfiles detallados de forma intuitiva.
Tú perfil
Crea y gestiona un perfil personal, ofreciendo un control integral sobre el proceso de adopción. Con este perfil, el adoptante puede guardar mascotas favoritas, realizar un seguimiento de sus solicitudes y gestionar sus compras en la tienda virtual. Además, la participación en la comunidad de adoptantes, fortaleciendo el vínculo y la confianza en la experiencia global.
Navega libremente
PetMatch ha sido diseñada para que los usuarios exploren sin restricciones todos los perfiles de las mascotas disponibles. Gracias a un diseño claro y a filtros interactivos, el usuario puede encontrar rápidamente opciones que se adapten a sus preferencias. La estructura intuitiva permite una exploración fluida y continua, facilitando la toma de decisiones y la comparación de diferentes mascotas.
Menú fijo
El menú fijo, ubicado estratégicamente en la parte superior derecha, asegura que los usuarios tengan acceso constante a las secciones clave: Inicio, Adopta, Post-adopción, Apóyanos, Nosotros, Carrito y Perfil. Este elemento de navegación fijo refuerza la usabilidad, permite una rápida movilidad entre secciones, sin importar en qué parte del proceso se encuentre el usuario.
Responsive
Completamente responsive, garantiza una experiencia de usuario coherente y optimizada en cualquier dispositivo. La adaptabilidad del layout y la optimización de elementos interactivos aseguran que la información y funcionalidades se presenten de forma clara, manteniendo la accesibilidad y facilidad de uso en todos los contextos.
Todo lo que necesitas después de adoptar
PetMatch cuenta con una tienda virtual de accesorios, un directorio de veterinarios y una red de tiendas de alimentos, todas orientadas a apoyar el bienestar de la mascota y apoyar el refugio. Este ecosistema integral permite a los adoptantes acceder a servicios y productos que facilitan el cuidado continuo.
Perros, gatos y más
Creemos de que todos los seres vivos merecen una segunda oportunidad, PetMatch garantiza que cada mascota reciba el proceso de adopción adecuado, optimizando la compatibilidad con el adoptante y promoviendo un entorno seguro y responsable con información adaptada a las normativas y requisitos regionales.
Consideraciones de Accesibilidad
Transiciones inteligentes para una orientación clara
Implemente transiciones suaves y visualmente intuitivas al navegar entre secciones clave (por ejemplo, desde el Home a la sección "Adopta" o "Post-adopción"). Esto ayuda a que sepas en qué parte del proceso te encuentras, mejorando tu orientación y reduciendo la posibilidad de perderte.
Iconografía clara y texto alternativo
Utilice iconos universales, acompañados de texto alternativo para imágenes y títulos descriptivos. Esto asegura que, si usas lectores de pantalla o tienes dificultades visuales, puedas acceder a toda la información esencial sin perderte ningún detalle.
Retroalimentación visual inmediata
Cada acción clave, como agendar una cita o enviar el formulario de adopción, cuenta con mensajes y cambios visuales que confirman la acción. Esto refuerza la confianza y ayuda a saber que el sistema ha registrado correctamente tu interacción.
Impacto
PetMatch transforma el proceso de adopción al integrar un sistema de compatibilidad inteligente, permitiendo a los usuarios encontrar a su mascota ideal con base en preferencias personales y la compatibilidad con sus mascotas actuales. Esta funcionalidad no solo agiliza la adopción, sino que también genera mayor confianza y seguridad en la decisión. La plataforma no solo presenta información detallada sobre cada animal, sino que también crea una conexión emocional desde el primer momento, ademas de los recursos post-adopción, accesorios, alimentos y veterinarios.
"Está muy útil, está toda la información, y eso es importante porque tengo una gata; necesito saber que se llevará bien con el que adoptaré."
"Está muy específico todo, porque puedo seleccionar las características de mi mascota para encontrar una nueva." Citas de los usuarios.
Qué aprendí
El diseño de PetMatch me permitió explorar nuevas formas de aprovechar el espacio visual en una página web, adaptándome a las necesidades del usuario y a los distintos dispositivos. Aprendí que el proceso de iteración y pruebas con usuarios es clave para perfeccionar la experiencia de navegación y reforzar el valor emocional del producto. Además, trabajar con un diseño responsive no solo presentó retos técnicos, sino que me ayudó a comprender cómo cada cambio en tamaño y disposición afecta la percepción y usabilidad de la interfaz. La emoción de los usuarios al ver cómo el sistema de compatibilidad les facilitaba la adopción reafirmó la importancia de diseñar soluciones que no solo sean funcionales, sino que también generen un impacto positivo y significativo en sus vidas.
Próximos Pasos
Desarrollar la funcionalidad de compatibilidad
Implementar el sistema de match que permita evaluar la compatibilidad entre el adoptante, su mascota actual y los animales en adopción. Este desarrollo garantizará recomendaciones más precisas y facilitará decisiones informadas, aumentando la tasa de adopciones exitosas.
Realizar pruebas de usabilidad con la funcionalidad de match
Una vez desarrollado el sistema, será esencial testearlo con usuarios reales para medir su efectividad, asegurando que la experiencia de adopción siga siendo intuitiva y que las sugerencias sean acertadas y confiables.
Explorar nuevas oportunidades de apoyo post-adopción
Ampliar las funcionalidades de la plataforma para fortalecer la comunidad de adoptantes, ofreciendo más recursos y asesoramiento que faciliten la adaptación del nuevo integrante del hogar.
bottom of page