---

Monito es una plataforma web diseñada para personas que buscan alegrar sus hogares adoptando una bella mascota.

La interfaz intuitiva permite explorar la variedad de mascotas disponibles clasificadas por Tipo como: Perros y Gatos; Edad: Cachorros, Adultos y Mayores; Género: Hembra y Macho; por último Tamaño: Grande, Mediano y Pequeño. Los usuarios pueden ordenar los resultados para encontrar información relevante de cada mascota de forma rápida y eficaz. Además, la función de limpieza de filtros con un solo clic facilita la navegación y la personalización de la búsqueda. Monito es tu mejor aliado para encontrar a tu nuevo mejor amigo y llenar tu vida de mucho amor.

---

Monito es una plataforma web diseñada para facilitar la adopción de perros y gatos en situación de abandono. Identificamos que los procesos actuales para adoptar mascotas a menudo dependen de redes sociales, lo que alarga innecesariamente el proceso y desalienta a posibles adoptantes. Monito ofrece una solución tecnológica centralizada donde los usuarios pueden ver qué mascotas están disponibles para adopción, filtrarlas según sus preferencias y realizar el proceso de adopción de manera rápida y sencilla.

---

Para este proyecto, generamos un dataset de 24 mascotas utilizando inteligencia artificial. Cada registro incluye información como el nombre, tipo, edad, género, raza, tamaño, temperamento y una imagen asociada. A continuación, se muestra un ejemplo de un objeto de nuestro dataset:

Respuesta de Prompt:

Prompt Utilizado

El siguiente prompt fue utilizado para generar los datos del dataset:

---

### Historia de Usuario 1: Visualización de Mascotas *Como* usuario interesado en adoptar, *Quiero* poder ver un listado de las mascotas disponibles para adopción, *Para* conocer las opciones y decidir cuál se adapta mejor a mis necesidades.

• Definición de Terminado:

  • La plataforma muestra un listado de todas las mascotas disponibles.
  • Cada mascota se presenta con una imagen, nombre, breve descripción, y estado de adopción.

• Criterios de Aceptación:

  • El usuario puede ver todas las mascotas disponibles en la plataforma.
  • El usuario puede hacer clic en una mascota para ver más detalles sobre ella.

Historia de Usuario 2: Filtrar Mascotas

Como usuario interesado en adoptar,
Quiero poder filtrar las mascotas por tipo, edad, género, y tamaño,
Para encontrar rápidamente la mascota que mejor se ajuste a lo que estoy buscando.

• Definición de Terminado:

  • La plataforma permite filtrar las mascotas por diferentes criterios (tipo, edad, género, tamaño).

• Criterios de Aceptación:

  • El usuario puede aplicar filtros y ver solo las mascotas que cumplen con esos criterios.

  • Los filtros se pueden combinar para refinar aún más la búsqueda.
    
    

    

---

Prototipo de Alta Fidelidad

Hemos desarrollado un prototipo de alta fidelidad utilizando Figma, que define el diseño ideal para nuestra plataforma. Puedes revisar el prototipo aquí:

Link del Prototipo en Figma:

https://www.figma.com/design/tzOguU10RNCxgCoyWNCnot/Dataverse-Monito-Adoption?node-id=0-1&t=ZKcqDnSWgIBVPTDS-1

Proceso de Diseño

Nuestro proceso de diseño comenzó con la identificación del problema principal: la dispersión de la información sobre mascotas en adopción en varias plataformas y redes sociales. Luego de investigar las necesidades de los usuarios, desarrollamos un prototipo de alta fidelidad utilizando Figma. Durante el proceso, recibimos feedback de usuarios potenciales y realizamos iteraciones para mejorar la usabilidad y accesibilidad de la plataforma.

Creemos que Monito resuelve el problema central al ofrecer una plataforma accesible, fácil de usar y que agiliza el proceso de adopción, reduciendo el tiempo y esfuerzo requeridos por los adoptantes.

---

La implementación de la interfaz se realizó con HTML, CSS y JavaScript, siguiendo el diseño definido en el prototipo. Priorizamos las funcionalidades clave debido a las limitaciones de tiempo.

Además, la página web Monito ha sido diseñada para ser completamente responsive, asegurando una experiencia de usuario óptima en tres dispositivos clave: móvil, desktop y dispositivos medianos como tablets. Para lograr esta adaptabilidad, implementamos media queries que ajustan el diseño y los elementos de la interfaz según el tamaño de pantalla del usuario. Utilizamos Flexbox para estructurar y alinear los contenidos de manera flexible, lo que permite que los elementos se redimensionen y reorganicen fluidamente, proporcionando una navegación intuitiva y sin interrupciones sin importar el dispositivo utilizado.

Formato Mobile

Formato Tablet

Formato Desktop

---

Realizamos pruebas de usabilidad con usuarios reales para identificar problemas en la interfaz. Los problemas más destacados fueron el corroborar los test, el paso de la data a través de los archivos. Por otro lado realizamos mejoras como el diseño responsive e implementación de más de un filtro que fue lo solicitado.

---

Para garantizar la calidad del código, escribimos pruebas unitarias para las funciones que procesan, filtran y ordenan los datos. Utilizamos Jest como framework de testing, y logramos una cobertura del 70% en statements, functions, lines, y branches.