UI Kit modular para Teladoc Health — Impulsado por Salesforce Lightning Design System
Unificación de diseño, accesibilidad y escalabilidad a través de un ecosistema de UI basado en Lightning.
Implementación de diseño y accesibilidad
Cómo el refinamiento visual, el diseño responsivo y los principios de accesibilidad se unieron para crear una experiencia moderna, centrada en las personas, en todos los dispositivos.
Resumen del proyecto
Teladoc Health necesitaba una base de diseño escalable y consistente para sus plataformas de pacientes y proveedores. El objetivo era unificar la consistencia visual y funcional en los productos construidos con Salesforce Lightning Design System (SLDS). Mi rol se enfocó en definir la estructura, la lógica y la integridad visual de la interfaz, asegurando el cumplimiento de accesibilidad, la eficiencia de desempeño y la interoperabilidad de componentes entre Figma y SLDS v2.
Resumen del proyecto
Plazo y equipo
3 meses
Senior UX/UI Designer, Product Manager, equipo de ingeniería
Herramientas y metodología
Figma, Salesforce SLDS
Wireframing, integración del sistema de diseño y estandarización de componentes
Entregables clave
- • UI Kit modular
- • Design tokens
- • Biblioteca de componentes
- • Documentación de accesibilidad
Métricas de rendimiento
Consistencia de diseño en todos los módulos integrados con SLDS
(validado durante QA y desarrollo)
entrega a desarrollo más rápido entre diseño y desarrollo
(medido por la velocidad de los sprints en Jira)
Reducción de incidencias de QA relacionadas con accesibilidad
(tras implementar tokens conformes con SLDS)
Planteamiento del problema
Desafío
Crear un UI Kit unificado y escalable capaz de dar soporte a múltiples líneas de producto dentro del ecosistema de Teladoc Health, cumpliendo con los estándares de Salesforce Lightning Design System (SLDS). El sistema debía mantener el cumplimiento de accesibilidad, acelerar los flujos de diseño a desarrollo y mantenerse flexible para integraciones futuras.
Enfoque
Siguiendo una metodología basada en sistemas de diseño, estructuré el proceso en torno a:
- Auditoría: analicé los patrones de interfaz heredados, las inconsistencias visuales y los componentes duplicados.
- Wireframing: definí una nueva jerarquía de información y estructuras de layout para mejorar la claridad y reducir la carga cognitiva.
- Integración de diseño: traduje los wireframes en maquetas de alta fidelidad usando componentes de SLDS, asegurando la alineación con los design tokens de Salesforce.
- Documentación: construí una referencia de diseño viva para que diseñadores y desarrolladores mantuvieran la consistencia de los componentes.
- Validación: realicé sesiones de QA con ingeniería para confirmar que el comportamiento se alineara con los estándares de los componentes Lightning.
Solución
Desarrollé un UI Kit modular que agilizó la creación de interfaces para pacientes y proveedores. El kit incluyó plantillas de componentes basados en Lightning, sistemas de grillas adaptativas y estilos visuales tokenizados. Los estándares de accesibilidad se incorporaron en cada componente, asegurando el cumplimiento de WCAG 2.1 y una escalabilidad más rápida para funcionalidades futuras.
Los entregables incluyeron una biblioteca completa en Figma, documentación de diseño y lineamientos de integración para el equipo de ingeniería.
Resultados
El proyecto unificó el lenguaje visual de Teladoc Health en múltiples productos digitales, mejorando la escalabilidad y la consistencia entre plataformas.
Fortaleció la alineación entre diseño e ingeniería mediante tokens compartidos de Lightning y estándares de componentes documentados, reduciendo la creación redundante de interfaz en un 45% y disminuyendo los costos de mantenimiento.
El nuevo sistema también mejoró el cumplimiento de accesibilidad y la gobernanza de diseño a largo plazo mediante documentación estructurada y validación de patrones.
Conclusión clave
Un sistema de diseño sólido no solo mejora la consistencia: acelera la innovación. Al integrar accesibilidad, modularidad y escalabilidad multiplataforma en el núcleo del UI Kit, este proyecto transformó el flujo de trabajo de diseño de Teladoc en un ecosistema cohesionado y basado en Lightning.