Sistema de Gestión de Pacientes
Diseño UI de 8 módulos para sistema de gestión de pacientes: historial médico, medicación y programación de medicinas. Investigación con stakeholders y extensión de components library para dominio healthcare.
Se diseñó un sistema completo de ~48 pantallas (desktop + mobile) manteniendo coherencia visual entre módulos, extendiendo la library de componentes existente con nuevos elementos específicos para el dominio de salud.
Rol
UI Designer — Investigación con stakeholders, diseño de pantallas y components library
Objetivo
Diseñar un sistema healthcare completo con 8 módulos, ~48 pantallas y consistencia visual desde cero
El Desafío
StellusRX necesitaba un producto nuevo de healthcare para gestión de pacientes que abarcara 8 módulos: historial médico, medicaciones, programación de medicinas y más. Cada módulo requería múltiples pantallas en desktop y mobile con consistencia visual desde cero.
El desafío era doble: diseñar un sistema completo manteniendo coherencia entre módulos, y extender la library de componentes existente con nuevos elementos específicos para dominio de salud.
Proceso
Investigación con Stakeholders
- Reuniones con Product Owner y Business Analyst para recolectar requerimientos por módulo
- Comprensión de flujos de usuario: buscar paciente, revisar historial, registrar medicación, programar medicinas
- Mapeo de 8 módulos con ~3 pantallas cada uno (desktop + mobile)
Arquitectura de Pantallas
- Definición de navegación, jerarquía de información y patrones de interacción entre módulos
- Desktop + mobile por cada módulo — ~48 pantallas en total
- Coherencia visual desde cero: misma estructura, mismos patrones en los 8 módulos
- Pantallas basadas en componentes existentes de la library de Figma
- Nuevos componentes para casos de uso específicos del dominio healthcare
- Consistencia visual entre los 8 módulos y las 2 plataformas
Design System
El sistema se construyó sobre una library de componentes preexistente, extendiéndola con nuevos elementos específicos para el dominio de salud.
Tokens & Fundamentos
Paleta de colores healthcare, tipografía, espaciado, bordes y sombras definidos como variables en Figma para garantizar consistencia entre los 8 módulos.
Componentes Atómicos
Botones, inputs, selects, badges de estado, avatares, switches y toggles — tanto preexistentes como nuevos componentes específicos para formularios de salud.
Componentes Compuestos
Cards de paciente, tablas de historial, formularios de medicación, calendar de programación, headers de módulo y paneles de información clínica.
Patrones de Interacción
Búsqueda de paciente, flujo de programación de medicinas, navegación entre módulos, estados de carga, validación de formularios y feedback de acciones.
Responsive Design
Adaptación de cada módulo de desktop a mobile. Cómo los componentes se reorganizan en pantallas pequeñas manteniendo la funcionalidad y legibilidad.
Pantallas Clave
Impacto
8
Módulos diseñados
~48
Pantallas (desktop + mobile)
2
Plataformas (desktop + mobile)