Problema
Adoptar es difícil aunque sobren animales esperando
La información de los refugios pequeños está dispersa en Instagram y WhatsApp, las respuestas tardan o no llegan, y quien adopta no sabe qué mascota encaja con su hogar.
← Proyectos / Caso de estudio · App móvil y web
Una app para encontrar la mascota que encaja contigo.
- Rol
- Diseño UX/UI Proyecto individual
- Duración
- 5 días 7 al 11 de octubre de 2026
- Contexto
- Bien social Certificado de Diseño UX de Google
- Herramientas
- Figma
Pantallas de la app · Desliza para explorar
Solución
Un solo lugar, con un match que se explica
Una app, con versión web, que reúne los refugios, recomienda mascotas según el estilo de vida y permite solicitar la adopción y agendar la visita en pocos pasos.
Resultado
38 de 40 intentos completados sin ayuda
Cinco personas probaron la app y la web. Las dos quedaron bien valoradas (4,6 y 4,5 sobre 5) y lo que pidieron mejorar se resolvió en una segunda versión.
01 · Investigación
La gente quiere adoptar, pero el proceso la frena
Investigación de escritorio, sin entrevistas en vivo: reportes de refugios, encuestas publicadas, reseñas de usuarios de Petfinder y datos oficiales de Colombia.
767
animales del centro La Perla, en Medellín, llevan entre 5 y más de 10 años esperando una familia.
Alcaldía de Medellín
67,6%
de quienes no adoptaron buscaban características concretas en su mascota.
Faunalytics
86%
de 123 reseñas de Petfinder son de una estrella: refugios que no responden y anuncios viejos.
Trustpilot
10,5%
de las adopciones fracasa en seis meses, sobre todo por conducta, vivienda o tiempo.
American Humane
Información dispersa
Las mascotas están repartidas entre Instagram, WhatsApp y muchos refugios pequeños.
No saber cuál encaja
Miedo a elegir un animal con demasiada energía o que no conviva con la familia.
Refugios que no responden
Anuncios desactualizados: el animal ya fue adoptado o nadie contesta.
Solicitudes largas e invasivas
Se repiten en cada refugio y no explican por qué piden los datos.
Parte de los datos viene de Estados Unidos y algunas encuestas son antiguas; las cifras de Colombia son de fuentes oficiales y prensa.
02 · Personas
Dos personas y un mismo recorrido roto
Valentina adopta por primera vez; Andrés ya tiene mascota y familia. Los dos se frenan en los mismos tres momentos: buscar, saber si el animal sigue disponible y solicitar.
Valentina
Adoptante primeriza · 27 años · Laureles, Medellín
«Quiero un perro, pero no sé cuál encaja con mi apartamento y mi horario.»
Objetivos
Una mascota apta para apartamento, con pasos, costos y requisitos claros y una respuesta rápida.
Frustraciones
Información dispersa en redes, miedo a problemas de conducta y formularios invasivos.
Andrés
Papá con experiencia · 41 años · Envigado
«Ya tenemos una gata. Necesito saber que el nuevo perro se llevará bien con ella y con los niños.»
Objetivos
Filtrar por niños y gatos, saber si el animal sigue disponible y agendar la visita sin llamadas.
Frustraciones
Solicitudes repetidas, anuncios de animales ya adoptados y poca información del temperamento.
- 01
Decidir adoptar
Ilusionada e insegura
OportunidadQuiz de estilo de vida
- 02
Buscar
Abrumada
OportunidadCatálogo unificado con filtros
- 03
Elegir
Dudosa
OportunidadDisponibilidad y etiquetas verificadas
- 04
Solicitar y visitar
Frustrada e ignorada
OportunidadPerfil reutilizable y agenda en la app
- 05
Llevar a casa
Nerviosa y feliz
OportunidadGuía de primeros días (versión futura)
03 · Del recorrido al diseño
Cuatro flujos, primero en gris y después en color
Los recorridos definieron cuatro flujos para la primera versión. Con ellos armé siete wireframes y luego el diseño en alta fidelidad, con Material Design 3.
Flujo 1
Empezar con un match
Elegir ciudad y responder un quiz corto sobre el hogar.
Flujo 2
Buscar y filtrar
Catálogo unificado con etiquetas de compatibilidad y disponibilidad.
Flujo 3
Conocer a la mascota
Fotos, historia, temperamento y porcentaje de compatibilidad.
Flujo 4
Solicitar y agendar
Perfil de adoptante reutilizable, solicitud corta y visita al refugio.
Baja fidelidad
Siete wireframes que siguen el recorrido de Valentina, conectados como prototipo.
Alta fidelidad
Las mismas pantallas con el sistema de diseño. El prototipo final tiene 17 pantallas interactivas.
La app va primero porque la gente busca mascotas desde el celular y las notificaciones resuelven el «nunca me respondieron». El seguimiento después de la adopción quedó fuera de esta versión.
04 · Decisiones
Tres decisiones que sostienen la app
Decisión 01
Un match que se explica
El quiz pregunta por el hogar, el estilo de vida y la mascota ideal. Cada mascota muestra un porcentaje de compatibilidad, y una pantalla aparte explica de dónde sale: qué coincide y qué le resta.
Responde a
No saber cuál encaja
Decisión 02
Un solo catálogo, con la disponibilidad a la vista
Las mascotas de varios refugios están en un mismo lugar, con filtros, etiquetas como «apto con niños» y el estado de disponibilidad en el perfil.
Responde a
Información dispersa y anuncios viejos
Decisión 03
Solicitud corta y visita agendada en la misma app
El perfil de adoptante se llena una vez y se reutiliza. Una nota explica por qué se pide cada dato, y la visita al refugio se agenda sin llamadas.
Responde a
Solicitudes largas y refugios que no responden
05 · Versión web
La misma adopción, en escritorio
Nueve pantallas a 1920 px que reutilizan los componentes de la app: un cambio en el sistema de diseño se refleja en las dos versiones.
Inicio
Catálogo con filtros en barra lateral
Perfil de la mascota con galería
Filtros
En barra lateral, en lugar de una fila horizontal.
Fotos
Galería con miniaturas, en lugar de carrusel.
Solicitud
Solicitud y visita en una sola página, con el resumen al lado.
Notificaciones
Panel desplegable bajo la campana, no una pantalla.
06 · Identidad visual
Cálida, clara y accesible
La dirección visual salió de un tablero de inspiración generado con Google Stitch: amigable, sobre Material Design 3 y con íconos redondeados.
Logo final
La «u» se convierte en una huella: una almohadilla con ranura en U y cuatro dedos en arco. Se redibujó dos veces hasta parecer una huella real.
Exploración
Otros caminos que salieron de los bocetos a mano. También se probaron los nombres Parce, Mi Llave, Huellita y Match Peludo.
Variaciones del logo
Todas salen del logo final: con la huella como isotipo, en una sola tinta, sobre los colores de marca y como ícono de la app.
- #2A9D8FTealColor de marca
- #1B665DTeal oscuroAcciones principales
- #E8743BNaranjaSolo decoración
- #B3592CNaranja fuerteBotones y favorito
- #FFF8F1CremaFondo
- #2B2B2BNeutroTexto
Tipografía
- Nunito Sans
- Títulos
- Inter
- Texto y etiquetas
Sistema de diseño
Variables, estilos y componentes de Figma compartidos por la app y la web. Todos los textos de la interfaz usan uno de los 10 estilos.
- 18colores base en uso
- 20roles de color en uso
- 10estilos de texto
Accesibilidad
El naranja se ajustó hasta cumplir contraste AA
4,31 : 1→4,79 : 1
Naranja de los botones con texto blanco, de #BE5F30 a #B3592C.
1,56 : 1→3,98 : 1
Borde de los campos de texto, para superar el mínimo de 3 : 1 en controles.
3,0 : 1→4,79 : 1
Corazón de favorito sin marcar. El naranja claro queda solo para decoración.
Componentes
Botones en cinco estilos, chips, insignias de compatibilidad, favorito, tarjeta de mascota y navegación inferior.
07 · Pruebas de usabilidad
Cinco participantes, cuatro tareas, en la app y en la web
Con los dos prototipos de alta fidelidad. Tres personas empezaron por la app y dos por la web; al final respondieron cinco frases de 1 a 5 y dos preguntas abiertas por plataforma.
Tasa de éxito
38/40
intentos completados sin ayuda, sumando la app y la web.
App
4,6/5
de valoración promedio de la app en las cinco frases del cuestionario.
Web
4,5/5
de valoración promedio de la web en las mismas cinco frases.
Seguridad
5/5
en «Me sentí seguro/a usando TuHuella», tanto en la app como en la web.
Las tareas
Del quiz al estado de la solicitud
- T1
Responder el quiz hasta llegar al catálogo.
App 5 de 5Web 5 de 5 - T2
Abrir el perfil de Luna.
App 5 de 5Web 5 de 5 - T3
Enviar la solicitud y agendar la visita.
App 4 de 5Web 4 de 5 - T4
Revisar el estado de la solicitud.
App 5 de 5Web 5 de 5
Como cada prototipo tiene un solo camino conectado, lo que separa a la app de la web son las dudas, no la tasa de éxito. Los tiempos son estimados y los campos del prototipo no aceptan texto.
Los hallazgos más importantes
- 01El quiz debe empezar vacío: las respuestas ya marcadas, un resto de los mockups, hacían que el resultado no se sintiera propio.
- 02Lo elegido debe verse reflejado: las preguntas de respuesta única tienen que excluirse entre sí y el resumen de la visita mostrar el día y la hora escogidos.
- 03El porcentaje necesita su explicación en todas partes: en la web, cuatro de cinco buscaron «Ver por qué» y no estaba en el prototipo.
Lo que funcionó
- Los cinco leyeron bien el estado «En revisión» con su línea de tiempo.
- Nadie dudó con «Paso 1 de 3» ni con las horas en a. m. y p. m.
- La nota «Por qué pedimos esto» del formulario fue valorada.
Iteración después de las pruebas
El match ahora refleja exactamente lo que la persona eligió
Resolví los tres hallazgos más graves y casi todos los demás en una segunda versión, guardada aparte para poder comparar el antes y el después.
Quiz
Antes llegaba con respuestas marcadas. Ahora empieza vacío y cada pregunta de respuesta única desmarca la opción anterior.
Por qué es compatible
Antes la explicación era genérica. Ahora se arma con las respuestas del quiz y dice qué resta el 8 %.
«Ver por qué» en la web
Antes el enlace no estaba conectado en el prototipo web. Ahora abre un panel con los criterios del quiz, la convivencia con otros perros y lo que resta el 8 %.
Con quién vives
Opciones «Solo/a», «En pareja» y «Con familia u otros adultos», más una pregunta por niños y mascotas.
Sin preguntas repetidas
El tipo de vivienda se toma del quiz y ya no se vuelve a pedir en la solicitud.
Visita con fecha real
El resumen muestra el día y la hora elegidos, y los días incluyen el mes.
Web más clara
«Enviar» al final del paso, «Mis solicitudes» en el menú y sin porcentaje antes del quiz.
08 · Cierre
Lo que aprendí y lo que sigue
Aprendizaje
Un porcentaje sin explicación genera desconfianza.
Llamarlo «compatible» y mostrar el porqué lo vuelve útil. Y la próxima vez probaría con usuarios desde los wireframes, para encontrar antes los problemas graves que aparecieron en alta fidelidad.
Próximos pasos
- Desactivar «Siguiente» y «Enviar» hasta responder lo obligatorio.
- Diseñar el panel para refugios en la web.
- Adaptar la web a tablet y móvil.
- Seguimiento después de la adopción: guía de primeros días y contacto con el refugio.
Siguiente caso
Lecto