Project Name One

Digital FEMSA DS

Tipo de proyecto

Design System

Role

UI Designer

Duración

1 año

Año

2023 - 2024

Project Overview

Digital FEMSA se propone crear un Design System que reduzca los tiempos de desarrollo y optimice la creación de productos digitales. Este recurso ofrecerá a los colaboradores las herramientas necesarias para mejorar su desempeño, proporcionando información sobre la construcción de componentes y su uso adecuado en cada contexto.

El trasfondo de nuestra aventura

Problemática

Los productos digitales de Digital FEMSA carecían de consistencia, ya que cada uno tenía su propio UI Kit con componentes distintos, aunque deberían ser los mismos. Esto afectaba tanto al área de diseño como al de desarrollo.

Objetivo

Crear un Design System que integre todos los productos del ecosistema Digital FEMSA, documentando cada componente para optimizar la comunicación con el equipo de desarrollo.

Definiendo el Rumbo

Tras una exhaustiva investigación y evaluación, se decidió que las herramientas clave para la construcción y documentación del Design System serían Figma y Zeroheight. Posteriormente, analizamos los componentes de cada producto para determinar cuáles integrar al sistema, evitando duplicaciones y estableciendo un plan para consolidarlos en un único archivo centralizado.

¡Un nuevo color está por llegar!

Durante la definición de los próximos pasos, se informó a todos los equipos de los diferentes proyectos sobre la necesidad de realizar cambios en el branding de los productos digitales.

Esta noticia fue una oportunidad perfecta para resaltar las ventajas de contar con un Design System. Una vez esté listo, podremos demostrar su efectividad mediante la actualización de las librerías de cada proyecto en un solo movimiento.

[removal.ai]_37cd4302-b730-42d9-a284-e8e6406c65ab-diseno-sin-titulo-2.png

¡El final se acerca!

Se inicio la construcción del Design System en Figma, basandonos en la metodología de atomic design.

Ahora que todo está centralizado en un solo archivo y todos los productos están conectados a la misma librería, es momento de documentar en Zeroheight los elementos de marca, voz y tono, los átomos, moléculas, organismos, páginas, sus usos, dimensiones, variantes, estados, temas de accesibilidad, entre otros.

Con esto, concluimos la primera fase de implementación del Design System. Lo siguiente es mantenerlo actualizado, ya que no está escrito en piedra, sino que debe evolucionar y alimentarse constantemente.