FLIZpay · 2026
Vende la diferencia, no la checklist
Rediseñar el panel de comercios y la app de pago de FLIZpay en torno al cashback que los distingue.
FLIZpay es una empresa alemana de pagos por open banking. La app de consumidor es el sistema de pago en sí: pagas a una tienda directamente desde tu banco, y FLIZ te devuelve después un porcentaje como cashback. Los comercios ofrecen ese cashback para atraer pagos hacia FLIZ, y un panel de comercios aparte es donde lo configuran y lo siguen. Pasé doce semanas dentro del equipo de FLIZ, trabajando de cerca bajo la dirección de la design lead y en colaboración diaria con los desarrolladores, en dos productos con trabajos muy distintos. El ritmo lo marcaban los lanzamientos constantes. El mayor fue la renovación del panel de comercios, y por el camino asumí la estrategia de producto, el design system y QA.
01 · El diferenciador
El diferenciador que estaba escondido
Toda herramienta de pago compite en la misma checklist: facturación, informes, permisos, roles. Útil, esperado, y nunca la razón por la que alguien cambia. En las primeras semanas desmenucé ese campo, feature a feature: primero un vistazo de cerca a los rivales más próximos, por mi cuenta; después la IA rellenando la matriz de comparación según parámetros que yo había fijado, que me enseñó los que se me habían escapado; y al final un último repaso recorriendo yo mismo las apps y las webs de la competencia, porque una matriz sin verificar es una opinión. El patrón se repetía en todas partes. La checklist era lo mínimo. Nunca fue el campo de batalla.
Lo único que FLIZpay hacía que nadie más hacía era aquello de lo que el producto menos hablaba.
La ventaja es el cashback: FLIZ devuelve dinero a los clientes por pagar con open banking, y los comercios fijan el porcentaje para atraer compradores. Ese mecanismo estaba enterrado, una sola historia perdida entre una docena de features de paridad. Así que el brief se reescribió solo: dejar de seguir la checklist, y poner el diferenciador donde no se pueda pasar por alto.
02 · La renovación
La cuenta de empresa, reconstruida en torno al cashback
Un comercio no debería entrar para mirar su cuenta. Debería entrar para gestionarla. El panel tiene un solo trabajo, y no es aceptar pagos, eso lo hace la app. Es donde un comercio fija su cashback, ve cómo rinde y mantiene la tienda conectada. Así que reconstruimos el FLIZ Company Account en torno a ese trabajo: el cashback, su rendimiento y su configuración, todo a un golpe de vista. Yo me encargué de buena parte del trabajo inicial, la research, la estructura y el MVP que probó la dirección, siempre bajo la guía de la design lead y con ingeniería en la mesa. (La interfaz llama a ese porcentaje discount; el cliente lo recibe como cashback.)
Empezó como el MVP para la renovación: el rediseño reducido a su estructura, lo justo para probar la dirección antes del pase a alta fidelidad.
Las áreas de verdad hacen el trabajo: una franja de KPIs, una tabla de transacciones filtrable, el rendimiento del descuento, una guía de instalación y una línea de estado de la plataforma en vivo. Toda la cuenta legible y manejable desde una sola pantalla.
El momento KPI
Un número, antes que nada
Lo primero que muestra el panel no es un menú. Son cuatro números. Esa fue la decisión de diseño: un valor honesto debería recibir al comercio antes de que haga nada, para que la cuenta responda a ¿cómo vamos? de un vistazo.
Los valores de muestra son cifras de placeholder del archivo de diseño, no resultados de negocio.
03 · Estados
Un estado en el que confiar de un vistazo
Un pago ocurrió o no, y un comercio no debería tener que adivinar cuál. La tabla de transacciones funciona con un solo sistema de estados y un mapeo de color fijo, de modo que un estado significa lo mismo cada vez que lo ves: verde liquidado, ámbar esperando, rojo fallido, gris detenido.
Pago procesado con éxito y liquidado en tu cuenta.
Pago iniciado, a la espera de la confirmación del banco.
El pago no se pudo procesar. Revisa los detalles de la transacción.
Transacción cancelada por el usuario o el sistema.
04 · Configurar el descuento
El descuento, ascendido a área de primer nivel
El mecanismo que hace distinto a FLIZ vivía donde nadie mira: una fila dentro de ajustes. Propuse sacarlo a su propio espacio en el panel, y ahí fue. Un comercio fija dos porcentajes, un cashback de primera compra para atraer clientes nuevos y un porcentaje estándar para después, ve el efecto en una vista previa en vivo, y publica. Aquello en lo que la empresa es mejor es ahora lo más fácil de hacer en el panel.
05 · Guía para comercios
Una guía para comercios que vale la pena leer
Dar de alta una tienda era un tutorial pesado y saltable. Siguiendo la dirección de la design lead, lo rediseñé como una guía estática bien hecha y de baja tecnología, el tipo de documentación que de verdad lees, con los docs de Stripe como referencia visual: tranquila, secuencial, sin vídeo que aguantar. Se dibujó primero como wireframe y solo después se llevó a alta fidelidad, para que la estructura estuviera bien antes de pulirla.
06 · La app de consumidor
La app de consumidor: hacer visibles las saved offers
La app es el sistema de pago de FLIZpay: es cómo paga la gente de verdad, directamente desde su banco. Las ofertas de cashback van encima, y esa capa estaba enterrada. El catálogo, las saved offers y los filtros estaban a dos o tres taps de distancia, sin entrada desde la homepage, así que la mejor razón para abrir la app era lo más difícil de alcanzar. La afirmación necesitaba prueba, así que construí el flujo completo de la app en FigJam y lo convertí en un ticket: la función más importante estaba demasiado enterrada para encontrarla. El CEO, el CTO y la design lead lo confirmaron los tres, y traerla al primer plano se convirtió en el trabajo: en el homescreen, y prominente en un menú.
Mi primera propuesta fue un botón de hub. Maté mi propio concepto a favor de una bottom nav (Balance · Catalogue · QR · Send), con las funciones aburridas, ajustes y perfil, detrás de un botón de perfil arriba. Alrededor: entradas en la homepage que ponen las ofertas en la primera pantalla (chips de categoría, un tile de saved offers, una tarjeta de deal of the week), un hub de catálogo, y un flujo keep browsing? tras la compra, para que un pago completado lleve a algún sitio en vez de terminar. La dirección la validó de forma independiente el lead engineer, y más tarde evolucionó hacia una iteración con efecto glass. El corte más duro no fue mío: el product manager y el CEO eliminaron por completo las funciones de enviar y recibir de la app.
07 · Decisiones pequeñas
Decisiones pequeñas, fricción real
La gran estructura solo funciona si las señales pequeñas son honestas. Guardar una oferta se marcaba con un clip, que se lee como adjuntar, no guardar, así que pasó a ser un corazón. Eso liberó la señal de urgencia que el clip enturbiaba, y el deal of the week tomó una llama para decir esto caduca.
Bajo el capó
Bajo el capó
Bajo el trabajo visible estaba el tipo poco lucido, y ahí es donde mi reparto de tareas con la IA fue más nítido. Unas 1.150 capas renombradas a sentence case y cerca de 50 localisation strings arregladas en EN/DE, con una pasada por las mayúsculas: la IA hizo el grueso con un encargo preciso y propuso las variantes de idioma, yo elegía entre ellas y comprobaba el resultado capa a capa, para que el design system se leyera con una sola voz en vez de cinco. Y para que siguiera así sin mí, escribí las guías que lo acompañan: cómo trabajar con las variables, cómo manejar la localisation. Documentación que hace más rápido al siguiente diseñador sin nadie en la sala. El mismo reparto llevó el trabajo de marca. La identidad acababa de tomar una nueva dirección bajo la design lead, y trabajé con ella para llevarla a todas partes, iconografía incluida, con Gemini generando y yo filtrando. Hice QA a mano en TestFlight y llevé tests de Clarity de principio a fin: la research, la interpretación, el informe. Y presenté cinco y pico tareas de UX post-lanzamiento sin que me lo pidieran, cada una planteada no como un bug sino como un problema de retención o activación que valía la pena resolver.
Uso de IA
Uso de IA
La IA atravesó casi todas las partes de este trabajo, de la research al QA. Los ejemplos más claros: rellenó la matriz competitiva con parámetros que fijé yo, y verifiqué cada conclusión en las apps de los propios rivales. Hizo el grueso del renombrado de 1.150 capas y de los arreglos de localisation, con encargos precisos, y yo elegía entre sus variantes y comprobaba capa a capa. Gemini generó iconografía para la nueva dirección de marca, y la design lead y yo dirigimos y filtramos. Nada producido por la IA salió sin revisar.
Lo que me enseñó
Lo que me enseñó
- Vende la diferencia, no la checklist. Nadie se cambia porque tengas las mismas features que los demás. El trabajo de diseño era mover el verdadero diferenciador de las notas al pie al titular.
- Para un público que ya está dentro, muestra valor, no repitas el pitch. A un comercio que ya se ha registrado no hay que convencerlo otra vez; necesita que la recompensa sea fácil de alcanzar y fácil de leer.
- Asciende el mecanismo central a su propio lugar. Aquello en lo que un producto es mejor no debería vivir nunca en una fila de ajustes. Dale una superficie, y el producto entero apunta a lo que lo hace distinto.