TRABAJO / CASO 03

Suite Profesores

Ocho herramientas de IA para docentes que viven dentro del campus virtual de cada institución. Un rediseño completo con una tesis explícita — y con la restricción más dura bajo la que he diseñado: la pantalla no es mía.

Rol
Rediseño de producto, end-to-end
Contexto
Embebido en Canvas, Moodle y más
Herramientas
8 de IA + manual del docente
Lienzo real
1188 × 677 px dentro del LMS

⌐ LAS DEMOS SON RECONSTRUCCIONES INTERACTIVAS — EL PROTOTIPO REAL, AL FINAL DEL CASO

El contexto

El profesor nunca sale de su campus. El producto tampoco puede.

La suite acompaña al docente donde ya trabaja: dentro de su curso, en el LMS de su institución. Ahí prepara sus clases, genera material y sigue a sus alumnos, todo con IA.

La versión anterior organizaba todo eso como un menú de tarjetas: ocho opciones, elige una. Funcionaba como catálogo. No funcionaba como lugar de trabajo.

⌐ EL CHROME DE CANVAS: RAIL, NAVEGACIÓN DEL CURSO, BREADCRUMB EL MARCO, MEDIDO EN VIVO → DEMO 02
FIG. 01 — EL PRODUCTO DENTRO DEL PRODUCTO DE OTRO
La tesis

El home no es un menú, es un dashboard.

El rediseño partió de cambiar la pregunta: no "¿qué herramienta quiere abrir el profesor?" sino "¿qué necesita el profesor cuando entra?". De esa tesis se derivó todo lo demás:

  • Un saludo con contexto real: el producto sabe el curso, la sección y el momento del ciclo, porque vive dentro del LMS. Usarlo es cortesía mínima.
  • Un hero conversacional: el centro del home es un campo de chat directo, no una tarjeta más. Refleja la arquitectura real del producto: la IA es la columna vertebral, no una opción del catálogo.
  • Atajos con contexto: chips de prompts sugeridos según el curso y la semana.
  • Las ocho herramientas siguen visibles como tarjetas: la descubribilidad no se sacrifica, se reordena.
  • El historial se movió a la navegación: es navegación, no contenido.
EL HOME LAS OCHO HERRAMIENTAS, ANTES Y DESPUÉS
DESPUÉS — SALUDO CON CONTEXTO · CHAT AL CENTRO · AVISO BREVE · LAS OCHO ABAJO EL HISTORIAL SUBIÓ A NAVEGACIÓN — ES NAVEGACIÓN, NO CONTENIDO
DEMO 01 — DE MENÚ A DASHBOARD · INTERACTIVO
La contra-decisión

Lo que decidí no llevar al home.

La tentación obvia era llenar el dashboard de gráficas: el producto tiene métricas de uso y reportes, y los dashboards con charts se venden solos. Dije que no, y lo documenté. Las métricas viven en su propia herramienta; al home solo sube un aviso breve cuando algo requiere atención.

El home es para actuar, no para navegar analytics. DE LA SPEC — LA DECISIÓN QUEDÓ ESCRITA CON SU RAZÓN, NO SOLO EJECUTADA
Las herramientas

Ocho herramientas: un asistente y siete atajos.

La suite no son ocho herramientas sueltas: el Asistente Instruccional es la columna vertebral, y el resto son atajos a flujos específicos de esa conversación. Cada uno resuelve un trabajo concreto del profesor sin que tenga que saber pedírselo al chat. Y se alimentan entre sí: el reporte sugiere una acción, Doc la genera, y el recurso queda en la biblioteca.

Asistente Instruccional
El chat con Doc, anclado al curso. Todo lo demás es un atajo a esta conversación.
LA COLUMNA VERTEBRAL
CREAR — MATERIAL Y ACTIVIDADES
Texto de apoyo — un esquema editable para preparar la clase, con formato en vivo y descarga en PDF.
Diseño de sesión — un deck desde cero, o el PPT del profesor analizado contra los objetivos del curso: qué cubre, qué falta, regenerar con mejoras.
Potencia tus sesiones — un documento de ideas para dinamizar una sesión, con referencias a los materiales del curso.
Comprensión lectora — ejercicios por niveles de lectura (Barrett), programados por sección; el alumno los recibe dentro de Doc.
SEGUIR — CÓMO VA LA CLASE
Ver reportes — el semanal por sección: temas con más dudas y una acción sugerida que se genera con Doc.
Ver métricas — la actividad de la sección: estudiantes activos, modos de uso, Ponte a Prueba.
Recursos guardados — la biblioteca de lo generado: cada "Generar con Doc" deja un recurso reutilizable.
EL CICLO — EL REPORTE SUGIERE → DOC GENERA → EL RECURSO QUEDA EN LA BIBLIOTECA
FIG. 02 — OCHO HERRAMIENTAS, UN SISTEMA
La restricción

Diseñar en 1188 × 677 píxeles que no controlo.

Embebido en el curso, el producto vive en un marco que el LMS decide. En un laptop típico quedan 1188 × 677 píxeles reales, con la navegación del campus rodeándolo por dos lados. Ese es el lienzo, y cambia cuando el host colapsa sus propios menús.

  • Construí un simulador del entorno: una réplica de la interfaz del LMS que envuelve el prototipo y muestra en vivo las dimensiones reales disponibles. Diseñar contra el marco real, no contra un lienzo idealizado.
  • El responsive se deriva del host: los puntos de quiebre replican cómo el campus colapsa su propia interfaz. Adentro, el layout se acomoda solo, sin reglas propias que pelearse con las del anfitrión.
SIMULADOR DEL ENTORNO — MUEVE EL ANCHO DE LA VENTANA ALTO FIJO: EL PORTÁTIL TÍPICO
VENTANA 1440 − NAV DEL CAMPUS 220 − MÁRGENES 32 = LIENZO 1188 × 677 NAV DEL CAMPUS EXPANDIDA — EL MARCO QUE ME TOCA ES EL QUE SOBRA
DEMO 02 — EL LIENZO REAL, MEDIDO EN VIVO · INTERACTIVO
La doble marca

Dos marcas en un producto, resueltas por regla.

Vivir en casa ajena también es un problema de identidad. Dentro de la herramienta manda la marca del producto: el docente sabe qué está usando. En el material que sale al estudiante, el nombre y el color de la institución. La regla de negocio detrás: la institución firma su material, no su proveedor.

DÓNDE SE VE
DENTRO DE LA HERRAMIENTA — MARCA DEL PRODUCTO EL DOCENTE SABE QUÉ ESTÁ USANDO
DEMO 03 — DOBLE MARCA, RESUELTA POR REGLA · INTERACTIVO
El estado

Ocho herramientas, un manual y specs listas para backend.

La suite rediseñada viene con su propio manual interactivo para el profesor final. Cada herramienta tiene su spec con la misma estructura: qué hace, cómo se llega, estados, decisiones de diseño y pendientes para backend.

COMPRENSIÓN LECTORA — TRES PASOS DATA SINTÉTICA
PASO 1 — EL TEXTO ENTRA COMO LO TIENE EL DOCENTE PEGADO O ELEGIDO DEL BANCO — NADA QUE PREPARAR ANTES
DEMO 04 — DE LA CONVERSACIÓN AL MATERIAL TERMINADO · INTERACTIVO
La letra chica

Un espejo con costo asumido.

Reportes y Métricas son un espejo deliberado del dashboard de instituciones: esas vistas tienen un solo dueño canónico, y la suite las recorta a lo que el profesor necesita ver. El costo es mantener el espejo sincronizado: la re-sincronización tiene procedimiento propio, escrito después de que una pasada dejara cuatro correcciones.

El producto

El prototipo real, vista por vista.

Las demos de arriba están reconstruidas para contar el diseño. Esto es el prototipo tal cual corre, incluido el simulador de Canvas con que se desarrolla, con data sintética. Click para abrir en grande.

CAPTURAS DEL PROTOTIPO DATA SINTÉTICA
GALERÍA — EL PROTOTIPO SIN RECONSTRUIR