- 1. Introducción
- 2. Producto
- 3. Historias de Usuario
- 4.Proceso de Diseño
- 5. Testeos usabilidad
- 6. Diagrama de flujo
- 7. Boilerplate
- 8. Aspectos a mejorar
- 9. Planificación
Lofche significa "Comunidad" en el idioma Mapudungun. ¡Y eso es lo que somos! Una comunidad para averiguar todas aquellas cosas que no sabemos, aquellas cosas que buscamos y no encontramos. ¡Ayuda y conexión constante con tu ciudad y las almas que viven en ella!
Para visitar y conocer Lofche, haz click aquí..
Red social dirigida a personas que pertenezcan a una comunidad, vecindad o barrio, que deseen conectar y generar redes de apoyo.
Personas de un rango de edad de los 20 a los 40 años que busquen integrarse más a su comunidad y crear lazos colaborativos.
Genera un espacio en donde los miembros de una comunidad barrial/vecindad puedan resolver inquietudes, solicitar información, ayudar a vecinos que lo necesiten y generar redes de apoyo.
Como vecin@ quiero una página en donde pueda comunicarme con las personas de mi barrio.
Criterios de aceptación:
- El usuario podrá acceder a una página dirigida a la conectividad barrial.
- El usuario podrá ver información de qué trata la página (red social).
- La página podrá visualizarse desde cualquier dispositivo.
- Historia en prototipado de baja fidelidad.
- Historia en prototipado de alta fidelidad.
Como usuario quiero poder registrarme a la página.
Criterios de aceptación:
- El usuario podrá acceder a la opción de registrarse.
- El usuario podrá registrarse con Google.
- El usuario podrá registrarse con Facebook.
- El usuario podrá registrarse en la página.
- El usuario recibirá verificación de su registro en su correo electrónico.
- Historia en prototipado de baja fidelidad.
- Historia en prototipado de alta fidelidad.
Yo como usuario quiero Iniciar Sesión para ingresar a la página.
Criterios de aceptación:
- El usuario podrá acceder al formulario para iniciar sesión.
- Podrá iniciar sesión con cuenta de Google.
- Podrá iniciar sesión con cuenta de Facebook.
- Una vez iniciada la sesión debe llevar al muro de la web.
- Historia en prototipado de baja fidelidad.
- Historia en prototipado de alta fidelidad.
Como usuario quiero postear publicaciones para que mis vecinos las vean y le den like (comentar, guardar publicación, notificaciones).
Criterios de aceptación:
- El usuario podrá acceder a sección en donde aparezca el muro de publicaciones.
- Las publicaciones se verán por fecha y hora de posteo.
- Historia en prototipado de baja fidelidad.
- Historia en prototipado de alta fidelidad.
Validaciones
- Al publicar, se debe validar que exista contenido en el input.
Comportamiento
- 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.
Como usuario quiero tener un perfil para que mis vecinos me conozcan (nombre, nombre de usuario, foto, aporte/emprendimiento).
Criterios de aceptación:
- El usuario podrá acceder a una sección de la página en donde se pueda editar su perfil.
- El usuario podrá editar su nombre.
- El usuario podrá editar su nombre de usuario.
- El usuario podrá colocar una foto de perfil.
- El usuario podrá colocar información de su aporte a la comunidad .
- Historia en prototipado de baja fidelidad.
- Historia en prototipado de alta fidelidad.
- 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).
La lluvia de ideas en el desarrollo de este proyecto dio la creación de prototipos de baja fidelidad en papel y lápiz como también en invision. Como también a prototipos de alta fidelidad en Figma.
Para visualizar este prototipo en su página, haz click aquí.
El prototipo de alta fidelidad lo puedes visualizar aquí.
Utilizando el prototipo de alta fidelidad, se realizó el testeo de usabilidad y de diseño en Maze, hecho con 11 testers. En general, recibimos buenos comentarios respecto a la página, tanto en lo funcional como en lo gráfico. Sin embargo, implementamos Con ese feedback se recopilar respuestas en las que nos basamos para algunas mejoras en el proyecto final. Uno de los cambios hechos fueron los siguientes:
- Cambio de logo a uno más cercano al nombre de la red social.
- Se cambió el texto de bienvenida por uno más cercano.
- Se modificó el formulario de registro de la página para que fuera maś conciso.
Para visitar el detalle de los resultados de los testeos de usabilidad haz click aquí.
Este proyecto se desarrolló con tecnologías web con los siguientes lenguajes: HTML5, CSS y Javascript (ES6). Siendo el último, el lenguaje más utilizado en este trabajo.
Funcionales
- Implementar vista de "Amigos" y "Notificaciones" a la red social.
- Funcionalidad y vista de perfil de amigos.
- Agregar amigos y que sus posts sean visto en el muro del usuario logeado.
- Agregar fotos a los posteos del muro.
- Se modificó el formulario de registro de la página para que fuera maś conciso.
Técnicos
- Implementar History API.
- localStorage.
- Testeos de funciones firebase.
- Testeos de funciones firebase con Mocking.
Desarrollamos un sistema de trabajo según los tiempos y necesidades de cada una de las integrantes del grupo, simulando un horario laboral dentro de lo posible. La planificación la implementamos con Trello, una herramienta de gestión de proyectos. Para conocer en detalle nuestra planificación, haz click aquí.
