Plataforma digital para un colegio profesional
Discovery, dirección editorial de diseño y arquitectura propuesta para un colegio profesional de más de 50 años que necesitaba modernizar la manera en que sirve a sus miembros.
- Next.js 16 (propuesto)
- Supabase (Postgres, Auth, RLS, Storage)
- Newsreader · Public Sans
- Vercel
De un vistazo
Un colegio profesional con más de cincuenta años de historia necesitaba digitalizar la manera en que sirve a sus miembros. La junta directiva quería un portal del miembro, una bolsa de empleo, un sistema de eventos y educación continua, y un sitio público que no se sintiera como las plantillas institucionales que les habían cotizado las agencias grandes. Querían craft, no un CMS que se viera como cualquier otro CMS.
Lideré el discovery con la junta, produje once mocks editorial-grade que anclaron la dirección visual, y entregué una propuesta que la junta está actualmente evaluando.
Esto no es un producto en producción. Es un ejemplo concreto de cómo dimensiono y dirijo trabajo institucional con peso.
El contexto
El colegio sirve a miles de profesionales registrados. Su huella digital actual es el tipo de sitio WordPress que crece orgánicamente durante una década: útil, anticuado e incapaz de soportar los flujos que la junta quiere a continuación. Los servicios al miembro corren por correo y PDFs. Los créditos de educación continua se rastrean en hojas de cálculo. La bolsa de empleo, cuando existe, existe en un grupo de Facebook.
Dos presiones empujaron a la junta a actuar:
- Los miembros menores de treinta y cinco esperan una experiencia digital que coincida con el resto de su vida profesional.
- La institución tiene cincuenta años de credibilidad y peso de marca. Una mala superficie digital erosiona eso.
El brief fue generoso: modernizar, pero no sentir como una startup. Verse institucional en el sentido de peso y seriedad, no en el sentido de anticuado.
Discovery
Hice dos sesiones con la junta. La primera fue abierta: dónde duele, quién carga el trabajo hoy, qué han intentado, qué se sintió mal. La segunda fue acotada: prioridades, restricciones duras, qué no puede shippearse en la fase uno.
Tres hallazgos definieron la propuesta:
El onboarding del miembro es el cuello de botella. Los nuevos miembros pasan por un proceso manual de papel y correo que toma semanas. Automatizar el onboarding entregaba valor visible tanto al staff como a los nuevos miembros. Se convirtió en la Fase 1.
La bolsa de empleo es una funcionalidad, no un producto. Les habían cotizado una “plataforma de bolsa de empleo” separada por otro proveedor. Después de mapear el flujo real, la bolsa son doce tablas de base de datos y tres pantallas, no un sistema separado. Plegarla dentro del portal del miembro redujo la cotización del otro proveedor aproximadamente a la mitad.
El brief visual estaba aguas arriba del brief técnico. Habían visto plantillas institucionales de agencias más grandes y las habían rechazado como “se siente un banco con un comunicado de prensa.” El movimiento correcto fue liderar la propuesta con dirección de diseño, no con arquitectura. Eso reformuló la conversación de “cuánto cuesta” a “es la única que se ve como nosotros.”
Arquitectura
El sistema propuesto es una sola aplicación Next.js 16 respaldada por Supabase, con una capa de contenido para páginas institucionales y un portal autenticado para miembros.
Modelo de identidad del miembro. Los miembros no son usuarios genéricos. Tienen un ID emitido por el colegio, una especialidad, un estado (activo, suspendido, retirado) y un ledger de educación continua. La autenticación está cableada para que el ID del miembro sea el identificador canónico, con correo y contraseña como canal de acceso. Row-level security aplica la regla de que los miembros ven solo su propio ledger y el staff administrativo ve el roster completo.
Split del modelo de contenido. Las páginas institucionales (sobre el colegio, junta, historia, noticias) viven en una colección de contenido con edición editorial-amigable. Las superficies orientadas al miembro (portal, bolsa de empleo, eventos, créditos de educación) viven en tablas relacionales con migrations propias. El split mantiene a los redactores fuera de la base de datos y a los ingenieros fuera del loop de revisión editorial.
Entrega por fases. La Fase 1 entrega onboarding + portal + refresh del sitio público. La Fase 2 agrega bolsa de empleo + eventos. La Fase 3 agrega el sistema de créditos de educación continua y la integración con los registros financieros existentes. Cada fase es demable de forma independiente y facturable de forma independiente.
Dirección de diseño
Los once mocks se produjeron en dos sesiones enfocadas. La dirección se fijó temprano y se mantuvo:
- Restraint editorial. Newsreader serif para display, Public Sans para body. Fondo blanco frío. Acento único (un navy institucional profundo, no el dorado que la agencia anterior había propuesto y que la junta visiblemente había hartado).
- Movidas anti-plantilla. Sin carruseles. Sin “hero con foto stock de profesionales dándose la mano.” Sin badges. La home es un layout editorial estructurado que respeta la edad de la institución sin vestirla como pieza de museo.
- Tipografía como marca. Sin rediseño de logo en alcance, la tipografía fue la expresión de marca. Newsreader a tamaños display hace el trabajo principal; el acento navy es la puntuación.
- Paridad mobile, no mobile como afterthought. El mismo restraint se traduce a mobile reduciendo, no rediseñando. La grilla colapsa; el tipo se ajusta; el peso editorial sobrevive.
La respuesta de la junta, en sus palabras: “es la única que se siente como nosotros.” Esa frase es el entregable de discovery que optimizo. La arquitectura sigue de ahí.
Lo que me llevo
Liderar con dirección de diseño cuando el cliente ha sido cotizado por agencias más grandes. La propuesta técnica aterriza distinto cuando lo visual ya está entendido y bienvenido.
Los modelos de ID de miembro son distintos a los modelos de ID de usuario. Tratar a los miembros como entidades first-class (con estado, ledger, historia) en lugar de como usuarios autenticados habría sido un refactor en la fase dos. Atraparlo en discovery ahorró la reconstrucción.
La entrega por fases hace cómodo al cliente institucional. Cada fase es lo suficientemente pequeña para aprobar y lo suficientemente grande para demonstrar. La política interna de aprobar un solo contrato grande es mucho más difícil que tres más pequeños.
Stack
Next.js 16 App Router en Vercel. Supabase para Postgres, autenticación, storage y row-level security. Newsreader y Public Sans cargados vía Google Fonts con subset y display swap. Capa de contenido para páginas institucionales, schema relacional para superficies orientadas al miembro. Sentry para observabilidad. La infraestructura aburrida se queda aburrida a propósito; la UX editorial es donde el presupuesto va.