Community of Buildings

Índice

1. Definición del producto

1.1 Introducción

1.2 Objetivos

1.3 Alcance

2. Diseño de la interfaz de usuario

2.1 Prototipo de baja calidad

2.2 Prototipo de alta calidad

3. Comportamiento de la interfaz

4. Test de usabilidad

5. Página desplegada

Definición del producto

Introducción

Community of Buildings es una red social que nace desde los tiempos de pandemia, donde pudimos percibir mucho sobre nuestro entorno que estando en nuestras narices no lo veíamos. Todas aquellas personas que vivimos en comunidad, ya sea edificios o comunidad de casas, no nos damos cuenta que a veces la necesidad que necesitamos cubrir puede estar más cerca de lo que pensamos.

Objetivos

Es por ello que Community of Buildings quiere aportar a esta vida en comunidad, generando unión con los vecinos, comunicándose a través de mensajes en un muro para poder ofrecer a la venta, en arriendo, o bien regalando cualquier bien o servicio y dejarlo a disposición en su colectivo. Asi como también si alguna persona busca algo en específico también lo puede consultar a través del mismo muro. En resumen, la aplicación permite ofrecer y solicitar servicios, y a su vez permite crecer con nuestra comunidad de una forma amigable y siempre manteniendo sana convivencia.

Alcance

Esta aplicación responsive permite acceder desde cualquier dispositivo a partir en pantallas de 370 a 1200 px. Sus principales funciones son:

• Registro de usuarios y autenticación.
• Publicación de mensajes en el feed.
• Dar "me gusta" a las publicaciones de otros usuarios
• Editar y eliminar sus publicaciones.

Diseño de la interfaz de usuario

Historias de usuario

1. HU1 Home Permite al usuario poder iniciar sesión o dar click en SignUp para poder ingresar al formulario de registro. Iniciando sesión le permitirá acceder a la plataforma de la comunidad.

2. HU2 Sign Up Permite al usuario registrarse en la comunidad. Debe ser un correo electrónico válido, además de una contraseña con mínimo 6 caracteres y se comprueba que en ambos campos de contraseña sean iguales, en caso contrario lanza error.

3. HU3 Board El usuario puede publicar post, editar o eliminar sus publicaciones, y puede dar like a publicaciones del mismo o de otros usuarios.

Prototipos de baja fidelidad

1. HU1 Home.
2. HU2 Sign Up.
3. HU3 Board.

Puedes revisar nuestro prototipo de baja completo en el siguiente link: https://www.figma.com/file/DbGCvi8ILKpiRgfWGpCAyj/Prototipo-baja?type=whiteboard&node-id=1%3A425&t=31M1whLxKHmzc91F-1

Prototipos de alta fidelidad

1. HU1 Home.
2. HU2 Sign Up.
3. HU3 Board.

Puedes revisar nuestro prototipo de alta completo en el siguiente link: https://www.figma.com/file/PDQOkyGt5pxuF1BXv4bpxa/Proto-alta-(trabajo-entre-las-3)?type=design&node-id=34%3A602&t=bVdXHR60ll58zuZK-1

Comportamiento de la interfaz de usuario

• Login con Firebase:
  • Para el login y las publicaciones en el muro se utiliza Firebase
  • Creación de cuenta de acceso y autenticación con cuenta de correo y contraseña, y también con una cuenta de Google.
• Validaciones:
  • Solamente se permite el acceso a usuarios con cuentas válidas.
  • No pueden haber usuarios repetidos.
  • La cuenta de usuario debe ser un correo electrónico válido.
  • Lo que se escriba en el campo (input) de contraseña debe ser secreto.
• Comportamiento:
  • Al enviarse el formulario de registro o inicio de sesión, debe validarse.
  • Si hay errores, se deben mostrar mensajes descriptivos para ayudar al usuario a corregirlos.
• Muro/timeline
  • Al publicar, se debe validar que exista contenido en el input.
  • Al recargar la aplicación, se debe verificar si el usuario está logueado antes de mostrar contenido.
  • Poder publicar un post.
  • Poder dar y quitar like a una publicación. Máximo uno por usuario.
  • Llevar un conteo de los likes.
  • Poder eliminar un post específico.
  • Pedir confirmación antes de eliminar un post.
  • Al dar click para editar un post, debe cambiar el texto por un input que permita editar el texto y luego guardar los cambios.
  • Al guardar los cambios debe cambiar de vuelta a un texto normal pero con la información editada.
  • Al recargar la página debo de poder ver los textos editados.

Test de usabilidad

Recopilamos información de compañeras y familiares, percibiendo lo siguiente:

• Botón google: según la norma de marca, se recomienda utiliza la tipografía y logotipo entregado por ellos en su página oficial
• Los botones rojos son muy llamativos, cambiar por un color mas acorde a paleta de colores utilizada. Recordar que el rojo se utiliza más para advertencias o negaciones.
• Registro: agregar algunos comentarios en la interfaz sobre la validación de contraseñas
• Darle el mismo ancho a los botones en home
• Agregar tamaño de tipografía

Página desplegada

Puedes ver una demostración en vivo de la página aquí.