lim-2018-05-bc-core-pm-socialnetwork

IDEAS

educadores compartiendo inspiración

Índice

• Valores y metodología ágil: Exposición de los valores que nos definen como equipo y nuestra metodología de trabajo.

• UX design: Revelación de los pasos que recorrimos para entregar un prototipo pensado en la experiencia de usuario.

• UI design: Argumentación de los criterios seleccionados para definir el diseño de nuestro prototipo.

• Front end: Presentación de las motivaciones que nos llevaron a tomar decisiones al momento de desarrollar el código de nuestro proyecto.

• Implementación: Proposición de como acceder a este proyecto y los requerimientos de instalación.

---

Prueba nuestro demo aquí: https://debbievejarano.github.io/lim-2018-05-bc-core-pm-socialnetwork/src/

Valores y metodología ágil

Si quieres conocer cómo nos organizamos da click aquí.

UX design

Revisa nuestro informe completo de UX.

Etapas

Actividades

Definición del producto

Aquí respondemos las interregantes de nuestro cliente:

• ¿Cuáles son los elementos básicos que tiene una red social?

  Un login para poder registrarse e iniciar sesión, un muro para que los usuario puedan postear contenido y la opción de buscar personas para poder seguirlas

• ¿Quiénes son los principales usuarios de producto?

  Educadores de los niveles inicial, primaria y secundaria entre 25 y 45 años de edad que se encuentren laborando en las distintas regiones del país y cuenten con smarthphone y/o computadora.

• ¿Cómo descubriste las necesidades de los usuarios?

  En primer lugar, identificamos el objetivo de nuestra investigación. Para ello, segmentamos a clientes potenciales mediante estadísticas y brainstorning. Ahí nos dimos con una gran sorpresa, había más de medio millón de docentes en nuestro país y ninguna aplicación móvil especializada que los conecte entre ellos.

  Luego, postulamos algunas hipótesis y con ello armamos una guía de entrevista en profundidad que aplicamos poco después. También nos apoyamos de encuestas para darle solidez, a nivel cuantitativo, y obtener datos concretos.

  Finalmente, sintetizamos la información como equipo en un user persona.

• ¿Qué problema resuelve el producto para estos usuarios?

  Ideas es una comunidad de educadores que facilita inspiración para la realización de sesiones de clase y trabajo en el aula.

• ¿Cuáles son los objetivos de estos usuarios en relación con el producto?

  • Encontrar inspiración para la elaboración de sus sesiones de clase.

  • Optimizar el tiempo que les toma preparar una sesión de clase.

  • Conocer la creatividad de otros docentes para replicarla en el aula.

  • Encontrar fácilmente ideas de como abordar temas en específico.

  • Enterarse de novedades en el sector educativo.

• ¿Cuáles son las principales funcionalidades del producto y cuál es su prioridad?

  La prioridad es poder compartir sesiones de clase como pdf o imágenes sin ningún tipo de problema.

  Las funcionalidades son:

  • Facilitar el registro de usuarios con una interfaz que sea entendible.

  • Facilitar el intercambio y editado de ideas, posts, imágenes, etc entre los docentes registrados.

  • Que los usuarios que publiquen sus posts puedan sentir el apoyo a su idea con un like de otros docentes registrados y no registrados.

  • Que nuestros usuarios se puedan agregar como amigos y hacer de su red de colegas mucho más amplia.

• ¿Cómo verificaste que el producto les está resolviendo sus problemas?

  Siempre regresamos a revisar el user persona y además tuvimos que hacer uso de técnicas como user test y tree test.

• ¿Cómo te asegurarás que estos usuarios usen este producto?

  En primer lugar, verificando la arquitectura de la información con la técnica de tree test y con encuestas esporádicas para conocer la opinión de mis usuarios. ¡Es importante el feedback constante del usuario final!

  Benchmark

  En esta sección presentamos las principales redes sociales específicas y no específicas del mercado:

Para mayores detalles visita nuestro informe UX.

Entrevistas con usuarios

En esta sección presentamos el resumen de entrevistas con usuarios: Para mayores detalles visita nuestro informe UX.

Si deseas ver el video de la aplicación de esta técnica dale click aquí.

Prototipos en alta fidelidad

En esta sección presentamos el link y screenshots del prototipo en alta fidelidad. Las deciones de tipografía, color y otros se especificarán en el área de UI Design.

Dale click a nuestro prototipo mobile completo en Adobe XD

Testing con prototipo

En esta sección exponemos las conclusiones del testing del prototipo en alta fidelidad con usuarios:

En el login, entendieron de qué iba la aplicación. Sin embargo, a algunos usuarios no les quedo claro que haya dos opciones con la palabra ingresa y además que exista la opción de registrarse con la indicación “usuario”. Eso les hacia considerar la opción de solo colocar su nombre. Por ende, decidimos reforzar la marca con un tagline, incluir solo una opción de ingresa y reemplazar la palagra “usuario” por “correo electrónico”.

En general, se comprendió. Por otro lado, se concluyó que en el perfil sería atractivo que los usuarios tengan la opción de implementar más información acerca de ellos. Con respecto a la sección de seguidos, resaltó la sugerencia de poder bloquear o escoger ver primero.

A continuación agregamos el link a una prueba con usuario.

Testing con producto HTML

En esta sección exponemos las conclusiones del testing del prototipo en HTML con usuarios:

En el login, los usuarios mostraron confusión en la parte de confirmar contraseña ya que basta con que escriban más de 6 caracteres para que se marque como correcto. Además, no todos lograron observar la opción de registrase a primera vista.

Por otra parte, confirmaron que sería más atractivo que en el panel de noticias hubiese la opción de colocar fotos y comentar publicaciones.

Finalmente, al inicio se pudo entender que era una app para docentes; sin embargo ya en sesión se perdio un poco el objetivo de la red social.

Técnicas

Para la búsqueda de información

• Brainstorming
• Benchmark

Para el descubrimiento del perfil y necesidades del usuario

• Entrevistas en profundidad

Para el diseño de interacción:

• lucidchart (Diagramas de flujo)

Para el diseño visual:

• Sketch
• Prototipado

Para el test del diseño:

• user test (Prueba con usuario)

Herramientas

Para el prototipado en alta fidelidad:

• Adobe XD

Para la arquitectura de la información

• CmapTools

Para maquetación y diseño

• Adobde Illustrator

UI design

Ingresa a nuestra presentación de marca.

Front end

Decidimos trabajar en vanilla javascript porque la curva de aprendizaje para usar frameworks como Angular o Vue nos iban a demandar más tiempo, con el que no contabamos.

Estructuramos un boilerplate contemplando una carpeta para tests y otra para el desarrollo del proyecto en sí.

Implementación

Ejecutar la aplicación localmente

Necesitas instalar:

• Git Bash Luego, debes clonar este repositorio en tu equipo

  git clone https://github.com/DebbieVejarano/lim-2018-05-bc-core-pm-socialnetwork.git
  

Instala dependencias

Necesitas instalar

• Node.js®

Luego, ejecuta el comando npm install

npm install

Finalmente, este proyecto esta provisto de tests que puedes ejecutar con el siguiente comando ``` npm test