Git Product home page Git Product logo

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

Data Dashboard

Proceso de UX

1. Descubrimiento e investigación

Para poder recopilar todo la informacion realizamos entrevistas que nos ayudaran a identificar el tipo de usuario a quien va dirigido nuestro proyecto y asi poder cumplir sus necesidades. Entrevistamos a los coach y Tm pues ellos son los que tienen mas interaccion con esta data, la informacion que mas utilizan son las sedes y generaciones,resultados y desempeño de las alumnas , porcentajes alcanzados por cada una de ellas nos dimos cuenta que algunos tardan mas de 5 horas interactuando con la informacion ,la organizacion de las carpetas no son muy agiles,ya que tienen que estar buscando la informacion carpeta por carpeta y llegan a tardar demasiado tiempo buscando la informacion qu especificamente necesitan,la mayoria de ellos pasan mas tiempo en la computadora y cuando quieren utilizar la data en el celular se les hace aun mas complicado buscar algun dato. El celular es indispensale ya sea en nuestra vida social o en nuestra area de trabajo.Tambien nos comentaron que la informacion que visualizan solo les sirve una sola vez y cada que entran a la data esta cambia y tienen que volver a realizar el trabajo algo que se les hace muy abrumador nos dimos cuenta que ellos utilizan tablas y a algunos les gustaria visualizar la informacion en graficas pues tiene que contar manualmente el numero de egresadas que existen en la data,tambien les gustaria que su informacion se visualizara en forma ascendente y desendente para asi tener aun mejor organizacion en du data.

Usuarias:

Tener mejor accesibilidad encuanto a los datos y poder tener la informacion mas organizada ,reducir el tiempo de busqueda,no cuenta con una interfaz utilizan un programa basico que es Excel,no cuentan con un proceso establecido.Que pudiera tener un perfil en laboratoria para poder saber quienes son, su cargo, sus nombres. Les gustaria contar con una interfaz que se mucho mas eficiente, poder visualizar graficas pero solo si hay necesidad de usarlas pues prefieran algo sencillo y facil de usar.Comparten la informacion por Google Drive y Spreadsheets. Algunos usuario si han tenido acceso a otra data dashboard y para ellos es muy accesible como es Bamboohr HR

Bamboohr

Competencia

Objetivos de las usuarias: sus obetivos es poder reducir el tiempo y tener una busqueda de cada estudiante aun mas eficiente y Planificar y ejecutar el programa de formación. Mantener un seguimiento del progreso de las estudiantes y según ello tomar las decisiones necesarias para ofrecerles la mejor experiencia de aprendizaje. Para conocer cómo están avanzando, darles feedback constante sobre su desempeño y facilitar su desarrollo.

Sentimientos: desesperacion ,suelen abrumarse y enojo ,frustracion.

Técnicas usadas en esta fase:

Entrevistas.

5. Objetivos del negocio:

Que las estudiantes construyan en 6 meses los skills técnicos y socioemocionales para insertarse en el mundo tech e iniciar su carrera ,es el objetivos de Laboratoria a largo plazo, nuestra vision es ser la principal fuente de talento tech femenino de america latina para el mundo. Ofrecer una educación de calidad y encontrar el talento que necesita el sector, encontrar a las mujeres talentosas que se necesitan para cambiar el sector. También hacia afuera, formar el talento en empresas para que se transforme digital incluyente, e interno que los laboratorians se sientan felices trabajando en laboratoria y que tengan mapas de carrera claros y también atraer y mantener al mejor talento, generar las oportunidades para que las mujeres puedan empezar su carrera en tecnología.

1. Cuáles crees que son los datos más importanteLa interfaz debe permitir al usuario:

  • Listar y poder seleccionar sedes
  • Dentro de cada sede:
    • Listar y poder seleccionar generaciones
    • Para cada generación:
      • Listar y poder seleccionar estudiantes mostrando porcentaje general de completitud de c/estudiante
      • Seleccionar estudiantes mostrando reporte de progreso:
        • Mostrar porcentaje de completitud de todos los temas
        • Calcular porcentaje de tiempo completado de cada tema
        • Listar subtemas de cada tema
        • Poder filtrar subtemas completados y no-completados de cada tema
        • Poder filtrar subtemas por tipos (ejercicios, lecturas y quizzes)
    • En la vista de cada generación mostrar reporte de:
      • Promedio de la generación
      • Generar status para identificar estudiantes debajo del 60 en su porcentaje de completitud
      • Generar status para identificar estudiantes con 90 o más en su porcentaje de completitud
      • Poder filtrar estudiantes por estos dos status
      • Filtrar y poder buscar estudiantes por nombre
      • Poder ordenar de manera ascendente y descendente a las estudiantes según porcentaje de completitud
  • Utiliza la interfaz sin problemas desde distintos tamaños de pantallas: móviles, tablets, desktops
  • Realizar pruebas unitarias

2. Lo que los usuarios esperan obtener: Una informacion bien organizada,nada de complejidad,y reduzca tiempo , que sea de gran utilidad,y que solo ellos puedan tener acceso a esa informacion ,poder acceder en diferentes equipos sin tener ningun problema.

3. Data proporcionada:

  • Nombre respectivo de la estudiante.

  • Correo electrónico de la estudiante.

  • Sede a la cual la estudiante pertenece.

  • Generación a la cual la estudiante pertenece.

  • Un objeto con las siguientes propiedades:

  • Status para identificar si la estudiante esta por debajo del 60, en 90 o superándolo, o dentro de la media.

  • Sede a la cual la generación pertenece.

  • Generación a la cual pertence

  • Promedio del porcentajeCompletado de todas las estudiantes de la generación.

  • Número de estudiantes de la generación.

3. PROTOTIPADO

Sketch:

A primera instancia esta fue la idea que primero se nos vino ala mente conforme paso el tiempo y con las entrevistas que realizamos nuestra idea fue cambiando y nuestros Sketchs fueron cambiando,en esta etapa solo utilizamos ,hojas y lapiz.

imagen imagen imagen

Prototipo de alta fidelidad

Despues de terminar nuestro Sketch pasamos a realizar nuestro prototipo dijital de alta fidelidad conforme a los datos recabados y pensando siempre en las necesidades del Usuario al igual que el sketch conforme a los test y el feedback recibidopor nuestros usuarios vamos mejorando nuestra propuesta.

En esta etapa utilizamos Mockflow,Invision,anexamos nuestra liga.

inicio generaciones lista pantalla

Liga de PROTOTIPO

6.DISEÑO VISUAL

Color; tiene un rol vital en diseño y la vida cotidiana puede atraer tu mirada a una imagen..evocar cierta sensacion o emocion ..incluso comunicar algo importante sin necesidad de palabras.Asi que,¿como sabemos que colores se ven bien juntosy cuales no?La respuesta es la teoria del color.Artistas y diseñadores han seguido la teoria del color,pero cualquier persona puede aprender.Puede ayudar a sentirse mas en confianza en diferentes situaciones ,ya sea escoger los colores para un diseño ,o combinar el atuendo perfecto.Todo lo que necesitamos es una orientacion y empezaras a mirar a los colores de manera distinta. Comencemos por el principio recondando lo basico ¿Recuerdas haber aprendido sobre colores primarios y secundarios en la escuela?entonces ya conoces algo sobre la teoria del color.

Rojo y amarillo forman naranja ;amarillo y azul forman verde ;y azul y rojo forman morado:si mezclamos estos colores entre si obtenemos mas matices entre colores,como rojo,anaranjado,amarillo y verde.Todos juntos forman lo que llamamos una rueda de color.Ahora vamos una paso mas adelante con el matiz la saturacion y el valor.estos son terminos que normalmente no te encuentras en tu vida cotidiana ,pero son las claves para comprender a los colores mas matizados ,el matizes el mas facil ;es basicamente solo otra palabra para el color.La saturacion hace referencia a la intensidad en otras palabra,si el color parece mas sutil o mas vibrante.El valor tiene que ver con cuan oscuro o claro es el color,variando de negro a blanco.

Entonces,¿como juntamos todo esto para crear combinaciones de colores que se vean mas profesionales?todo lo que nesecitas es la rueda de color.La formula mas facil para la armonia de colores es la monocromatica por que solo usa un color o matiz.

COLORES CALIDOS Y FRIOS

Legibilidad es un factor importante en cualquier diseño,tus colores deben ser legibles y agradables a la vista,los colores neutrales como negro,blando y gris pueden ayudar a balancear tu diseño.Cada color emite un mensaje ,es importante considerar el tono de tu proyecto,y escoger una paleta de colores que encaje.Solo sigue experimentando.

nuestra paleta contiene colores calidos ,este tipo de tonos, además de la sensación térmica, transmiten cercanía, intimidad, energía, calidez y son utilizados en diseño gráfico para reflejar entusiasmo, pasión, alegría.

Por otro lado, los colores fríos son todos los colores que van desde el azul al verde pasando por los morados. Cuanto más azul tenga un color, más frío será. Los colores fríos son los tonos del invierno, de la noche, de los mares y lagos En diseño, los colores fríos suelen usarse para dar sensación de tranquilidad, calma, seriedad y profesionalidad.

Usamos amarillo como color principal, pero lo haremos más enérgico que antes. Además, agregaremos el magenta y el menta a nuestra identidad. Lo haremos sin volvernos muy “girly”, pues somos una organización que forma mujeres adultas y fuertes. Pueden entrar a nuestra web, y ver lo bien que se ven en este medio, donde siempre nos comunicamos con ustedes.

paleta de Colores

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

Contributors

amaliariverac avatar karlanavam avatar mikenieva avatar rosszhena avatar yareh2 avatar

Watchers

 avatar

Forkers

yareh2

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

Entrega Sprint 2 Martes 3 de Julio

  • 1.UX Entrega de sketching con feedback aplicado.

  • 2. UX Entrega de argumentación de la selección de elementos en Visual Design, documentado en README..

  • 3.JS manipulación y visualización de data mostrando estudiantes y detalle de progreso de estudiantes, aplicando xhr/fetch y DOM.

  • 4.TDD Pasar dos terceras partes de los test.

  • 5.UIprogreso del diseño entregado la semana previa.

  • 6.Liga de github pages desplegando avance.

Feedback project 2 Data-dashboard

  1. Investigación, aún pueden llevar más lejos su curiosidad investigando sobre los métodos para manipulación de objetos como Object.values() o hasOwnerProperty(), que se refleje en su código si están investigando por su cuenta.
  2. 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.
  3. 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!
  4. Eslint (estilo): Alexandra dio un pequeño taller donde les mostró el archivo .eslintrc donde ponemos la configuración de la guía de estilos que prefiramos, ella les presentó la que utiliza Laboratoria. Pongan atención en este punto en este proyecto que va comenzando.
  5. 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. Estass utilizando arreglos pero aún no ocupas en tú código objetos.
  6. 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!
  7. Github: se espera el uso de issues y milestones, hubo un taller con Alexandra para este tema de los issues en github , serie de issues como guía para el desarrollo de tareas y/o de problemas y creación y uso de milestones. Pongamos atención en este punto de la rúbrica para llegar al nivel, no tiene mucha dificultad y te ayudará a tu planificación.
  8. Git: El nivel 3 pide pull request y mergin y por otro lado el nivel 2 de git 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), en los próximos proyectos deberían de llegar a un acuerdo al iniciar para este tema. De no cumplir con el nivel 2 en los próximos proyectos no habrá manera de colocarlas en nivel 3.
    UX:
  9. Tipografía y color: Se espera que se modifiquen los valores por default de la fuente tipográfica y se usen las tipografías y composiciones de color de la marca.
  • Bien por el esfuerzo, sigamos trabajando así de duro sobre todos estos detalles perfectibles y en la medida que vayamos aplicando el feedback y dando atención a esas áreas de oportunidad, será evidente su desarrollo. Sobre todo es importante atender la parte de JavaScript! Cualquier aclaración, no duden en escribirme. Saludos!

Entrega Sprint 3 Martes 10 de Julio

  • 1.UX Diseño user centricity (cerca de las necesidades de los usuarixs).

  • 2.Aplicación de conceptos como contraste, jerarquía, tipografía, color y alineación.

  • 3.JS aplicar fórmulas para sacar porcentajes, promedios, filtrar.

  • 4.TDD codificar los últimos test y resolver la última tercera parte de estos.

  • 5.Liga de github pages desplegando avance..

Entrega Sprint 1 Martes 26 de Junio

  • 1.UX Sketching completo de diseño ideal, documentado en README.

    • sketching de baja fidelidad

    • prototipo de alta fidelidad

  • 2.UI Diseño sencillo maquetado y aplicado con css.

  • 3.JS manipulación y visualización de data en dos niveles:

    • sedes

    • generaciones

    • aplicando xhr/fetch y DOM.

  • 4.TDD resolver una tercera parte de los test.

  • 5.Liga de github pages desplegando avance..

Feedback mejora Data Dashboard

Bien por la configuración de estilos de eslint!
Bien por correr htmlhint y resolver todos los errores, aunque lo cierto es que aún no tenemos una maquetación para que este punto sea del todo valido.
Con el trabajo realizado subes el nivel de test, funciones y modularidad, arquitectura !
También el trabajo en nomenclatura js sube el nivel.

Sigue esforzándote como hasta hoy!
Cualquier duda que tengas no dudes en escribirme.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.