cdmx-2018-06-bc-core-am-data-dashboard's Introduction

Data Dashboard

Proceso de UX

Nuestro primer acercamiento lo haremos a través del proceso de diseño, donde pasamos por diferentes etapas como:

1. Descubrimiento e investigación

El proyecto consiste en generar una interfaz en la que se puedan manipular los datos de las distintas sedes de laboratoria y de donde se pueda extraer informacón específica ya sea de las generaciones, de las estudiantes, entre otras.

Nos acercamos a la TM de la Sede de México solicitandole una entrevista con el fin de conocer cuales son sus principales necesidades en cuanto a manipulación de los datos.

Según nuestra informante, Lucile Baladier, TM de la Sede México, actualmente Laboratoria no cuenta con una plataforma que permita la manipulación de esta información y la necesidad se cubre utilizando archivos en excel que no simplifican procesos y hacen más complicada la generación de algunos archivos, así como en análisis de la data.

Para Lucile el poder contar con una interfaz que optimice el proceso de manipulación de data es de suma importancia pues el análisis de esa data le permite proponer o tomar decisiones en las actividades de Laboratoria, por lo tanto entre más accesible, confiable y rápida sea la obtención de ésta información actualizada, hay un mayor margen de aplicabilidad en las labores cotidianas de Laboratoria.

Por nuestro lado el objetivo principal de quienes programaremos ésta interfaz es poder contruir un producto que además de cubrir las necesidades del personal que utilizará el programa hacerlo de una amigable y eficiente.

Usuarixs:

Los usuarios son principalemente los TM de las distintas sedes de laboratoria, sin embargo debido a que la data arroja información sobre el progreso de las Estudiantes, las diferencias entre sedes y generaciónes e incluso de la eficiencia del programa, es posible la interfaz sea de utilidad para todo el equipo de laboratoria, desde personal administrativo, coachs, tm, fundadores etc,. Lo anterior dependerá de que los propios TM permitan el acceso a otro miembros de equipo o no.

Necesidades de las usuarias:

Una interfaz amigable que permita la manipulación de diferentes tipos de data con rapidez y eficiencia.

Objetivos de las usuarias: Poder motitorear tanto el avance de las alumnas, como el de la sede y poder análizar si el trabajo que se está implementando se refleja de forma positiva en la preparación de las alumnas. Además poder tomar decisiones basandose en información tanto de la sede en la que se encuentran como comparandola con el resto de las sedes.

Pain points: Actualmente se tienen que hacer varios procesos para poder llegar a la información que se requiere, por lo que el proceso para extraer información especifica es tedioso, por otro lado excel cuenta con una interfaz poco amigable dificulta el análisis de la información.

Sentimientos: Frustración, sensación de tedio.

Técnicas usadas en esta fase: Entrevista semiestructurada.

Nos acercamos a la TM de la sede México Lucile Baladier con el fin de poder realizarle una entrevista, luego de darnos una cita se llevo a cabo y se adjunta en la siguiente liga.

https://drive.google.com/file/d/1CuIYTOwz32jD5Lg_i-Bbtp7PFU1xDJN-/view?usp=sharing

5. Objetivos del negocio: (Enlistarlo(s)) Construir una interfaz amigable que manipule los distintos datos que la TM requiere de una forma eficaz.

6. Motivaciones del negocio para el data dashboard:(Enlistarlo(s)) Poder manipular la data del cliente, generando un producto amigable para nuestras usuarias finales.

2. Síntesis y definición

(Dada la fase anterior de investigación, ahora vamos a tomar todos los datos más importantes y transformarlos en información valiosa para comenzar a orientarse a la solución. También vamos a entender lo que la empresa quiere de ese producto y comenzar a entender ambas visiones con el fin de encontrar un punto armónico)

1. Cuáles crees que son los datos más importantes a tener en cuenta para el Data Dashboard:

Sobre las estudiantes: su porcentaje de Avance, los temas y subtemas que ha desarrollado y los que no.

2. Lo que los usuarios esperan obtener:

Una interfaz que permita la manipulación de los datos de forma amigable y eficiente.

3. Insights: Contruir una interfaz totalmente personalizada con el tema de laboratoria.

4. Data proporcionada:

 -_Data relacionada a los cursos:_
 generaciones
 estudiantes
 avances
 temas
 tiempos

5. Insights del negocio:

3. Ideación

Se revisaron alguna plataformas educativas que se acercaban a lo que el usuario requería para Laboratoria. Se propone motrar una interfaz personalizada con el tema de Laboratoria.

4. Prototipado

(Esta es la fase creativa, donde se comienza a construir el Data dashboard con la información obtenida de las fases anteriores. Se reafirma crear la experiencia de usuario, donde la solución resuelve necesidades y facilita la vida)

5. User testing

Después de recibir el feedback del cliente, se determinó que el primer prototipo no cubría las necesidade del mismo, en primer lugar se redujeron el número de pantallas que se proponían, pues no todas presentaban información útil para la TM. De acuerdo a ésta información se da también preferencia a información de una sola sede, se eliminan las gráficas comparativas entre sedes,así como la ventana de alumnas que contenía muy poca información.

**6.Instalación

Para realizar modificaciones o contribuciones para mejorar o utilizar éste código requieres:

1.Instalar un Editor como: Visual Studio Code, Atom, Sublime, etc. 2.Intalar una Terminal como Git Bahs o utilizar la terminal de tu equipo de computo. 3.Forkear o clonal el repositorio a tu ordenador local desde: https://github.com/rxmstrd/cdmx-2018-06-bc-core-am-data-dashboard.git . 4.Instalar Node.js así como las dependencias del proyecto

Si requieres mejorar la testeabilidad del código puedes hacerlo incluyendo tus test en: 5.src/data.js

cdmx-2018-06-bc-core-am-data-dashboard's People

Contributors

Watchers

cdmx-2018-06-bc-core-am-data-dashboard's Issues

Feedback project 2 Data-dashboard

Documentación: Usar comentarios útiles en archivos de código js, css, html, textos que nos permitan entender métodos, propiedades, estructura en html por ejemplo! Al readme le hace falta la información sobre instalación y uso.
Eslint (estilo): Alexandra dio un pequeño taller donde les habló de uso de guía de estilos en js, configurando el archivo .eslintrc, ella les presentó la guía de estilos que usa Laboratoria, pongan atención en este tema para subir su nivel!
Funciones/modularidad: deberíamos buscar que la manipulación de la data (todas esas línea de código donde accedemos a propiedades específicas de nuestro json y donde las almacenamos en variables, o modelamos en estructuras de datos complejas, quede bajo la responsabilidad exclusiva de data.js. Este mismo punto afecta el nivel alcanzado en:
Arquitectura, donde aún no estamos separando responsabilidades o aplicando algún patrón de diseño.
Estructura de datos: No han organizado la data ha manera de estado como solicitaban los detalles de implementación, es ideal comenzar a modelar los datos, agruparla en arrays u objects.
Test: en este siguiente proyecto pongamos atención en el área del testing, tratemos de modificar la manera de desarrollar y orientar nuestro desarrollo a las pruebas que queremos pasar!
HTML: Semántica, utilizar etiquetas semánticas como main, article, section, aside, footer y desde el uso pensado de estas, ir expresando la arquitectura de la información!
Git: No están cumpliendo con el nivel 2 de git, que pide convenciones en la escritura de los commits, es decir que haya un estándar de escritura "los commits deben ser chicos y fácilmente abordables por un tercero", (ej. agrega funcion computeStudentsStats, agrega estilo de login, cambia insights de ux en readme) ustedes deberían llegar a un acuerdo al iniciar sus próximos proyectos para este tema. Por otro lado no veo ninguna contribución en el flujo de git de Edith, con lo cual no alcanzan el requisito de pull request.
UX:
Entrevistas: Veo que en el README de ux mencionan que utilizaron entrevistas semi estructuradas, pero no han documentado estos procesos y tampoco veo una mención explicita a estas, si me equivoco díganme!

Apliquemos el feedback obtenido, pongamos atención en todo lo relacionado con JS y HTML, en la medida que vayamos mejorando estas áreas de oportunidad también nuestros alcances serán mucho mayores. Cualquier duda o aclaración escríbanme!,

Segundo Sprin #help

Aplicar el Feedback al Sketch
Modificar Diagrama de Flujo
Json, Fetch, XHR

Feedback mejora Data Dashboard

Documentación: Bien por agregar instrucciones de instalación, sería bueno que fueran más específicas con respecto a instalar npm y correr el comando de npm install. También se agregaron algunos comentarios. Llegamos al nivel esperado en este punto.
ESLINT: Bien por incluir la configuración para la guía de estilos en el archivo .eslintrc 👍
Git: mejora en el estándar de escritura de commits, llegamos al nivel 2, para el 3 se necesitaban los pull request.
UX:
Entrevistas: sube al nivel esperado!
Alineación: Se agregaron cards, lo cual mejora la alineación, cuida la jerarquía de la data dentro de tus cards, ¿todos los datos son igual de importantes?

Buenas prácticas: recuerda la ´key word´ para nombramiento de variables/funciones, const o let.
El proyecto ya cumple con el criterio de aceptación. Felicidades por el esfuerzo Rocío, una disculpa por la demora y por el detalle del slack. Sigue esforzándote tanto como hasta ahora y llegarás lejos. Un abrazo!

Feedback Sprint 1 Datadashboard

Hola @rxmstrd @DianaAr8 y @EdithGarciaDieguez
He estado revisando el proyecto y tengo algunos comentarios:

Ojo en el readme que tienen dentro de src/ux tienen o tuvieron conflictos en el archivo, pues no borraron el código que les deja git para indicar donde están los problemas, son así: <<<<<<< HEAD los tienen al menos 5 veces repetido, ojo con esos detalles.
Buen trabajo de investigación del usuario, se nota la dedicación e interés en saber las necesidades exactas del usuario, espero puedan lograr llevar a cabo el prototipo que plantean lo más fiel posible.
En el archivo index.html también tienen marcas de conflictos no resueltos en la línea 3, 46 y 56.
Por qué tienen 4 archivos js? dos en src sueltos y dos más dentro de js que a su vez está dentro de src. Deben cuidar esos detalles, está bien ordenar los archivos como estimen conveniente, pero no duplicar.
Cuando el test dice debería exponer función computeStudentsStats en objeto global quiere decir que computeStudentsStats es una función, no un método de un objeto datasheet como lo están haciendo en el proyecto, son funciones comúnes y corrientes, así es sucesivamente con todas las otras funciones. (window.computeStudentsStats)
Recuerden utilizar HTML semántico <header></header> <section></section> <aside></aside> <footer></footer> <article></article>
Les recomiendo comenzar a trabajar con la data a profundidad lo antes posible (se encontrarán con toda la lógica para jalar la información y hacer los cálculos) y plasmar tanto visual como funcionalmente lo que tienen pensado para el proyecto.
Ojo con el trabajo colaborativo de github, solo veo 2 commits y son de @rxmstrd

Vamos con todooo, a salir ganadoras de estaaaa 💪

Recommend Projects

rxmstrd / cdmx-2018-06-bc-core-am-data-dashboard Goto Github PK