Caso de estudio
Design System - ServiPAG 2023
Actualización de imagen corporativa
CHALLENGE
Instrucciones para la Creación del Design System en línea con la Transformación de Marca de Servipag
Objetivo: Crear un Design System que refleje y respalde la transformación de marca de Servipag, garantizando la coherencia visual y la eficiencia en el desarrollo de productos digitales.
Definición de Objetivos y Alcance
1.1. Realizar un análisis detallado de la transformación de marca de Servipag y documentar los elementos clave que deben reflejarse en el Design System.
1.2. Establecer objetivos claros para el Design System, incluyendo la consistencia visual, la eficiencia en el desarrollo y la escalabilidad.
1.3. Determinar el alcance del Design System, identificando los componentes visuales y de interacción que serán cubiertos.
Creación y Documentación
2.1. Prototipado Inicial: Desarrolla un prototipo inicial del Design System que incluya los elementos visuales y de interacción acordados. Asegúrate de que refleje la nueva identidad de Servipag.
2.2. Documentación Detallada: Crea un manual del Design System que documente los principios de diseño, pautas de estilo, componentes y patrones de interacción. La documentación debe ser clara y accesible para todos los equipos.
MI ROL
1.- Analizar la nueva imagen de ServiPAG y sus diferencias con la imagen anterior.
2.- Establecer los objetivos y alcance del nuevo sistema de diseño.
3.- Prototipado en Figma y documentación.
EL EQUIPO
En este Challenge participó el equipo de UX-UI de ServiPAG conformado por 5 personas además de mi.
LÍNEA DE TIEMPO
JUL 2023 - SEP 2023
Evaluación de transformación de marca
Analisis de nueva imagen - Revisión de otros Design Systems - Identificación de elementos clave
En esta primera etapa realice un análisis para evaluar a grandes rasgos los cambios mas evidentes de esta transformación de marca y comenzar a trabajar. Como parte de este análisis revise varios sistemas de diseño existentes para utilizarlos como referencia o guía ya que, si bien siempre he trabajado con sistemas de diseño, era la primera vez que crearía uno desde cero.
Por supuesto se examinaron los cambios en identidad visual, tono de voz y valores, e identifiqué los elementos clave que debían incorporarse al Sistema de diseño como son los colores, tipografías, iconografías, espaciados, etc.
Definición de objetivo del Design System
Objetivos - Framework - Componentes visuales
Para este punto ya habiendo realizado una evaluación previa definimos el objetivo de el sistema de diseño, el cual fue:
«Crear un sistema de diseño que describa los estandares de diseño, que contenga la documentación, principios, un set de herramientas y patrones UI, alineado a la nueva imagen y que optimice los procesos de desarrollo aplicando Bootstrap V5.0»
Es importante resaltar que para definir este objetivo colaboramos con todo el equipo incluidos nuestro PO, SCRAM, Desarrolladores y Stakeholder para encontrar los puntos fuertes que nos permitieran que el resultado final, el Sistema de Diseño, mejore y optimice todos los procesos.
Creación y Documentación
Interfaz de usuario - Elementos gráficos y componentes - Framework - Usabilidad
Esta etapa implicó la materialización y documentación detallada del Design System, para ello definimos como herramienta de trabajo «Figma» ya que es el area común en la que todos podríamos trabajar de manera colaborativa. En lineas generales el sistema de diseño se comprende de los siguientes elementos: Presentación, Lineamientos generales y los Componentes.
Avanzamos creando un manual del Design System que sirve como una guía completa para los equipos de diseño y desarrollo. La documentación detallada abarca principios de diseño, pautas de estilo, y describe cada componente y patrón de interacción. Para ello tratamos de garantizar que la documentación fuese clara y accesible, con ejemplos visuales y descripciones concisas.
Colaboré estrechamente con otros miembros del equipo, especialmente con diseñadores y desarrolladores, para iterar sobre el prototipo inicial y perfeccionar cada detalle y nuevamente obtuvimos retroalimentación continua del stakeholder y de otros lideres para asegurar que el Design System se ajustara a las necesidades y expectativas.
En este punto ya pudimos crear el primer prototipo para mostrar los elementos principales y una representación visual de como se vería el portal en su página de inicio. Nuevamente esta comparativa tuvo un proceso de revisión y validación por parte de todos los involucrados que arrojo hallazgos como temas de contraste de colores y otras mejoras de accesibilidad que nos permitieron mejorar algunos elementos y criterios básicos.
Luego procedimos a organizar toda la documentación y los componentes en Figma manteniendo el orden y coherencia visual, reglas claras y consistencia que permitan su implementación sin contratiempos, a pesar de que siempre estuvimos atentos a consultas y dudas que pudieran surgir en el proceso.
Comunicación Interna
Comunicación Interna - Presentaciones - Acceso a la información
Para finalizar procedimos a realizar una presentación o comunicación interna que es esencial para asegurar que todos los miembros del equipo estén informados y comprometidos con su implementación. Manteniendo un feedback continuo y colaboración para mejorar y ajustar el Design System según las necesidades y experiencias reales en adelante.
POR QUE FUE IMPORTANTE ESTE PROYECTO
✅ Es la primera vez que trabajo en la creación de un sistema de diseño desde cero, fue de mucho provecho y lo tomo como un hito alcanzado en mi carrera.
📚 La experiencia de participar en este proyecto me permitió validar y aprender nuevas habilidades en figma como la creación de componentes y componentes dinámicos. Aplicación de la metodología "Atomic Design", entender un proceso de transformación de marca y mucho más.
🙌 Quiero expresar mi sincero agradecimiento por la oportunidad de participar en el proyecto "Transformación de imagen corporativa de ServiPAG. Aprecio enormemente la confianza que han depositado en mí. Estoy muy satisfecho por formar parte de este equipo y fue muy satisfactorio contribuir al éxito del proyecto. Trabajar con todo este equipo fue un honor.
