Contexto

Tras una prueba piloto exitosa, era esencial establecer una solución permanente que mantuviera una identidad visual única para el sitio web de turismo. La falta de un sistema de diseño escalable había dificultado previamente el mantenimiento y expansión del sitio.

Problema

El equipo enfrentó desafíos significativos debido a su inexperiencia con sistemas de diseño sólidos, una paleta de colores limitante y la presión de plazos ajustados. Esto resultó en inconsistencias y dificultades para cumplir con los estándares de accesibilidad.

Objetivos

• Establecer un sistema de diseño claro y coherente que refleje la identidad única del sitio web de turismo.

• Asegurar la accesibilidad y la facilidad de uso en todos los componentes del sitio.

• Facilitar una colaboración efectiva entre diseñadores, desarrolladores y otros miembros del equipo.

Proceso

1. Inventario y documentación: Realicé un inventario completo y documenté detalladamente todos los elementos visuales y funcionales del sitio para estandarizar los componentes.

2. Garantía de accesibilidad: Conduje pruebas manuales y utilicé herramientas automatizadas para asegurar que cada elemento cumpliera con los estándares de accesibilidad de nivel AA.

3. Colaboración y comunicación: Organizamos reuniones periódicas y mantuvimos una comunicación abierta para resolver dudas y garantizar la coherencia en el diseño y su implementación.

Solución

• Sistema de Tokens y Variables en Figma: Implementé un sistema de tokens y variables que facilitaron la nomenclatura y el uso coherente de los componentes.

Estructura y nomenclatura: Tokens de diseño

Tokens en Figma

• Documentación técnica para desarrollo: Creé una documentación técnica completa que incluye guías precisas para la implementación de los componentes.

Documentación técnica del componente 'Select'

• Documentación de uso para UX: Desarrollé una documentación clara y concisa con definiciones y ejemplos de uso de los componentes para facilitar su aplicación en el diseño de interfaces.

Documentación para el componente 'Button'

Logros

• Implementación Rápida: El sistema de diseño se completó y documentó en solo tres meses.

• Mejora de la Colaboración: La colaboración entre disciplinas mejoró significativamente, lo que se reflejó en la calidad de los entregables y en el nivel de competencia del equipo.