Sistema de Gestión de Salud Laboral
Sistema de control médico del personal de un área: documentación, evaluación por pasos, convocatorias, seguimiento e historial. Diseñé la experiencia y la interfaz, la maqueté y la adapté por completo a mobile.
Antes
El área necesitaba seguir el control médico de su personal en un sistema propio.
Qué había que resolver
Era un circuito con muchos pasos y estados, que tenía que ser claro para quien lo usa y funcionar bien en escritorio y en el teléfono.
Qué hace.
Las capacidades principales del sistema.
Documentación
Carga y control de la documentación médica de cada persona, con archivos subidos por fragmentos.
Evaluación por pasos
Revisión guiada en varios pasos, con validaciones que cambian según el caso.
Convocatorias
Citación del personal a controles y seguimiento de cada convocatoria.
Seguimiento e historial
Estado de cada caso y su historia completa, incluidas las rectificaciones.
Permisos por perfil
Vistas y acciones distintas según el perfil, con la navegación armada desde los permisos.
Indicadores
Gráficos con el estado general de los controles.
Cómo está armado
- 01PAGESentradas de pantalla
- 02FEATUREScontratos · hooks · UI
- 03ADAPTERSAPI · mock · IndexedDB
- 04SHAREDquery client · sesión · UI
- 05APILaravel 12 · SQL Server
Decisiones técnicas.
Qué se eligió y qué implica.
- 01
Mobile como requisito
UX/UI · míaCada pantalla se maquetó pensando también en el teléfono, incluidos los formularios por pasos y los listados.
→ El sistema se puede usar desde cualquier tamaño de pantalla.
- 02
MUI combinado con CSS BEM
UX/UI · míaLos componentes de MUI se estilizaron con CSS propio organizado en BEM.
→ Una capa visual propia sobre una librería de componentes.
Diseñar toda la experiencia e interfaz del sistema y adaptarla por completo a mobile.
- 01Diseño UX/UI de todo el circuito: documentación, evaluación por pasos, convocatorias, seguimiento e historial.
- 02Maquetación y estilos de todas las pantallas.
- 03Adaptación completa a mobile, la parte que más disfruté.
- 04Corrección de bugs a medida que aparecían.
Cómo usé IA
Usé IA como herramienta durante la maquetación y la corrección de bugs.
Resultado
Está en producción.