Las ventajas de crear un Design System

He titulado este artículo así porque me gustaría contaros las ventajas de diseñar con un Design System, para ello remontemos a finales de mayo del 2018 cuando comencé a trabajar en HETIKUS como UX/UI senior. En esta startup tuve la oportunidad de comenzar a diseñar un producto digital desde cero, trabajando muy de cerca con un pequeño equipo de tecnología que con los meses fue creciendo. Unos meses después me ofrecieron ser la responsable del área de diseño.

HETIKUS Platform nació de la semilla de un producto mucho más pequeño que ya estaba funcionando en España y Panamá y que da servicio a más de 100 clientes. La idea original era lanzar un primer módulo de un total de seis a finales del verano del 2018 y cada tres meses lanzar un nuevo módulo al mercado.

Trabajamos de la mano de los stakeholders en diversas reuniones donde hablamos de los objetivos de negocio y las funcionalidades más importantes del primer producto. Con continuos puntos de contacto con el equipo de tecnología fuimos creando los primeros workflows y pantallas. Teniendo en cuenta las fechas del roadmap solo nos fue posible realizar varios test de guerrilla con el prototipo navegable en Marvel antes de pasar a desarrollo.

Al conocer la envergadura del producto y para tener un mayor control y eficiencia decidí comenzar a crear un Design System donde pudieramos trabajar siempre con los mismos componentes y patrones la interfaz de usuario que nos aportase mayor versatilidad y rapidez a la hora de crear nuevos flujos de pantallas y mucha más consistencia en el producto final.

Si ya has oido hablar sobre los Design System pero todavía no tienes claro lo que es, esta es la definición según el diseñador Jeremy Keith:

La definición generalmente aceptada de un sistema de diseño es que es el círculo exterior: abarca bibliotecas de patrones, guías de estilo y cualquier otro artefacto. Pero hay algo más. El hecho de que tenga una colección de patrones de diseño no significa que tenga un sistema de diseño. Un sistema es un marco. Es un libro de reglas. Es lo que te dice cómo esos patrones trabajan juntos.

Era la primera vez que creaba desde cero un sistema de diseño por lo que los inicios fueron lentos ya que según diseñaba tenía que documentar y organizar los elementos para que el bebe no se convirtiera en un adolescente rebelde. A día de hoy por fín hemos conseguido ajustar/crear/renombrar y aglutinar elementos dentro de la libreria, es un trabajo que necesita dedicación y constancia ya que estará vivo y en constante cambio durante todo el proceso de creación del producto.

Estas son algunas de las ventajas que ha día de hoy ha aportado su uso:

1. Reducción de tiempos. Reducción de tiempos tanto para el equipo de diseño como para el de desarrollo.

2. Mínimos cambios. La cantidad de cambios que debe asumir desarrollo es muy reducido.

3. Mejor relación entre equipos. Menos fricciones entre el equipo de diseño y desarrollo debido al conocimiento compartido por ambos equipo sobre la interacción y  comportamiento de los elementos de diseño.

 

Resumiendo podemos decir que el uso de un sistema de diseño ayuda a que el equipo trabaje no solo más rápidamente sino también mejor. Actualmente Marta García y yo estamos en la fase de diseño del tercer módulo que vamos a lanzar y hemos podido observar cómo los tiempos se han reducido a la mitad. Indudablemente la reutilización de elementos comunes hace que diseñemos más rápido y tengamos menos fallos tanto en la interacción como a nivel visual haciendo mucho más consistente el producto final.

Si queréis saber más os recomiendo leer estas referencias 🙂

Referencias

Muy buena y completa esta explicación de Laura Hernandez del departamento de diseño de Beeva.
Design System por Jeremy Keith (en inglés)
Danny Saltaren (diseñador experto en crear sistemas de diseño)
Comentario