Proyecto: WAVE Design System
Product Designer 2023-2024, República Dominicana.
→The context
En una startup de 4 años de antigüedad y con un crecimiento acelerado a nivel de productos, nació la necesidad de poder contar con una única fuente de la verdad, a la hora de trabajar con diferentes proyectos y bajo un equipo de diseño centralizado en crecimiento. Es por esto que, se decidió que era el momento adecuado para contar con un sistema de diseño, el cual permitiera mantener la constancia visual y a la vez, optimizar el trabajo del día para evitar invertir tiempo en elementos y/o procesos que ya estaban creados y también poder crear experiencias más rápidas confiando en un repositorio único y actualizado.
→Comprehension
Iniciamos por realizar sesiones de co-creación junto a varios equipos de la empresa como; Marketing, desarrollo, producto, people y varios directivos, para poder co crear entre todos, cuales eran los principios que regían el ADN de la empresa.
Los principios determinados del sistema de diseño fueron:
Consistencia:
Mantener la homogeneidad en todos los productos y que todo los métodos de usos dentro de esta plataforma, los pueda usar en cualquier aplicación de la misma.
Accesible:
Nuestro software debe de ser accesible a todos los niveles o capacidades del usuario y siempre buscaremos la manera de que cualquier persona pueda sentirse cómodo al interactuar con cualquiera de nuestros productos.
Intuitivo:
Todo elemento con el que el usuario interactúe, debe comportarse y servir de manera cómoda y predecible, facilitando las acciones del usuario en casa plataforma.
Reconocible:
Cada elemento distintivo de nuestra marca, esencia y core, debe ser distinguido con poco esfuerzo, familiarizando al usuario con nuestro ADN.
→The solution
Para darle un nombre y poder “bautizar” nuestra fuente de la verdad, aprovechamos que ya teníamos los principios, para poder determinar el nombre de nuestro centro de información visual.
Para esto, realizamos otro taller creativo con los mismos equipos y empezamos por identificar 3 preguntas concretas para 2 categorías, que nos ayudaría a nombrar a nuestro sistema de diseño: ¿Qué personalidad tienes? ¿Por qué es única? ¿Cómo se comunica?
Marca:
En nuestro caso, la marca “Mind” se comunicaba de manera simple y cercana. Tenía una personalidad sencilla, para conectar con las personas y el uso del dinero. Jovial, claro y conciso a su vez, para brindar soluciones de pago sencillas y a la palma de la mano.
Sistema de Diseño:
Los componentes y elementos visuales que teníamos hasta la fecha tenían una personalidad adaptativa y sencilla, a la hora de adaptarse a diferentes productos. Se comunicaban con elementos visuales curvos para dar una sensación de relajación y flexibilidad.
Luego empezamos por analizar, a que enfoque de sistema de diseño correspondía el nuestro:
1. The utilitarian approach: nombres más formales, la mayoría de los nombres inician con: “Design” “Language” “Pattern”
2. The aspirational approach: nombres con elementos que tengan que ver con naturaleza, ciencia, espacio, etc.
3. The punny approach: nombres divertidos mayormente términos de industria de producto.
Con estos 3 enfoques, nació el nombre de Wave.
Wave: The Mind’s Design System
→Foundations
En este punto empezamos a consolidar nuestras reglas y elementos visuales actuales para establecerlos como tokens de diseño:
Estilos de colores, tipografías, espaciado, sombras e iconos
→Components
Para la parte de componentes utilizamos la metodología de Atomic Design, la cual nos permitió iniciar desde los elementos más simples y únicos, hasta su ejecución en páginas/pantallas y templates. Aplicamos propiedades a cada componente, para facilitar cada variación del elemento a la hora de ser utilizado.
Átomos:
Labels
Buttons
Inputs
Text
Modal
Moléculas:
Input search
Alerts
Organismos:
Top Navbar
Hero
Form
Footer
Páginas:
Main page
Templates:
Login flow
Convertion flow
Para facilitar su handoff hacía el equipo de desarrollo, utilizamos el plugin de documentación EightShapes Specs, el cual nos permitió disponibilizar los specs de una forma clara y detallada, y así tener también la expectativa de que esperábamos recibir por parte del equipo.
→Conclusions
Luego de actualizar y compartir las librerías correspondientes, establecimos un proceso de iteración y auditoría para poder revisar el comportamiento y uso de cada componente, actualizando su versión cada vez que era necesario.
Como parte del proceso de iteración y a solicitud de las áreas se fueron añadiendo más componentes que no teníamos previsto, por ejemplo; las animaciones y sus variantes, pero su elaboración fue más fácil, ya que partimos de los elementos ya creados, lo que reforzó la necesidad de contar con un sistema de diseño integro en la compañía.
→Bonus
Como parte del discurso para poder “vender” la realización del Design System no sólo identificamos la necesidad y el racional, si no también nos apoyamos de una calculadora ROI para poder defender en números todo el ahorro que suponía contar con un Design System. Con la herramienta pudimos calcular el ahorro por empleado, el tiempo de ahorro por componente y su ROI por proyecto.
Fuente: www.knapsack.cloud/calculator