Formación de idiomas · Plataforma de aprendizaje corporativo

El alumno quiere aprender; su empresa, justificar la inversión

Rediseño de Fluency, la plataforma con la que se estudia un idioma dentro de la empresa. Dos perfiles con intereses distintos, la misma anatomía de pantalla y un inicio que cada quien configura.

UX/UI Design
Arquitectura de información
Sistema de diseño
Diseño responsive

Pantalla de inicio del alumno con sus indicadores, la próxima clase y el avance del plan

El inicio del alumno. Los cuatro indicadores de arriba y los módulos de abajo los elige cada persona: la pantalla no viene decidida de fábrica. El nombre del cliente está sustituido por uno ficticio en todas las capturas.

Mi rol: Diseño de producto en pareja con otra diseñadora. Me ocupé sobre todo de la capa visual, el sistema de diseño y la especificación para desarrollo; ella, de la investigación y los flujos. Las decisiones de arquitectura y de interacción las tomamos entre las dos partes.
Duración: Marzo – julio de 2026. Rediseño completo de una plataforma que ya estaba en producción y con alumnos dentro.
Plataforma: Web responsive, de escritorio a móvil. Interfaz en castellano con selector de idioma; el contenido de las lecciones, en el idioma que se estudia.
Usuarios: Dos perfiles que nunca se cruzan: el alumno que estudia y el responsable de formación de la empresa que paga el curso.
Alcance: Dos productos dentro de una misma aplicación: 20 pantallas de escritorio con sus equivalentes de móvil, un catálogo de 20 indicadores y una pantalla de inicio que cada quien monta a su gusto.
Entrega: Figma documentado componente a componente, con estados, reglas de responsive y criterios de uso. El equipo de desarrollo del cliente lo implementó sin diseñadora dentro.

01 — El desafío

Una plataforma que nadie entendía a la primera

La herramienta existía y se usaba, pero mal. El alumno entraba a ver cuándo era su próxima clase y acababa perdido entre contenidos de tres proveedores distintos que la interfaz presentaba como si fueran cosas diferentes. El responsable de formación de la empresa entraba a sacar unos datos para justificar la bonificación y terminaba pidiéndoselos por correo a la escuela.

El diagnóstico no fue que faltaran funciones: estaban casi todas. Lo que faltaba era un criterio para ordenarlas. Cada pantalla se había añadido cuando hizo falta, con su propio lenguaje, su propia tabla y su propio sitio para los indicadores. Dos personas distintas describían la misma sección con palabras distintas porque la aplicación también.

Y había una complicación de fondo: dentro de la misma aplicación conviven dos productos. El alumno mira hacia dentro —qué me toca hoy, cuánto llevo—, y el responsable mira hacia fuera —cuántos de mis 124 alumnos están en riesgo y qué papeles necesito para FUNDAE—. No comparten objetivo, ni datos, ni ritmo de visita. Y tenían que caber en una sola plataforma que se pudiera mantener.

Dos perfiles, una anatomía

cabecera, indicadores generales y módulos apilados. Aprender la pantalla del alumno es aprender la del responsable: cambia lo que se mide, no dónde se mira.

Lo que había que resolver

Que el alumno no tuviera que saber de qué proveedor viene cada contenido.
Que el responsable pudiera justificar la formación bonificada sin salir de la plataforma.
Que la discusión eterna sobre qué va en la pantalla de inicio dejara de ser una discusión.

02 — Restricciones

Lo que no se podía tocar

De negocio

La formación bonificada manda. Buena parte de estos cursos los paga la empresa y se bonifican. Eso impone pruebas, convocatorias y estados de acreditación que no se pueden simplificar porque no los decide el producto.
Los contenidos vienen de fuera. Material del tutor, contenido asíncrono de terceros y cuaderno de actividades. Son tres sistemas y tres formas de contar el progreso, y el alumno no tiene por qué enterarse.
Había usuarios dentro. Un rediseño, no un producto nuevo: tenía que reconocerse como la misma plataforma el lunes siguiente.

De diseño y de equipo

Dos diseñadoras, ningún diseñador dentro del desarrollo. Lo que no quedara escrito en el Figma se iba a resolver improvisando meses después, sin nosotros delante.
Móvil al mismo tiempo que escritorio. Cada pantalla se entregó con su versión de móvil; no hubo una fase «y ahora el responsive».
Densidad alta. Son tablas de alumnos y rejillas de indicadores. Aligerarlas quitando datos no era una opción: había que aligerar la lectura.

03 — Decisiones clave

Tres decisiones que ordenaron el resto

El trabajo se resolvió con pocas decisiones grandes y muchas consecuencias pequeñas. Estas tres explican casi todo lo que se ve en las pantallas.

Un color por perfil, no un color de marca

Decidido: el alumno trabaja en azul y el responsable en verde, sobre la misma estructura y los mismos componentes.
Por qué: hay personas que entran con los dos perfiles. Saber en cuál estás no debería exigir leer la cabecera, y el color lo resuelve antes de que la vista llegue al texto.
Coste asumido: dos escalas de color que mantener en vez de una, y cada componente duplicado en el sistema. Se sostiene porque solo cambia la tinta: ni un espaciado ni un tamaño son distintos entre perfiles.

La pantalla de inicio la monta el usuario

Decidido: los módulos del inicio se activan, se desactivan y se reordenan arrastrando, y los indicadores generales se eligen de un catálogo con un máximo de cuatro.
Descartado: una home fija decidida por nosotras, que es lo que se pedía al principio.
Por qué: no había una respuesta buena. Lo que un alumno quiere ver primero es su próxima clase y lo que otro quiere es cuánto le falta. Elegir por ellos garantizaba acertar con la mitad.
Coste asumido: hay que diseñar el estado de «no has elegido nada» y el módulo fijo que no se puede quitar. El tope de cuatro indicadores no es estético: es lo que cabe en una fila sin que la cifra encoja.

El progreso es una sección, no un dato suelto

Decidido: Seguimiento, Plan de estudios y Evaluaciones viven juntas bajo «Progreso», con la misma rejilla de indicadores en las tres.
Por qué: antes el avance estaba repartido entre cuatro pantallas y ninguna contestaba entera a «¿cómo voy?». Agruparlas convirtió cuatro respuestas parciales en una.
Coste asumido: el menú lateral gana un nivel de agrupación. A cambio, en móvil ese grupo colapsa limpio en una sola pestaña.

Un solo lenguaje para los contenidos

Decidido: los tres orígenes de contenido se presentan con la misma tarjeta, el mismo progreso y la misma unidad de medida: actividades completadas sobre el total y horas dedicadas sobre las planificadas.
Por qué: el alumno no está estudiando «en un proveedor», está estudiando inglés. Que la interfaz refleje la arquitectura de contratos de la escuela es un problema nuestro, no suyo.
Coste asumido: hubo que negociar una equivalencia entre tres formas distintas de contar el avance, y en algún caso es una aproximación. Está asumido y escrito.

04 — Solución final

La misma pantalla contada dos veces

Inicio del alumno con la rejilla de indicadores, la próxima clase, el registro de actividades y el avance del plan — Inicio del alumno: lo urgente a la izquierda, lo acumulado a la derecha y, arriba, cuatro cifras que resumen el mes.

Inicio del responsable de formación, con la misma estructura en verde y sus propios indicadores — Inicio del responsable: la misma anatomía, otra tinta y otras preguntas. Aquí no se estudia, se rinde cuentas.

Plan de estudios del alumno con su objetivo didáctico, la evolución de contenidos, la metodología y los compromisos firmados — El plan de estudios deja de ser un PDF que se firma al empezar y se archiva: pasa a ser una pantalla que se mira durante el curso.

Modal para elegir y reordenar los módulos de la pantalla de inicio

Montar el inicio: se arrastra para ordenar y se apaga lo que no interesa. «Indicadores generales» es módulo fijo y lo dice en vez de desactivarse en silencio, porque un interruptor que no responde se lee como un fallo.

Listado de actividades del alumno con el progreso de cada bloque de contenido

Las actividades, contadas igual vengan de donde vengan: completadas sobre el total, horas dedicadas y un único botón para seguir por donde se dejó.

Ejercicio de arrastrar palabras dentro de un texto, con instrucciones y progreso

Dentro de la lección, la interfaz se calla. Instrucciones a la izquierda, progreso a la derecha y el ejercicio ocupando el ancho. El contenido va en el idioma que se estudia y el marco en el del alumno: mezclarlos en la misma frase era la fuente de confusión más repetida de la versión anterior.

Pantalla de pruebas bonificadas con sus estados de acreditación

El trámite, tratado como una pantalla de producto y no como un anexo: sin iniciar, en curso y validadas, con el código de cada candidato, su convocatoria y el nivel acreditado. Es lo que permite al responsable cerrar la justificación sin pedir nada por correo.

Tres pantallas de la plataforma en móvil: inicio y progreso del alumno, e indicadores del responsable

En móvil, los cuatro grupos del menú lateral se convierten en cuatro pestañas y las rejillas de indicadores pasan de cuatro columnas a dos. Nada desaparece: se reordena. La versión de móvil se diseñó a la vez que la de escritorio, no después.

05 — Resultados y aprendizajes

Se construyó exactamente lo que estaba dibujado

El mejor resultado de este proyecto no es una métrica de uso: es que el producto que se desarrolló es el que se diseñó. El equipo del cliente implementó la plataforma sin ninguna diseñadora dentro, trabajando contra la documentación, y lo que salió se reconoce pantalla por pantalla. En un encargo que se entrega y se suelta, esa es la única garantía de que el diseño sobreviva.

2 perfiles

con la misma anatomía y los mismos componentes. Lo único que cambia entre ellos es la tinta y el vocabulario.

20 indicadores

en el catálogo, de los que cada persona elige cuatro para su inicio. La discusión sobre qué medir dejó de ser una decisión de diseño.

Retrospectiva

Documentar fue el entregable, no el papeleo. Cada componente salió con sus estados, su comportamiento responsive y el criterio de cuándo usarlo. Es lo que permitió que un equipo que no participó en el diseño lo construyera igual.
Delegar la pantalla de inicio fue mejor que acertar con ella. Estuvimos semanas discutiendo qué módulos poner por defecto. La respuesta útil no fue elegir mejor, fue dejar de elegir y diseñar bien el mecanismo para que eligieran ellos.
Diseñar a dos tiene un coste que conviene asumir pronto. Repartirnos UX y UI fue cómodo al principio y caro en el medio: las decisiones visuales cambiaban flujos y los flujos cambiaban componentes. Acabó funcionando cuando dejamos de repartir por disciplina y empezamos a repartir por pantalla.
Lo que costó más de lo previsto. La tabla de seguimiento del responsable en móvil. Nueve columnas de datos comparables no se reducen: hay que decidir cuáles tres sostienen la comparación y aceptar que el resto se consulta entrando en la ficha.
Lo siguiente. Cerrar el círculo entre el plan de estudios y las actividades. Hoy el plan dice qué contenidos toca trabajar y las actividades dicen cuánto se ha hecho, pero son dos lecturas separadas; unirlas es la mejora con más valor y la que no entró en el alcance.

Dos productos que no se estorban

Lo que antes eran dos recorridos improvisados sobre una misma base de datos es ahora una plataforma con una estructura reconocible: el alumno sabe qué le toca y cuánto lleva, y el responsable sabe cómo va su equipo y qué papeles le faltan. Ninguno de los dos tiene que entender el producto del otro para usar el suyo.