top of page

Flavio

Flavio es el cuaderno digital del profesorado: organiza el día a día, da visibilidad al equipo y reduce el trabajo repetitivo.

ROL

Product Designer No-code Dev
Brand Designer

Tipo

Proyecto personal

Herramientas

Figma · Claude Code· Supabase

EL PROBLEMA

La burocracia no debería dar clase.

El profesorado dedica tiempo a registrar y reportar información que ya existe en su trabajo diario, y la coordinación se entera tarde. Los productos existentes son cuadernos ágiles sin jerarquía o ERPs escolares pesados. El hueco: una herramienta que el profesorado quiera usar y que permita coordinar con permisos reales.

CÓMO FUNCIONA

Un producto para el centro, no otra tarea para el profesor.

Flavio es un SaaS B2B: el centro lo contrata y lo habilita para sus equipos. Tres perfiles, cada uno con lo que puede consultar.

GESTIONA

Profesorado

Trabaja con varias asignaturas y grupos desde su actividad cotidiana: notas, asistencia, tareas, incidencias.

CONSULTA

Coordinación

Ve el progreso de su departamento sin solicitar informes individuales.

​

SUPERVISA

Dirección

Accede a la información que corresponde a su alcance operativo y de seguridad.

​

EL PROCESO

Del problema documentado a un sistema comprobable.

El trabajo no empezó diseñando pantallas. Empezó entendiendo qué debía resolver Flavio, qué información podía circular y cómo demostrar que el sistema respetaba sus propios límites.

01

Investigar el problema

Fuentes sindicales, comparativa de producto y foros del sector. No buscaba una lista de funciones, sino entender por qué la coordinación depende de reuniones e informes manuales.

02

Modelar roles y permisos

Tres perfiles, cada uno con lo que puede consultar. La unidad de trabajo es asignatura + grupo, con acceso de mínimo privilegio.

03

Diseñar y prototipar

El sistema gira alrededor del cuaderno del aula, que genera la información sin crear un flujo paralelo de informes. El design system se repite igual en los tres roles, y con Claude Code construí una demo funcional.

04

Comprobar lo invisible

Probé los permisos que deben funcionar y los accesos que deben fallar: 613 pruebas de autorización y 815 de cliente.

DECISIÓN CLAVE

La información sensible no hereda permisos.

La pregunta de partida: ¿cómo coordinar un centro sin conceder más acceso del necesario?

01

La información sensible tiene una política propia

Los datos médicos, alergias y observaciones no heredan los permisos del resto de la ficha del alumno.

LA INTERFAZ

02-aula-dashboard.png
05-administracion-panel.png
04-coordinacion-panel.png
03-aula-alumnado.png
10-aula-ficha-alumno.png
08-coordinacion-alumnado.png

RESULTADOS

Un sistema que se comprueba solo.

No es una maqueta navegable: es una aplicación con modelo de datos, autorización y suite de pruebas, desplegada como demo pública con datos ficticios.

​

La interfaz se revisó también fuera de la pantalla de escritorio: en el móvil y la tablet, en tamaño pequeño y grande, siempre contra la versión real publicada. Se hizo además una auditoría de accesibilidad que comprobó el contraste de color, que el foco se vea con claridad al navegar con teclado, que los botones sean lo bastante grandes para tocarlos con el dedo, que la aplicación respete cuando alguien pide menos movimiento en pantalla, y que las casillas se vean y funcionen como se espera. Y todo eso queda vigilado por pruebas automáticas que comprueban, en cada nueva versión, que el foco, el contraste y cada botón siguen funcionando bien.

LO QUE APRENDÍ

Diseñar productos, no solo pantallas.

La intuición orienta, pero la evidencia decide

Los permisos, el foco y el contraste no se perciben a simple vista: hay que medirlos.

La arquitectura del producto también es experiencia de usuario

Si el modelo de datos y los permisos se definen tarde, la interfaz acaba ocultando contradicciones.

El alcance es una herramienta de diseño

Prototipo funcional: no incluye login de familias, matriculaciones, boletines oficiales, facturación ni IA real.

bottom of page