Vibra Academy
Un solo recorrido de aprendizaje para una academia médica: sitio, plataforma y app para iPhone
- Empresa
- Vibra Academy
- Rol
- Product designer y desarrollador
- Período
- Mayo a septiembre de 2026
- Estado
- Sitio y plataforma en línea · iPhone en TestFlight
- Sitio
- vibra.academy
- Especificación de producto
- Design system
- Plataforma web
- iOS
- Sitio web
Resultados
El proyecto
Vibra Academy es una empresa de educación y mentoría médica en São Paulo, y sus estudiantes son médicos con licencia para ejercer. Diseñé y construí tres productos para ella, yo solo con agentes de IA, desde la especificación del producto hasta el back end, sobre la marca azul marino y dorada de la academia.
El problema
Los médicos estaban inscritos en cohortes, cada uno con un mentor, pero el programa vivía en muchos lugares a la vez: enlaces de videollamada, grupos de WhatsApp, PDF y hojas de cálculo compartidos. Estudiantes, mentores y el equipo de la academia lo sentían cada uno a su manera.
- 01Los estudiantes no tenían un solo lugar para retomar una clase, en la laptop o en el teléfono.Ver cómo lo resolví
- 02Las clases llegaban como archivos de diapositivas y PDF, y la única presentación web se abría con una contraseña compartida.Ver cómo lo resolví
- 03Los mentores respondían preguntas en hilos de chat, sin dónde guardar los archivos ni las tareas de seguimiento.Ver cómo lo resolví
- 04El equipo manejaba cohortes, inscripciones y materiales en hojas de cálculo y carpetas compartidas.Ver cómo lo resolví
- 05Los médicos que conocían la academia en eventos presenciales necesitaban una forma rápida de probar una clase antes de inscribirse.Ver cómo lo resolví
Cómo lo resolví
Una respuesta para cada problema. Las pantallas de la plataforma vienen de una copia local llena de estudiantes, mentores y clases inventados; las del iPhone usan los datos de ejemplo de la propia app.
01
Un solo lugar para retomar la próxima clase, en la web o en el iPhone
¿Qué hago ahora?
Ambos abren en la clase para retomar y el progreso de todo el programa, y luego los siguientes pasos: sesiones en vivo, preguntas y tareas.
02
Cada clase en el navegador, abierta por la inscripción
Una diapositiva de capítulo
Azul marino, el número del capítulo en mono y la marca de agua VB, con el contador y el índice de la presentación siempre a un toque.
418
páginas en 9 presentaciones de diapositivas y 1 PDF
449
diapositivas web, en 12 manifiestos de clase
2
clases grabadas, de 1h18m y 1h08m
40
diapositivas web de cada grabación
602
diapositivas en 16 presentaciones sobre un solo motor estático, con el resto del catálogo. Cada clase es un manifiesto tipado, así que una clase nueva es un archivo de datos, no una nueva presentación.
03
Preguntas en una cola, no en un hilo de chat
- 01 / 03Estudiante
Una pregunta, por tema
El estudiante pregunta en la web o en el iPhone, adjunta un archivo y sigue un solo hilo con todas las respuestas.
- 02 / 03Mentor
Llega a la cola del mentor
Los mentores trabajan desde una cola junto a sus mentorados, con una alerta para los que dejaron de participar, y reciben avisos por WhatsApp.
- 03 / 03Mentor
Una respuesta y una nota que solo ve el equipo
El mentor define estado y prioridad, responde en el hilo y deja una nota interna que el estudiante nunca ve.
- 01 / 03Estudiante
Una pregunta, por tema
El estudiante pregunta en la web o en el iPhone, adjunta un archivo y sigue un solo hilo con todas las respuestas.
- 02 / 03Mentor
Llega a la cola del mentor
Los mentores trabajan desde una cola junto a sus mentorados, con una alerta para los que dejaron de participar, y reciben avisos por WhatsApp.
- 03 / 03Mentor
Una respuesta y una nota que solo ve el equipo
El mentor define estado y prioridad, responde en el hilo y deja una nota interna que el estudiante nunca ve.
04
El equipo gestiona cohortes, clases y videos desde un solo panel
Panel
Todas las áreas en un solo tablero, cada una con su ícono 3D. Los conteos vienen de los datos inventados de la copia local.
Trece íconos 3D, una sola especificación
Cada área tiene un ícono de un set que hice con una misma especificación de cámara, luz y material, para que el panel, el área del estudiante y la app para iPhone se lean como un solo producto.
Para estudiantes7
Recorrido
Continuar
Agenda
Biblioteca
Preguntas
Evaluaciones
Perfil
Para el equipo6
Estudiantes
Mentores
Inscripciones
Tickets
Videos
Contenido
05
Del código QR de un evento a una clase gratuita
En el sitio o en el evento
El sitio muestra la próxima inmersión presencial. Un botón ahí, o un código QR en el propio evento, abre el mismo formulario corto.
Y un centro de ayuda para todo lo demás
15 guías divididas por rol: 6 para estudiantes, 4 para mentores y 5 para administradores, con búsqueda. Describe solo lo que la plataforma ya hace.
mentoria.vibra.academy/ajuda
Un sitio con la presencia de la academia
Grabado en el sitio en línea, de arriba abajo.
El hero
Dos médicos junto al logotipo en dorado y una frase sobre lo que representa la academia.
Hecho primero para el teléfono
Un código QR en un evento abre el sitio en un teléfono, así que el diseño móvil se hizo por separado: el hero mantiene a ambos médicos en cuadro y el formulario cabe en una pantalla.
Impacto y aprendizajes
- Sitio webEn línea
- Plataforma de aprendizajeEn línea
- App para iPhoneTestFlight, build 4
- Un sitio público, una plataforma para tres roles y una app nativa para iPhone, diseñados y construidos por una persona.
- Todas las clases en un solo motor de presentaciones, abiertas por inscripción o con un código de acceso en lugar de una contraseña compartida.
- Preguntas, archivos y seguimiento en un hilo por tema, con notas que el estudiante nunca ve.
- Un solo panel para personas, cohortes, clases y videos, y un camino de clase gratuita para leads que llegan de eventos.
Lo que aprendí
Escribir la regla de paridad desde el principio mantuvo la web y el iPhone al mismo paso: las funcionalidades llegan a ambos, con todos los estados diseñados.
Una especificación es un punto de partida. Dos decisiones que definieron el producto fueron en su contra.
La especificación decía
Correo y contraseña para el equipo, un código de cuatro dígitos para los estudiantes.
Elegí
Un solo inicio de sesión por WhatsApp con un código de seis dígitos para todos los roles, dirigido según el rol.
El inicio de sesión en línea lo dice en una frase: “Um único acesso para alunos, mentores e administradores.”
La especificación decía
Primero una interfaz oscura.
Elegí
Una interfaz clara: superficies blancas, bordes de 1px, azul marino para la estructura y dorado solo para el siguiente paso.
La dirección que definí fue precisión, serenidad y sofisticación clínica. Los tokens oscuros existen; el selector está apagado.
