Sanet 2.0 - Web app
SANET, el sistema de información hospitalaria, en su primera versión base está diseñado sobre código Java, rígido y difícil de mantener. El objetivo era ambicioso: no un simple rediseño, sino una reinvención total. Se debía construir desde cero una plataforma SaaS moderna, escalable y con una experiencia de usuario superior, migrando el stack tecnológico a Angular para agilizar el desarrollo futuro. Mi misión iba más allá de entregar pantallas: era establecer los cimientos de un producto digital coherente y disciplinado para los próximos años.
Herramientas y tecnologías utilizadas:
Investigación estratégica
El proyecto inició con un análisis exhaustivo del contexto operativo. En colaboración con la gerencia de producto, evaluamos el ecosistema competitivo para identificar brechas de oportunidad. Sin embargo, el valor diferencial radicó en la aplicación de psicología del color en entornos críticos. En el sector salud, la codificación visual no es ornamental, es funcional y prioritaria. Establecer una semántica estricta (rojo para alertas vitales, naranja para urgencias, amarillo para precaución) fue una decisión de diseño basada en la seguridad del paciente y la eficiencia cognitiva del personal médico.
Sistematización y gobernanza
Para gestionar la complejidad del ecosistema, desarrollé un sistema de diseño robusto y escalable que actuara como única fuente de verdad:
- Definición de 32 componentes atómicos con más de 70 variantes: abarcando desde elementos fundamentales hasta estructuras complejas de visualización de datos.
- Documentación de una guía de estilo semántica, estableciendo reglas claras de uso contextual (ej. feedback de sistema, jerarquía de acciones).
- Implementación de guías de uso detalladas para facilitar el onboarding de nuevos diseñadores y mantener la integridad visual del producto a largo plazo.
Gestión de equipos y escala
Para la producción de los 12 módulos, establecí una arquitectura de componentes maestros en Figma. Mi rol se centró en la habilitación y supervisión del equipo de diseño:
- Upskilling técnico: Capacité al equipo de 9 diseñadores en funcionalidades avanzadas de Figma (Auto-layout, Properties) para estandarizar el flujo de trabajo.
- Estrategia de ejecución: Asigné responsabilidades por clústers funcionales, supervisando personalmente la adherencia al sistema de diseño (Design QA).
- Alineación funcional: Colaboración estrecha con analistas de negocio para asegurar que cada interfaz respondiera a requerimientos técnicos y funcionales precisos.
Design Ops e integración frontend
Para cerrar la brecha entre diseño e implementación, lideré la capacitación del equipo en fundamentos de Angular y Material Design. El objetivo era entregar maquetas funcionales de alta fidelidad.
Al auditar las entregas iniciales, detecté una falta de estandarización crítica en el código frontend, lo que representaba un riesgo de deuda técnica a futuro. La implementación variaba significativamente entre desarrolladores.
Solución: Implementación de estándares de código (DesignOps).
Evolucioné el Sistema de Diseño para incluir especificaciones técnicas estrictas:
- Mapeo directo de componentes: Definición exacta del componente de Angular Material correspondiente a cada elemento de diseño.
- Arquitectura CSS modular: Estandarización de clases y estilos utilitarios.
- Librería de Snippets: Creación de fragmentos de código reutilizables para estructuras complejas, asegurando consistencia y velocidad de implementación.