Skip to content

This social network aims to help homeless animals or animals caregivers who are looking for adoption. It allows you to log in, sign in, log out, post, edit and delete posts. This is a SPA that uses Firebase (auth, firestore and hosting) as a backend service. It is made with JavaScript (nodes), CSS (flex and grid) and HTML5.

Notifications You must be signed in to change notification settings

thatmare/Be-My-Friend

 
 

Repository files navigation

Be My Friend

Be My Friend es una aplicación diseñada para facilitar la adopción de animales en busca de un hogar. Nuestra plataforma te brinda la oportunidad de conocer a estas adorables criaturas y hacer una diferencia en sus vidas.

Con Be My Friend, podrás registrarte y crear una cuenta personalizada para comenzar tu viaje hacia la adopción. Una vez que hayas iniciado sesión, podrás crear y editar publicaciones sobre los animales que deseas adoptar, proporcionando información relevante sobre su especie, edad y personalidad.

La aplicación fue desarrollada como una Single Page Application con Firebase (Firestore, Authentication y Hosting) como servicio de backend y JavaScript vanilla.

UX Research

Realizamos la investigación de usuarios a cuidadores de animales, obteniendo los siguientes resultados:

  • Tener una página de bienvenida para explicar la aplicación.
  • Permitir redactar publicaciones para incluir información sobre: salud, edad, ubicación y especie de los animales, así como condiciones para adoptarlos.
  • Poder dar like a las publicaciones.
  • Poder subir fotos de los animales.
  • Tener servicio de mensajería para comunicarse entre adoptantes y adoptados.
  • Invitar a dar testimonios sobre los animales.
  • Formulario sobre el historial de los adoptantes (qué mascotas han tenido, alergías, qué animal buscan...).
  • Habilitar donaciones a refugios o asociaciones.

Historias de Usuario

Para el desarrollo de nuestra primera versión de la app, nos guiamos por las siguientes historias de usuario.

  1. Yo: Como usuario amante de las mascotas. Quiero: Poder visualizar una pagina de inicio con testimonios de mascotas (con fotos). Para: Saber si me interesa registrarme y conocer mas sobre la app y web.

  2. Yo: como usuario. Quiero: poder Iniciar de sesión. Para: interactuar con la pagina Be My Friend.

  3. Yo: Como nueva usuaria que quiere regitrarse. Quiero: Poder visualizar un form donde pueda ingresar mis datos. Para: Tener el perfil en la app.

  4. Yo: Como usuaria que quiere cerrar sesión. Quiero: Poder visualizar un menu con la opción de log out. Para: salir de la red social.

  5. Yo: Como usuario que quiero dar en adopción una mascota. Quiero: Poder publicar la mascota y añadir sus características. Para: Que otros puedan conocerla y se interesen.

  6. Yo: Como usuario amante de las mascotas. Quiero: Poder eliminar un post. Para: descartar información que no esté actualizada.

  7. Yo: Como usuario interesado en las mascotas. Quiero: poder editar un post. Para: que la información se muestre correctamente y actualizada.

  8. Yo: como usuaria de la red social. Quiero: poder dar/quitar like en los post. Para: indicar mis gustos en mascotas a adoptar.

Prototipos

Para los prototipos escogimos la siguiente paleta de colores con las consideraciones de tener una paleta de colores cálida para transmitir comfort, sin colores brillantes o saturados, pero con un color frío para acentuar.

image

Para el logo utilizamos la tipografía Fire Sans Condensed:

image

Y optamos por tipografía sans-serif para el resto de la aplicación:

image

Versión mobile:

image

image

image

Versión desktop:

image

image

image

Tests de usabilidad

Como resultado de los tests de usabilidad obtuvimos el siguiente feedback:

  • Colocar la imagen del usuario en los posts.
  • Los colores son adecuados.
  • Mejorar el contraste para los botones (Lighthouse).
  • Aumentar el tamaño de fuente para el área de testimonios, prototipo de desktop.
  • No queda claro para qué sirve la patita. Recomendaciones: mover la patita debajo del nombre de la mascota, separarla más del corazón de "me gusta", además de agregar una instrucción.
  • Corroborar tamaño de botones: deben ser del mismo ancho.

Definición de terminado

  • Debe ser una SPA.
  • Debe ser responsive.
  • Deben haber recibido code review de al menos una compañera de otro equipo.
  • Hicieron los test unitarios
  • Testearon manualmente buscando errores e imperfecciones simples.
  • Hicieron pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
  • Desplegaron su aplicación y etiquetaron la versión (git tag).

Autoras

About

This social network aims to help homeless animals or animals caregivers who are looking for adoption. It allows you to log in, sign in, log out, post, edit and delete posts. This is a SPA that uses Firebase (auth, firestore and hosting) as a backend service. It is made with JavaScript (nodes), CSS (flex and grid) and HTML5.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 80.0%
  • CSS 18.9%
  • HTML 1.1%