uDocz para estudiantes
La experiencia de estudio de una plataforma con 4 millones de estudiantes al mes: leer, conversar con un tutor de IA, practicar y repasar. Un producto que llevaba años en Figma y hoy se reconstruye desde cero como código vivo, atado al design system.
⌐ CASO EN CURSO — EL REPOSITORIO SE MUEVE CADA SEMANA; ESTO ES LA FOTO DE HOY
⌐ LAS DEMOS SON RECONSTRUCCIONES INTERACTIVAS — EL PROTOTIPO REAL, AL FINAL DEL CASO
De Figma a un repositorio de diseño.
El producto lleva años en producción y su diseño vivía en Figma: pantallas que envejecían apenas se implementaban, y una distancia permanente entre lo dibujado y lo que corría. La decisión fue reconstruirlo desde cero como prototipo navegable: HTML, CSS y JS con data sintética, sin backend, en un repositorio donde el diseño es código que se ejecuta.
Y no es un repo aislado: consume el design system como submódulo, de solo lectura. Lo que hace falta y el sistema todavía no tiene se construye en una carpeta de staging propia y se usa en producción de prototipo. Cuando prueba su valor, se promueve al DS para que los otros productos lo hereden. El B2C es el banco de pruebas del sistema que sostiene toda la suite, el mismo del caso 01.
Años de capas, y las reglas del producto en la cabeza de la gente.
La plataforma modela tres estados de sesión (visitante anónimo, registrado y suscriptor) y nueve tipos de material, del apunte de clase a la infografía o el solucionario. Encima va un rol que cruza los estados: el contribuidor, quien sube y vende material propio. No cambia lo que puede leer; cambia lo que puede vender y cómo se firma su autoría. Cada combinación cambia qué se puede leer, descargar, practicar o desbloquear. Esas reglas existían, pero vivían repartidas entre el código, la memoria del equipo y conversaciones viejas.
Cada rediseño tropezaba con la misma piedra: nadie podía responder con certeza "¿y qué pasa si un usuario gratuito intenta esto?" sin ir a preguntarle al código.
Escribí la matriz de capacidades que responde esa pregunta para cada perfil, en cada superficie: qué está completo, qué limitado, qué pide registro, qué pide pago. El documento y su espejo en el código de los prototipos se actualizan juntos, por regla: si cambia la matriz, cambia el prototipo en el mismo movimiento.
Un detalle deliberado: la matriz admite el valor "pendiente". Declara los huecos que el producto todavía no resolvió, en vez de fingir que el mapa está completo.
Un solo lugar con tres destinos.
La app logged-in es un shell único: un chrome global y tres destinos que se muestran dentro de él. Cambiar de destino no recarga nada, porque no son páginas distintas sino lugares del mismo sitio. La decisión quedó escrita en un registro de decisiones de arquitectura: un documento corto que fija qué se decidió y por qué, para que nadie la re-litigue de memoria. El home v3 es la arquitectura canónica.
- Inicio es para retomar: qué estabas leyendo, el repaso que toca hoy, y los atajos para crear material con IA. No es una portada de descubrimiento — es el escritorio.
- Biblioteca es todo lo propio, en seis secciones agrupadas en dos familias. Lo que guardaste, subiste y organizaste en proyectos por un lado; lo que generaste con IA (flashcards, práctica, quizzes) por el otro. Material que existía vs. material que produjiste.
- Doc es el tutor de IA, con destino propio: un espacio de trabajo completo, no un panel auxiliar. La siguiente sección es suya.
Doc, Tutor IA: cuatro modos y una voz con reglas.
Su hub abre con una pregunta y cuatro modos. Elegir uno no configura nada en silencio: el nombre del modo entra al hilo como mensaje tuyo y Doc responde presentándose.
- Estudiar para un examen arranca una ronda de preguntas tipo examen, con pistas a pedido y el porqué detrás de cada respuesta, acertada o no.
- Aprender un tema genera una lección a la medida y la abre en un player a pantalla completa: pasos que van de fundamentos a dominio, con práctica intercalada.
- Resolver un problema desarma el ejercicio contigo (qué te dan, qué te piden, qué los conecta) antes de tocar un número. La calculadora del composer es un atajo directo a este modo.
- Guía y tips de estudio responde las preguntas de método: qué técnica usar, cómo construir un hábito, cómo repartir el tiempo en parciales.
Escribir crea el chat, no hay pantalla intermedia: el hub desaparece y tu mensaje ya está en el hilo. Y Doc tiene voz propia, documentada con reglas concretas: cero emojis, prohibido abrir celebrando ("¡Genial!", "¡Perfecto!"), y un acierto se reconoce explicando el porqué en vez de aplaudir. Nunca anuncia una acción que no llega en el mensaje siguiente. El principio detrás: un amigo que sabe del tema, no un animador.
Tres formas de estudiar sobre un mismo shell.
Desde cualquier documento se generan tres herramientas de estudio. Son experiencias full-screen (el documento desaparece, queda el estudio) y comparten shell, sonido, síntesis de voz y el gráfico de resultados. Tres productos distintos hechos de las mismas piezas.
- Flashcards — memorizar. Tarjeta y reverso en una experiencia inmersiva; la versión gratuita y la premium se distinguen a simple vista por su paleta.
- Practicar — ejercitar. Preguntas agrupadas en rondas, con tres tipos (verdadero/falso, opción múltiple, abierta) y dificultad adaptativa: sube o se mantiene según cómo vas.
- Quizzes — evaluarse. Preguntas abiertas que corrige Doc, con feedback en lenguaje natural en vez de un puntaje seco.
Y encima de las tres, Repaso: una sesión diaria de repetición espaciada, la técnica de volver a un tema justo cuando estás por olvidarlo. Cada reencuentro en el momento correcto fija más la memoria que releer diez veces seguidas. La sesión no sale de un documento: cruza todo lo que estudiaste en la semana y arma las preguntas desde los temas donde más fallaste.
Freemium: qué es gratis en cada módulo, y dónde está el muro.
La versión gratuita no es la premium con candados encima. Cada módulo de estudio (reader, flashcards, práctica, quizzes, repaso) recibió su propia capa free diseñada, con paleta, límites y escenas de conversión propias.
- El reader garantiza un piso de páginas completas y muestra el resto borroso pero recorrible. Puedes seguir bajando y el contador sigue avanzando, así que ves cuánto te falta sin hacer la cuenta. El documento se antoja, no se esconde.
- La práctica regala la primera ronda completa antes de invitar a pagar; los quizzes, las primeras preguntas. Siempre se prueba el valor antes del muro.
- La publicidad tiene presupuesto por vista: cuántos anuncios entran y en qué posiciones lo define el diseño de cada pantalla, no el espacio disponible.
El muro que había antes creaba un problema de percepción: las dos puertas se ofrecían al mismo peso. Usuarios que creían estar pagando por un solo documento estaban comprando una suscripción. Rediseñé la secuencia: la jerarquía dejó de competir consigo misma. El checkout se resuelve en un modal sobre el propio documento, con plan, métodos y precio en una sola pantalla. Leer, chocar con el muro, pagar y seguir leyendo: un solo lugar.
La otra puerta no cuesta dinero: una economía de puntos donde subir un documento gana los puntos que cuesta desbloquear otro. El catálogo se alimenta del mismo incentivo que monetiza, y quien no puede pagar, aporta.
Cuando el diseño vive en un repositorio, la forma de trabajar también se rediseña.
Con el diseño en un repositorio y ya no en Figma, cambió algo más que la herramienta: cambió cómo se colabora. Versionamiento, ramas, revisiones: terreno cotidiano para desarrollo, nuevo para la mayoría de diseñadores. Estamos construyendo el framework de trabajo para ese contexto, y se itera con cada pieza que entra.
Una de sus primeras respuestas es el kit de wireframes autocontenido: una plantilla con los estilos del sistema, un conmutador de estados de sesión y un cajón de especificación integrado. Cualquier diseñador produce sin tocar el repositorio, y va entrando al flujo de versionamiento a su ritmo. La regla de integración es una sola: sin spec, el wireframe no se integra.
La otra pieza del framework es el dev panel: un panel flotante que vive en cada página del prototipo. Permite recorrer historias de usuario, tiers y breakpoints sin recargar ni abrir las DevTools. Es contextual, sus controles cambian según dónde estés: el home ofrece sus escenas, el reader sus estados de acceso, cada herramienta los suyos. Y lee la matriz de capacidades para mostrar solo las reglas de la vista actual: quien revisa ve todas las variaciones posibles desde la pantalla en la que está parado.
Todo el trabajo queda documentado con el mismo estándar: más de cien documentos y decisiones de arquitectura numeradas. Y una regla de responsive no negociable: cada vista se verifica en tres tamaños de pantalla con evidencia.
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 hoy, con data sintética. Click para abrir en grande.
