DIMORDAI
Rediseño completo de un producto EdTech — sistema de diseño, 50+ pantallas, 6 estados cada una, para un equipo de 13 personas
- Categoría
- EdTech
- Rol
- Diseño UX/UI, sistema de diseño
- Plazo
- 8 meses
- Año
- 2026
Contexto
Una plataforma EdTech que había que diseñar desde cero
DIMORDAI es una plataforma de aprendizaje para estudiantes de secundaria y sus padres, creada por una startup en Armenia. Cursos, clases en vivo, deberes, exámenes, tutor con IA, referidos y pagos — todo en un producto
Cuando me uní, el diseño existente simplemente no funcionaba. El cofundador trajo a dos diseñadores — a mí y a Lina — para reconstruirlo todo desde cero. Un equipo de 13 personas en distintas zonas horarias: dos diseñadores, seis desarrolladores, product manager, cofundador y CTO
Reto
El diseño anterior era demasiado simple para producción. Seis desarrolladores esperaban mockups y no había sistema de diseño — cada pantalla requería adivinar
El equipo necesitaba un rediseño completo. No pantallas más bonitas, sino un sistema del que los desarrolladores pudieran construir sin preguntas sobre cada componente. Y lo necesitaban rápido: la startup se preparaba para postular al acelerador de Yandex
¿Cómo diseñas más de 50 pantallas sin ralentizar a 6 desarrolladores?
Enfoque
Primero el sistema, luego las pantallas
- Sistema de diseño primero — basado en Tailwind, con especificaciones. Cada componente documentado antes de usarse en pantalla
- Estados, no solo el camino feliz — cada pantalla con loading, vacío, error y skeleton. Solo el dashboard tenía 6 estados; el asistente IA, 4 estados × escritorio y móvil
- Responsive desde el primer día — escritorio (1440), tablet (768), móvil (375) para cada pantalla clave
- Dos diseñadores, un sistema — trabajé junto a Lina, dividiendo pantallas por área. Revisábamos el trabajo del otro antes de enviarlo al equipo
- Sincronizaciones semanales con desarrolladores — cada viernes, una revisión de 30 minutos. Ellos veían limitaciones que yo no había visto; yo veía interacciones que ellos no habían considerado. Problemas atrapados antes de llegar al código
- 30+ páginas de componentes — botones con 15 variantes, inputs con 6 estados, chips, diálogos, desplegables, tablas, sidebar, barras de progreso. Cada componente documentado para entrega
¿solución?
Lo que hice —
Solución
01/06
Un dashboard que muestra lo que importa
La pantalla principal saluda al estudiante por su nombre, muestra el progreso de metas por materia, los cursos activos con enlace a la siguiente lección y el horario de clases. Las tarjetas de metas con progreso circular — el estudiante ve de un vistazo dónde necesita ponerse al día. La columna derecha resalta las tareas vencidas en rojo
Solución
02/06
Un tutor IA que enseña, no solo responde
Los estudiantes eligen una materia — matemáticas, física, inglés — y hacen preguntas en lenguaje natural. La IA guía al estudiante hasta la respuesta con explicaciones paso a paso. La interfaz muestra el historial de la conversación y se adapta al nivel del estudiante. Los padres pueden ver en qué trabaja su hijo
Solución
03/06
Una landing page diseñada para conversión
El landing no describe funciones — las muestra. Una vista previa en vivo del dashboard demuestra la plataforma en acción. La llamada a la acción es un campo de teléfono con diagnóstico gratuito, sin tarjeta. Las burbujas alrededor del mockup destacan los valores clave: clases en vivo, mentoría personal, predicción de notas con IA
Solución
04/06
Lección en vivo con chat en tiempo real
Course Hub muestra la lección en estado en vivo — reproductor de video con insignia ·Live, descripción de la lección, materiales descargables y un chat lateral donde los estudiantes interactúan durante la clase. El reproductor se adapta a pantalla completa y móvil. La sección de materiales precarga la hoja de trabajo, diapositivas y hoja de cálculo para que el estudiante siga la clase
Solución
05/06
Seguimiento del progreso basado en datos
El panel de Estadísticas ofrece a estudiantes y padres una visión completa del rendimiento académico — puntuaciones previstas vs objetivo, barras de progreso del curso, trayectoria de estudio y tendencias semanales. Múltiples widgets gráficos desglosan el rendimiento por materia, tiempo y proximidad al objetivo. Diseñado para responder una pregunta: «¿voy bien?» de un vistazo
Solución
06/06
Una librería de componentes, construida desde cero
El sistema de diseño incluye 30+ páginas de componentes — botones (15 variantes en 3 tamaños), inputs de texto con cada estado (vacío, relleno, error, deshabilitado, foco), chips y tags, badges y contadores, diálogos, desplegables, barras de progreso, sidebars, tablas y más. Cada componente está marcado «listo para desarrollo». El DS sigue una arquitectura de tokens de 3 niveles: colores Primitive tokens Semánticos tokens de Componente, con espaciado y tipografía basados en Tailwind
Resultadosfin
De un diseño heredado a un producto listo para inversores en 8 meses
En 8 meses diseñé más de 50 secciones: dashboard con metas y cursos, hub de cursos con clases en vivo y deberes en 5 estados, asistente IA con tutoría por materia, autenticación con flujos separados para estudiantes y padres, referidos, estadísticas, pagos, banco de preguntas y landing
Diseño entregado al equipo frontend. La startup entró en el acelerador de Yandex y presentó a inversores. Lanzamiento de ventas, con integración de pagos en marcha. El sistema de diseño se convirtió en la base de todo el equipo
Casos límite y puntos de entrada
¿Quieres una web así con asistente de IA?
Ver los paquetes
