En Laboratoria, las Training Managers (TMs) hacen un gran trabajo al analizar la mayor cantidad de datos posibles respecto al progreso de las estudiantes para apoyarlas en su aprendizaje.
Por esta razón se desarrollo una aplicación web en la que las TM de cada sede puedan acceder de manera confidencial a la información que ha generado Laboratoria durante todo su periodo de operaciones.
La principal función de esta aplicación es mostrar de manera general la cantidad de estudiantes por sede, así como su porcentaje de progreso de manera individual y por generación.
Durante todo el proceso de desarrollo de esta aplicación web nos enfrentamos a diferentes dificultades entre las que destacan poder procesar la data en bruto para generar nuevos datos que computen las Funciones necesarias para acceders a los datos y generar promedios y estadísticas por dato ingresado.
La manipulación del DOM, ya que es necesario que tengas muy clara la estructura de tu documento para poder trabajar en el, si no de esta manera el tiempo invertido se prolonga.
Otro de los retos a sortear fue la coordinación de los tiempos ya que consideramos que trabajar en equipo es una tarea que se tiene que ir aprendiendo conforme a la practica.
-
A trabajar en equipo.
-
Manipulación de datos.
-
Iteración de datos complejos.
-
Nuevos métodos de JavaScript.
-
Creación de aplicación responsive (Mobile First).
-
Bootstrap 4.
-
Gestionar tiempos para futuros proyectos.
-
Smart Thinking.
-
Sintaxis para uso de test(Esto nos ayuda a hacer un código con menos errores).
##Proceso de diseño e implementación de UX
Para este proceso de diseño incorporaremos la metodología de Design Thinking que va muy bien con el método Agile ya que podemos iterar las distintas etapas del proceso en cada string del proyecto. La metodología Design Thinking que consiste en:
En la fase inicial de diseño es necesario acercarnos con una curiosidad enfocada, ya que es muy fácil divagar en la amplitud de los aspectos que abarca un sujeto o tema de observación, además de que incluye una buena práctica siempre contestarnos un protocolo de preguntas base que nos ayudarán a:
- Conocer a nuestro cliente
- Ubicar a nuestro usuario
- Alinear expectativas con el cliente de lo que espera del proyecto.
##Datos básicos
1. Nombre de la empresa: Laboratoria
2. Sitio web de la empresa: laboratoria
3. Quién será el contacto del proyecto: Lucile Baratier (Training Manager)
4. Otras personas Implicadas:
Couches y Administrativos.
5. Presupuesto estimado:
Desconocido.
6. Cuál es el negocio de la empresa: Capacitación de talento dentro del sector de tecnología de la información.
7. Cuáles son sus productos y servicios:
- Capacitación de talento (mujeres). > Reclutamiento de talento para empresas
- Capacitación para empresas.
8. Quiénes son sus competidores (directos e indirectos) Bootcamps similares de 6 meses como:
-
Tec de Monterrey
- Ibero
- Ironhack
9. Cuáles son los productos y servicios de la competencia Un bootcamp para aprender a programar desde 0 en 6 meses.
10. Posicionamiento de la empresa en el mercado: Laboratoria tiene un nivel alto de aceptación dentro del rubro de capacitación y colocación de talento femenino, además de que su giro social le da un valor agregado a la empresa.
11. Qué ofrece esta empresa con respecto de la competencia. Laboratoria se enfoca en talento femenino que no necesariamente tiene estudios relacionados además de tener un giro social dentro de su enfoque de empresa.
12. Otras acciones de marketing de la empresa aparte del sitio web
- Conferencias
- Hackatones
- Campañas en medios digitales con videos y reportajes
13. Quiénes son los clientes del producto: Los socios y CEO’s de Laboratoria 14. Descripción de los clientes objetivo: Edad: 30 a 45 años Genero: Indistinto Educación: Degree Nivel económico: B Notas: Los clientes tienen contacto directo y constante con la tecnología
__15. Quiénes son los usuarios del sitio o app:__ Primarios: Training Managers de todas las sedes de Laboratoria Secundarios: Administrativos y Couches
__16. Descripción de los usuarios del sitio:__
- Edad: 25 a 40 años
- sexo: Indistinto
- Educación: Especialista en tecnología, con algún posgrado o experiencia con prácticas fuera del país.
- Nivel económico; C+
__17. Capacidad técnica de los usuarios del sitio o app:__ Los usuarios son expertos en tecnología o al menos tienen un acercamiento directo y constante con servicios, gadgets, implementaciones, etc.
18. Cómo, cuándo y desde dónde usará el usuario el sitio o app El usuario accederá al servicio mayormente mediante una laptop o computadoras de escritorio, pero también se hizo hincapié en la necesidad de un diseño responsivo con una solución para movil.
19. Cuál es el propósito general del sitio: Desplegar información general y particular de las alumnas de Laboratoria mediante visualizares de fácil lectura. __20. Cuáles son los objetivos concretos del sitio:__ Ayudar a la toma de desiciones rápida mediante un dashboard que muestre dichos datos de manera actualizada, concreta, de fácil acceso y todo en un mismo lugar. __21. ¿Hay una fecha de lanzamiento fijada?__ La fecha de entrega es el próximo martes 10 de julio (en dos semanas).
22. Objetivos del negocio
Capacitar de la forma más eficiente al talento femenino brindándole los conocimientos y las herramientas necesarias para desarrollarse exitosamente dentro del ámbito laboral actual, así como proporcionar a las empresas talento que le agregará valor a sus proyectos y equipos.23. Motivaciones del negocio para el data dashboard: Agilizar sus procesos de mejoramiento de del Bootcamp mediante la visualización de los datos más relevantes y crear una base de datos con toda la información personal y de desempeño de todas las alumnas.
24. Qué se consideraría como un éxito: Una plataforma multi-propósito que centre todo el flujo de información de la empresa
25. Qué se consideraría como un resultado aceptable: Una plataforma que centre la información de las alumnas de Laboratoria.
26. Qué se consideraría como un éxito. Una plataforma que centre la información de las alumnas de Laboratoria en todas sus generaciones y que se actualice automáticamente cuando se le introduzca información nueva.
__27. Qué se consideraría como un resultado aceptable__ Una plataforma que contenga la información de las alumnas de Laboratoria actuales y que muestre datos de sus avances de forma gráfica y sencilla de leer.
__28. Cómo describiría el sitio:__ Un Dashboard interno para facilitar la implementación de cambios dentro del proceso del Bootcamp
Técnicas usadas en esta fase:
Los métodos heurísticos son estrategias generales de resolución y reglas de decisión utilizadas por los solucionadores de problemas, basadas en la experiencia previa con problemas similares. Estas estrategias indican las vías o posibles enfoques a seguir para alcanzar una solución, esto quiere decir, que seguro alguien ya implementó una solución a una necesidad similar a la de mi usuario.
Los DashBoards son interfaces que se han hegemonizado dentro de las herramientas de trabajo y su uso se ha popularizado desde mediciones de actividad de sitios web, información diaria de inversiones o transacciones bancarias, hasta rendimientos físicos personales o de un equipo.
Durante la búsqueda se encontraron MindSets útiles para implementar en nuestro desarrollo como son:
-
Barra de menú lateral izquierda: Es un menú que puede desplegarse para hacerse más específico o también retraerse para permitir visualizar toda la información de la pantalla, el usuario promedio se ha adaptado a este tipo de menú desde la interfaz de Facebook por lo que su implementación puede cortar la brecha de curva de aprendizaje para el desarrollo de la solución.
-
Scroll Infinito: Otro regalo de la interfaz de Facebook, el usuario no encuentra molestia alguna en visualizar la información mediante un scroll infinito, de hecho lo prefiere a un refrescamiento de pantalla.
-
De Mayor a menor: En los DashBoards se entiende que la información se verá presentada de lo general a lo particular por lo que el usuario siempre tendrá a primera vista información global antes de algo particular, si no es que lo predeterminó en algún setting.
Las entrevistas 1 a 1 siempre son un recurso muy importante y valioso dentro del UX Research, ya que nos permiten no sólo indagar en las necesidades obvias del usuario (con necesidades obvias me refiero por las que nos solicitó el servicio de desarrollo y diseño ), si no también podemos detectar necesidades y pain points que no ha percibido, lo cual siempre es un área de oportunidad además de que focalizan nuestros esfuerzos. Pudimos llevar a cabo 1 entrevistas uno a uno con Mike, miembro del equipo de couches de Laboratoria, debido a su trabajo Mike está atento a toda la Data que surge de las estudiantes y enfocar esta para mejorar su método de enseñanza, además de que sería un usuario secundario de la plataforma. Para esta entrevista se desarrolló un protocolo de preguntas dentro de la plataforma Google Forms que nos serviría como guión al momento de llevar a cabo la entrevista además como base para los formularios remotos que realizamos a las Training Managers de Perú y Guadalajara.
Protocolo de entrevistas: Respuesta 1
Protocolo de entrevistas: Respuesta 2
Protocolo de entrevistas: Respuesta 3
Protocolo de entrevistas: Respuesta 4
Protocolo de entrevistas: Respuesta 5
Durante el proceso de investigación otro equipo tuvo oportunidad de realizar una entrevista a Lucile, Training Manager de Laboratoria CDMX, aunque no tuvimos oportunidad de estar presentes, pudimos tener acceso al video que se generó y analizar las respuestas y necesidades de nuestro usuario primario.
Pain points: Actualmente los mimbros de Laboratoria utilizan de forma local los servicios de Google Drive y spreadsheets compartidos para alimentar la Data de las alumnas, además de un micrositio que no resuelve los temas de comunicación entre miembros del equipo. Las spreadsheets aunque son prácticas, al ir aumentando la Data se convierten en un método muy difícil de leer (hay que tener muchas ventanas abiertas).
Sentimientos: La Data es una herramienta fundamental para nuestros usuarios, y pasan muchas horas de su día analizándola o buscándola, por lo que eso les genera sentimientos de frustración, premura, resignación.
- Es importante acceder desde dispositivo movil y pero principalmente en computadora.
- Información importante: Pueda ver las sedes y su información general, me interesa porque también quiero comparar para saber si mi sede está bien.
- Información importante: Número de estudiantes activas Vs Estudiantes aceptadas en tiempo real
- Información importante: El nivel de completitud del LMS
- Accede a la Data diariamente.
- Actualmente está usando excel
- Cada país tiene su sistema de organización por lo que es complicado leerla así que es necesario hegemonizar la visualización de la información
- No me interesa que sea increible, me interesa que sea facil de ver
1. Cuáles crees que son los datos más importantes a tener en cuenta para el Data Dashboard:
- Sobre las estudiantes:
-
- La Sede donde se encuentran
-
- Sus datos generales
-
- Si están activas
-
- Su desempeño en el Bootcamp en general
-
- Su desempeño en el LMS
2. Lo que los usuarios esperan obtener:
-
- Visualización clara de los datos
-
- Poder acceder a la data de lo general a lo particular
-
- Poder comparar la data con facilidad
-
- Una aplicación sólo para uso interno
3. Insights:
-
- Debe de ser un producto interno
-
- Debe de ser consiso
-
- Debe de informar a un solo vistazo
-
- Debe de permitir comparar fácilmente la data
4. Data proporcionada:
La data proporcionada para este ejercicio es un archivo JSON que debemos implementar en un servidor local o desde un link en un servidor externo. Este bloque de data tipo árbol cuenta con información dentro de objetos y arreglos de tres sedes de Laboratoria, Lima, México y Santiago, tres generaciones de cada una de las sedes, información de blockes de alumanas en cada generación.
Tomando en cuenta el primer acercamiento con el usuario y la investigación de las soluciones más populares, tenemos claro que nuestra solución requiere ser visualmente impactante, con un menú accesible y a la mano y exclusiva para uso interno de la empresa por lo que uno de nuestros requerimientos principales es que contenga un LogIn que permita restringir la entrada a la plataforma, también creemos que un menú lateral solucionará el problema de contener toda la información necesaria en un sólo sitio, además de que nuestro usuario está acostumbrado a utilizar plataformas como Facebook y Slack que contienen mucha información desplegada con infinity scrolls, y uso de sidebars por lo que la curva de aprendizaje será mínima.
Nuestro primer acercamiento es idealizado y busca darle al usuario sus principales necesidades y mucho más. (Primer nivel de Scketching) También ya estamos considerando utilizar los colores institucionales de Laboratoria.
Realizamos un user test de tareas concretas:
- Encontrar información en la página
- Leer textos
- Leer gráficos
Los insights de la prueba de usuario fueron:
* Replantear nuestro diseño a la información con la que contamos: Aunque es emocionante buscar la solución ideal, tenemos que situarnos con la información que contamos (JSON).
* Dar un paso atrás y replantear el sketch en blanco y negro para no alterar nuestra percepción al usar colores en este proceso.
También, dentro de nuestro proceso, caímos en cuenta que teníamos que buscar la solución más sencilla y efectiva que nos permitiera aprender conjuntamente tanto la parte de investigación y diseño como de desarrollo e implementación.
SINTESIS FINAL DE LA INTERFAZ
Al trabajar un producto directamente relacionado con una empresa en específico, tenemos que que tomar en cuenta cómo se comunica gráficamente en la actualidad y si cuenta con un manual de identidad. Afortunadamente Laboratoria realizó una actualización de su identidad gráfica y podemos hacer uso de ella:
Su color primario es un amarillo brillante (#FFE521) y utiliza como secundario para dar acentos el magenta (#FF009E) y el menta (#56F89A) además de un negro como auxiliar, pues es dónde también se presenta el logo.
En tipografía utilizan Bitter para los títulos y Open Sans para contenido y el logo, nosotras utilizamos únicamente Open Sans en nuestra app pues al ser un producto responsive tenemos que asegurar su fácil lectura en diferentes dispositivos.
Para nuestra app caímos en cuenta de que tenía que diferenciarse de otras interfaces de Laboratoria, para que los usuarios no se confundieran entre plataformas, específicamente al LMS por lo que decidimos utilizar el negro como base, y el amarillo, magenta y verde para dar acentos.
En su implementación utilizamos Bootstrap 4.0 y CSS para realizar el diseño y estilo de la aplicación.
Recursos:
-
En su implementación utilizamos Bootstrap 4.0 y CSS para realizar el diseño y estilo de la aplicación.
-
Realizamos investigación sobre cómo manejar Fetch, JSON además de sesiones de Office Hours y mucha prueba y error.
-
Procesador de textos Atom.
-
LMS
-
El torneo de CodeFight
-
Figma para scketches de alta fidelidad
-
Adobe Ilustrator para diseño de gráficos
-
Adobe Photoshop para edición de fotografías.
block quote
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── data
│ └── laboratoria.json
├── package.json
├── IMAGENES
├── src
│ ├── data.js
│ ├── index.html
│ ├── login.html
│ ├── main.js
│ └── style.css
│ └── stylelogin.css
└── test
| ├── data.spec.js
| ├── fixtures.js
| ├── headless.js
| └── index.html
Usuario:
Al ser una aplicación interna que maneja información confidencial, se implementó el uso de un Login al cual puedes entrar con un correo institucional de Laboratoria y una contraseña que se te asignará previamente y entregará por correo. Para tener control de los ingresos, no es posible cambiar la contraseña, tiene que ser resignada, así también puede ser vetada si la persona hace uso indebido de la información.
MENU: El menú sidebar es sencillo y collapsable en dispositivos móviles, permite tener acceso a las sedes y confirmar dando la bienvenida al usuario. Es un menú que puede crecer a la par de que crezca la empresa.
Botones: Colocamos la información destacada a primera vista, el usuario entrará directamente a la sede a la que pertenece y podrá acceder fácilmente a la misma información de otras sedes sólo con un click
Responsive: Ya que es información que está actualizándose constantemente y es necesaria para tomar decisiones en procesos internos, la aplicación puede visualizarse tanto en dispositivos móviles como en desktop.
Diseñadora Industrial Laboratoria 6ta Generación Campus CDMX
Diseñadora Integral Laboratoria 6ta Generación Campus CDMX