Plan de Ejecución del Sistema de Diseño en BILL: Estrategias y Gobernanza 🎨

La implementación efectiva de un Sistema de Diseño (DS) en una organización puede transformar la manera en que los equipos colaboran y crean, estableciendo un lenguaje visual cohesivo que potencie la experiencia del usuario.

1. Introducción y Contexto del Sistema de Diseño (DS) 📊

Un Sistema de Diseño se refiere a un conjunto de patrones, reglas y principios que guían la creación de componentes visuales y experienciales dentro de una plataforma. En BILL, se ha decidido optimizar este sistema mediante la actualización de la gobernanza y la colaboración entre equipos. Este enfoque busca fomentar un modelo de co-propiedad entre el equipo de DS y los equipos de características, facilitando una comunicación más fluida y una mayor eficiencia en los procesos de desarrollo.

La nueva estrategia incluye un modelo de gobernanza que toma inspiración de un enfoque federal/estatal/local, permitiendo que los equipos de diseño y desarrollo trabajen en estrecha colaboración para crear productos que resuenen con las necesidades del usuario final. Este primer conjunto de cambios se documentó en un memorando destinado a difundir las actualizaciones estratégicas y garantizar que toda la organización esté alineada.

2. Estrategias de Optimización para Angular y React 🔧

El equipo de DS se encuentra en una fase de optimización que se extenderá hasta el segundo trimestre del ejercicio fiscal 2024. Para los desarrolladores de Angular, se están optimizando componentes web que integran bibliotecas de terceros; en el caso de React, la biblioteca también está disponible y se actualizará para cumplir con los estándares de BILL.

Los diseñadores y desarrolladores deberán colaborar de manera efectiva si se presentan discrepancias entre los diseños en Figma y los componentes implementados en código. Esta colaboración se verá facilitada a través de "design jams", donde se fomentará la co-creación y se explorarán nuevas ideas visuales y de interacción.

3. Fases de Implementación del Sistema de Diseño 🌟

El plan de ejecución para el Sistema de Diseño se divide en tres fases principales:

Fase 1: Optimización (Q2 FY24)

En esta fase, se optimizan los componentes web para Angular y se actualiza la biblioteca de React acorde a los estándares de la organización. Se llevarán a cabo talleres de diseño para refrescar los estándares visuales y de interacción.

Fase 2: Refresco (Q3 FY24)

Esta fase implica la implementación de los cambios resultantes de los "design jams", tanto para Angular como para React, asegurando que el sistema esté alineado con la evolución de las necesidades de los equipos de desarrollo.

Fase 3: Transferencia (Q4 FY24)

Una vez que los componentes rediseñados estén disponibles, los equipos de características podrán construir utilizando bibliotecas específicas del marco que coincidan con los diseños de Figma. Este paso representa una transición hacia un futuro donde la coherencia entre diseño y desarrollo sea la norma.

4. Modelo de Gobernanza Federal/Estatal/Local 🏛️

El modelo de gobernanza introducido en BILL se divide en tres niveles:

• Federal: Se refiere a la identidad corporativa de BILL que debe ser uniforme a través de productos, marketing y soporte.
• Estatal: Describe un sistema de diseño visual que se mantiene consistente en todo el producto registrado.
• Local: Permite variaciones específicas de estilo visual y de interacción en áreas determinadas del producto.

Los "bibliotecarios", como se les ha denominado temporalmente, son los cuidadores locales responsables de estas variaciones, asegurando que cada parte del diseño siga alineada con la estrategia global.

5. Potenciando la Colaboración y Capacitación 📚

Para facilitar la implementación del sistema de diseño, es crucial que todos los miembros del equipo tengan la oportunidad de contribuir y desarrollar componentes. Las sesiones informativas, los "design jams" y las horas de oficina estarán disponibles para que los diseñadores y desarrolladores discutan sobre sus necesidades y colaboren en la creación de una biblioteca de diseño robusta y accesible.

También se explorarán herramientas de documentación más potentes y se brindará capacitación en accesibilidad para garantizar que todos los productos cumplan con los estándares requeridos. La flexibilidad es esencial, permitiendo que los equipos opten por sistemas de diseño de terceros cuando sea necesario, siempre que se mantenga la conformidad con los estándares de accesibilidad y marca.

6. Conclusión y Próximos Pasos 🚀

La evolución del Sistema de Diseño en BILL es un proceso continuo que exige participación activa y colaboración entre equipos. Aprovechando eventos de co-creación y flexible toma de decisiones, la organización puede adaptarse a las necesidades cambiantes y permitir que el equipo de diseño se alinee más estrechamente con sus objetivos estratégicos.

A medida que se implementan estos cambios, es fundamental mantener el enfoque en la mejora continua y anticipar posibles discrepancias entre el diseño y la realidad del código. Solo mediante la cooperación y una comunicación efectiva se logrará crear un sistema que no solo satisface, sino que supere las expectativas de nuestros usuarios.