Como agencia de diseño de producto digital, es habitual que nos encontremos con proyectos que no cuentan con sistema de diseño. De hecho, lo más usual es que las empresas nos contacten tras haber invertido infinidad de horas en intentar evolucionar su producto sin obtener los resultados esperados, en un proceso complejo, tedioso y frustrante.
Este escenario nos ha motivado a escribir este artículo en el que os contaremos las bondades y beneficios de un buen sistema de diseño, basándonos en experiencias reales, y os explicaremos cómo afrontamos estas situaciones desde la agencia.
En el desarrollo de un producto digital se ven involucrados muchos perfiles diferentes: departamento de producto y marketing, diseñadores, desarrolladores, etc.
Para una óptima coordinación y planificación, es imprescindible contar con herramientas que permitan abordar las tareas diarias de una forma organizada y estructurada.
Pues bien, el sistema de diseño es como los fundamentos de una casa, es aquello que sienta las bases para construir una visión común y estratégica, estableciendo normas y recopilando librerías de recursos reutilizables, haciendo posible la escalabilidad y el crecimiento eficiente de este mismo. Interesante, ¿verdad?
Para el desarrollo de este tipo de proyectos, donde vas a interactuar con diferentes capas y departamentos de una empresa, es vital integrarse al máximo con toda la estructura del proyecto. En Lúcid consideramos fundamental establecer y acordar una metodología de trabajo colaborativa con el cliente, en la que todas las partes participen de manera activa de todo el proceso de diseño.
La primera fase es la de inmersión, donde nos conocemos un poco más con los clientes, nos hacen partícipes de sus retos como empresa, sus insights y nos dan contexto sobre el proyecto. En estas sesiones compartimos todo nuestro conocimiento con ellos y ellas: les trasladamos y explicamos el valor diferencial de un buen diseño de producto y les detallamos todas y cada una de las diferentes fases de este journey que vamos a transitar como equipo.
Les compartimos nuestras herramientas de trabajo, como Notion y Figma (sin las que no podríamos vivir 😉), que nos permiten trabajar de forma colaborativa, consiguiendo la implicación de todas las partes que forman el proyecto. Esto nos permite llevar la comunicación al siguiente nivel, coordinando y mejorando la productividad del equipo.
Así mismo, en estas sesiones conjuntas evaluamos la documentación de la que partimos: análisis funcional, sistema de diseño, valores de marca, objetivos principales, casos de usos, etc., para luego bajar los requerimientos, identificar los objetivos, definir escenarios y user personas.
Cuando los equipos ya están alineados para empezar a trabajar, es momento de medir esfuerzos y capacidad. ¡Empezamos!
Una vez entendemos los retos, tenemos toda la documentación recopilada y las herramientas de trabajo definidas, toca estructurar todos los elementos que forman la base del sistema visual del producto: familias tipográficas; jerarquías; colores corporativos primarios, secundarios y terciarios; colores neutros; iconografía, etc.
Cuando ya tenemos definidos los elementos básicos, llega el momento de crear componentes a través de un sistema de diseño atómico. Este sistema, que establece la creación de componentes de más sencillos a más complejos, se organiza en cinco niveles: átomos, moléculas, organismos, templates y páginas.
El objetivo de este step es conseguir una librería UI, es decir, un catálogo de componentes que podremos utilizar de manera repetitiva en la interfaz. Estos componentes deben tener estados de comportamiento y cumplir estándares, y cada uno de ellos tiene que ir acompañado de una explicación en la que se indica cuándo y cómo debe usarse.
Una escala de espacios bien organizada aporta mayor consistencia visual en la interfaz y nos proporciona agilidad en los procesos de creación de componentes: paddings, margins, posiciones y distancia entre elementos.
La creación de un sistema de retículas (grid) que se adaptan al ancho de pantalla establece el esqueleto o la estructura básica de la interfaz. Esto nos permite controlar y alinear todos los contenidos para generar un sistema más consistente y una mejor experiencia.
El comportamiento del layout se define a través de breakpoints, que son las medidas estándares que definen el ancho de pantalla y la adaptación óptima del diseño de contenido.
Así es como trabajamos los sistemas de diseño en Lúcid. Para nosotros son una herramienta imprescindible para generar patrones de éxito, asegurar máxima calidad en tu producto, mejorar la imagen de tu marca, evitar errores y crear una experiencia de usuario única y memorable.
Y es que un sistema de diseño no aplica únicamente a la creación e implementación, a futuro también ayuda a la planificación y organización de cambios y la escalabilidad y evolución de tu producto en el mercado.
¿Tienes un producto digital y te identificas con alguno de los puntos que hemos tratado en este post?
¿Tu equipo necesita asesoramiento y unificar un pensamiento estratégico para el desarrollo de un producto digital?
Ponte en contacto con nosotros y buscaremos la solución más adecuada a las necesidades de tu equipo.
