/SCL019-social-network

Repositorio tercer proyecto para cohort SCL019 de Santiago de Chile. VER -> https://lunaconstanza.github.io/SCL019-social-network/src/index.html

Primary LanguageJavaScript

Red Social "Girls Gamers"

Índice

1. Introducción

Al notar que la población femenina gamer esta en aumento, algunas veces las usuarias querían participar en squad (equipos) femeninos, no obstante aun no es fácil encontrar compañeras con los mismos intereses en juegos o con horarios similares por lo cual nuestra red social tiene como finalidad poder conectar a estas personas que se identifican como mujer en el mundo gamer y que les interese formar squad entre ellas.

1.1 Definición del proyecto

Nuestro proyecto se hizo basado en SPA (Single Page Aplication) y HTML dinámico como también CSS grid (comenzamos a diseñar con Mobile First lo cual lo vuelve responsive) y asi tambien el uso de Firebase por primera vez.

1.2 Imagen final del sitio.

En las siguientes imagenes mostraremos nuestro sitio.

  • Comenzamos por la pantalla de inicio en la que usamos nuestro logo para la bienvenida de la usuaria.

inicio

  • Pasa a la pagina de login en el cual la usuaria puede ingresar a su cuenta, en la cual tambien puede recuperar su contraseña o crear una nueva cuenta.

login login

  • Pagina de registro, esta solicitara los datos necesarios para autenticarse en nuestro sitio.

register

  • Una vez los datos han sido bien ingresados y se ha confirmado la creacion de cuenta desde el correo, ingresamos al muro; donde podremos publicar post, eliminarlos y dar/quitar like.

muro

  • El diseño es responsive por lo cual se adapta a diferentes tamaños de pantalla.

Para móvil

Responsive Responsive Responsive

2. Investigación UX

Para poder conocer a nuestro público objetivo usamos la herramienta Forms_Google, con esto logramos acotar más la información que teniamos con anterioridad.

  • Adjuntamos el link de encuesta. Este es el formulario con los resultados obtenidos para nuestra investigación.

¿Quiénes son los principales usuarios de producto?

  • R: Cualquier persona que se sienta mujer y juegue de modo online en cualquier plataforma digital, además que se sienta cómoda al compartir con más mujeres y en la mayoria dentro del rango de 21 a 38 años según nuestras estadísticas.

3. Diseño UI

3.1 Prototipo baja fidelidad

En nuestro diseño de baja fidelidad, lo hicimos colaborativamente desde zoom y hecho directamente en Abode Ilustrator. A conticuacion imagenes del resultado de nuestro trabajo.

Sketch Sketch Sketch

3.2 Testeo de Usabilidad

Para lograr un buen resultado durante el transcurso de creación de nuestro proyecto realizamos dos testeos a traves de encuestas de Forms_Google con los cuales logramos iterar lo necesario.

  • He aquí el link del primer testeo.
  • He aquí el link del segundo testeo.

3.3 Prototipo de alta fidelidad

Por medio de la aplicación Figma preparamos nuestro prototipo de alta fidelidad.

Alta_FidelidadAlta_Fidelidad Alta_Fidelidad

3.4 Historias de Usuarios

En este proyecto detallamos 7 "historias de usuarios" con el fin de visualizar y reducir todas las necesidades que la creaccion de esta redsocial pudiera necesitar, lo realizamos de forma colaborativa con la herramienta Project que provee Github.

  • Adjuntamos link de nuestro project de Github.

Herramienta Issues de GitHub Issues

Herramienta Milestones de GitHub Issues

Historias de usuario en proceso Issues

4. Herramientas de Elaboración.

Para este proyecto utilizamos:

  • HTML, CSS, JS.
  • Firebase
  • Adobe Ilustrator