- 1. Definición del producto
- 2. Historia de usuarios
- 3. Prototipos
- 4. Test de usabilidad
- 5. Objetivos de aprendizaje
- 6. Objetivos de aprendizaje
Definición del problema
Con las mejoras en el flujo de datos a partir de tecnologías como 4G y 5G, el crecimiento de contenido audiovisual variado, de calidad y asequible a través de plataformas de streaming, se están creando comunidades de discusión sobre series, películas, documentales, cortometrajes, etc., donde las opiniones generan un valor sobre cada contenido para el usuario influenciado las decisiones sobre lo próximo que verá y al tiempo le permite compartir con personas que tienen intereses afines.
Perfil del usuario
Nuestros usuarios son personas entre los 18 y los 50 años tiene un interés por las películas, series y demás contenido audiovisual, que tienen acceso a las plataformas de streaming como Netflix, Disney +, Amazon Prime o Hulu o servicios de televisión o que frecuentan el cine, y a quiénes les gusta compartir y comparar opiniones sobre estas producciones.
Nuestros usuarios abarcan desde aquel que se dedica profesionalmente a hacer reviews hasta personas que solo buscan aportar su opinión o una buena recomendación. Quieren poder agregar recomendaciones de otros a su lista de pendientes, y agregar una lista donde aparezca aquello que vio y quiere recomendar a la comunidad o comentar, participar en discusiones, poder buscar una película por su título ver las reviews asociadas y darles like, saber quién escribió la reseña (y si le gusta poder seguirlo).
- H1: El usuario se puede loguear o registrar
- H2: El usuario puede realizar posts y visualizarlos en su muro
- H3: El usuario podrá ingresar a su perfil y ver su información general
- H4: El usuario tendrá más opciones para interactuar en la red social
Prototipos de baja fidelidad
.jpg)
.jpeg)
Prototipos de alta fidelidad
Movil: Figma Mobile
Desktop: Figma Desktop
Tablet: Figma Tablet
Paleta de colores
.jpeg)
Herramientas de apoyo
Figma - Prototipado Flaticon - Iconos Unsplash - Imágenes Content Reel - Avatar
En los tests de usabilidad que se realizaron con nuestras compañeras y coach se identifico que la paleta de colores que estabamos utilizando era la correcta, les gusto el diseño de la página, como sugerencias nos dijeron que pusieramos la letra mas grande, adicional que le cambiaramos el color si era un link, y que el fondo del timeline fuera diferente al tono blanco para que la experiencia visual del usuario fuera mejor. El usuario interactua con la pagina de la siguiente manera:
- Primero el usuario entra a una pagina de Bienvenida a la red social donde puede ingresar.
- Segundo encuentra una sección donde se puede loguear, tiene la opción de crear una cuenta o entrar con Google, adicional tiene la opción de recuperar la contraseña si la ha olvidado.
- Tercero al haberse logueado ya puede ingresar al timeline, donde puede realizar una publicación teniendo en cuenta tres categorias: Películas, series o documentales. Además puede dar o quitar like a otras publicaciones.
- Cuarto tiene una sección de perfil, donde puede cambiar su foto, agregar una biografia, y ver sus publicaciones, las cuales puede editar o eliminar.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- History API.
- localStorage.
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos primitivos y no primitivos.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | |tags)
- Organización en Github (projects | issues | labels | milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.
Daniela Romero Vera @DanielaRomeroV
Clara Escobar Sarmiento @Claraescobar123
Diana Catalina Olarte @dcoa