Diseño de producto y Design System para un producto fintech.
Embat
Trabajar en Embat significaba diseñar sobre un producto fintech real y ya existente. Cada nueva pantalla tenía que funcionar por sí misma, pero también encajar con el resto del producto.
Una parte importante de mi trabajo estuvo centrada precisamente en eso: crear más consistencia, trabajar sobre el Design System y llevar esos componentes y decisiones a las pantallas reales del producto.
El reto
A medida que el producto crecía, distintas pantallas y flujos necesitaban compartir una misma lógica visual y de interacción.
Mi trabajo no consistía únicamente en rediseñar interfaces. Dediqué muchas horas a trabajar sobre la base que había detrás: componentes, variantes, estados y patrones que pudieran reutilizarse en distintas partes del producto.
El reto era mejorar las pantallas existentes sin resolver cada problema de forma aislada.
Cómo trabajé
01Detectar inconsistencias en el producto
Trabajar directamente con las pantallas existentes permitía ver dónde problemas similares se estaban resolviendo de formas diferentes.
En lugar de tratar cada pantalla como una pieza independiente, buscaba patrones que se repetían y puntos donde el Design System podía ofrecer una solución común.
02Construir el Design System desde casos reales
Una parte importante de mi tiempo en Embat estuvo dedicada al Design System.
Trabajé en componentes, variantes y estados teniendo en cuenta cómo debían comportarse en distintos contextos, no únicamente en la pantalla para la que habían sido creados inicialmente.
El Design System y el producto evolucionaban juntos. Las necesidades de las pantallas ayudaban a detectar qué faltaba en el sistema y, a su vez, el sistema nos daba una base más consistente para diseñar nuevas soluciones.
03Llevar el sistema a las pantallas
Crear el componente en Figma era solo una parte del trabajo.
También trabajé integrando esos componentes en pantallas existentes, sustituyendo soluciones inconsistentes y adaptando las interfaces cuando era necesario.
Este proceso de ida y vuelta entre producto y Design System fue una parte importante de mi trabajo en Embat: las pantallas ponían a prueba el sistema y el sistema ayudaba a resolverlas con una lógica común.
04Rediseñar sobre un producto existente
También participé en el rediseño de diferentes partes del producto.
Eso implicaba partir de algo que ya existía, entender qué tenía sentido conservar y detectar qué podía simplificarse, reorganizarse o hacerse más consistente.
En algunos de estos trabajos también participé en A/B testing, comparando diferentes soluciones en lugar de asumir que la primera propuesta de diseño era necesariamente la definitiva.
05Diseñar pensando en reutilización
Trabajar tanto tiempo con el Design System cambió mi forma de plantear los componentes.
Un dropdown, un botón o un input no debía resolver únicamente el caso que tenía delante. Había que pensar en sus estados, variantes y en cómo se comportaría cuando apareciera en otras partes del producto.
Esto ayudaba a evitar crear una solución diferente cada vez que aparecía un problema parecido.
Resultado
- El resultado de mi trabajo en Embat no fue un único rediseño ni un Design System separado del producto.
- Trabajé en ambos al mismo tiempo: mejorando pantallas existentes mientras construíamos y aplicábamos una base de componentes y patrones más consistente.
- Fue una experiencia que me hizo prestar mucha más atención a lo que ocurre después de diseñar una pantalla: cómo se reutilizan los componentes, cómo escalan las decisiones y cómo mantener la consistencia forma parte del propio trabajo de producto.
Un aprendizaje
Un Design System demuestra su utilidad cuando empieza a resolver problemas reales del producto.
Crear un componente es solo una parte. Lo difícil es conseguir que sea suficientemente flexible para funcionar en distintos contextos sin tener que crear una excepción nueva cada vez.
Embat