Spin by OXXO

Spin by OXXO

Lideré el flujo de transferencias SPEI de punta a punta para la app fintech de OXXO, diseñando para usuarios con baja alfabetización digital donde mover dinero genera miedo. Validado con ~50 usuarios en todo México y 90% de aceptación. También construí el Design System desde cero conforme el producto escalaba.

Duración
1 año
Rol
Product Designer · Design System Lead
Equipo
4 diseñadores · 2 UX Research · UI Designer · Product Owner · Equipo de ingeniería
Herramientas
Figma · Miro · Jira
50K+
Usuarios en producción

Operación activa en más de 150 países

01El contexto

En México, más del 80% de los pagos menores a 500 pesos todavía se hacen en efectivo. SPIN by OXXO nació para cambiar eso, apoyándose en la confianza que la gente ya le tenía a la marca.

SPIN by OXXO es una aplicación fintech de consumo lanzada en 2021. Su objetivo: llevar servicios financieros a una audiencia amplia, incluyendo usuarios con baja alfabetización digital y financiera, sin sacrificar usabilidad ni cumplimiento regulatorio.

El reto no era tecnológico. Era de confianza. Para una persona que nunca ha usado un banco digital, mover dinero desde el celular da miedo. ¿Y si me equivoco? ¿Y si pierdo mi dinero? ¿A quién le reclamo?

La ventaja de SPIN era estructural: más de 20 mil tiendas OXXO operando como red física de respaldo. El cajero de OXXO, alguien que la gente ya conoce y en quien confía, se convertía en el ancla emocional del producto. Mi trabajo fue traducir esa confianza física al entorno digital, especialmente en la acción más sensible de todas: enviar dinero.

02Mi rol

Product Designer en un equipo de cuatro. Dueño del flujo de transferencias SPEI de punta a punta. Después, Design System Lead.

Trabajé como Product Designer dentro de un equipo de cuatro diseñadores, cada uno con ownership sobre flujos específicos para el lanzamiento inicial de SPIN.

Lideré el flujo de transferencias SPEI (nacional e internacional) de principio a fin: desde la definición de hipótesis y el análisis competitivo, hasta el diseño de interacción, la validación con usuarios y la iteración hacia el MVP de lanzamiento.

En paralelo, contribuí a otras áreas core del producto: FTUX, dashboard de Home, y Rewards & Promotions, cuidando la consistencia de la experiencia completa. Conforme el producto evolucionó, fui nombrado Design System Lead, enfocado en definir y escalar componentes reutilizables en colaboración cercana con Producto e Ingeniería.

El flujo SPEI no era una pantalla más. Era la prueba de fuego de la confianza del producto.

03El proceso

De la hipótesis al MVP, validando cada decisión con usuarios reales.

Descubrimiento

El proyecto arrancó con una fase de discovery en colaboración cercana con el equipo de UX Research, el Product Owner e Ingeniería. La meta era entender a fondo a los usuarios objetivo, muchos de ellos no nativos digitales, e identificar las barreras de confianza al hacer movimientos de dinero desde una app.

Definimos User Personas desde el inicio. No como entregable, sino como referencia constante. María Hernández, dueña de un negocio informal en el Estado de México, alfabetización digital baja-media, relación alta con OXXO. Su miedo principal: equivocarse y perder dinero. Su necesidad: entender qué pasa en cada paso.

spin-persona-maria.png

Esas personas aterrizaron cada decisión de diseño en comportamientos reales, no en suposiciones.

Definición del flujo

Para el flujo SPEI hice un análisis competitivo y comparativo de aplicaciones financieras nacionales e internacionales, web y móvil. El objetivo era entender patrones de interacción comunes, restricciones regulatorias y mejores prácticas.

Ese análisis alimentó un set de hipótesis de diseño enfocadas en reducir la carga cognitiva, hacer explícitas las reglas y límites, y reforzar la sensación de control y transparencia. Traduje las hipótesis en diagramas de flujo detallados, alineando temprano con el Product Owner y el equipo de diseño para validar lógica, edge cases y restricciones antes de entrar a diseño visual. Esa alineación temprana redujo el retrabajo y aseguró que usabilidad, cumplimiento y viabilidad técnica se resolvieran desde el principio.

Validación e iteración

Con los flujos definidos, diseñé wireframes de media fidelidad para validar estructura y lógica de interacción internamente. Tras incorporar feedback, desarrollé prototipos interactivos de alta fidelidad en ciclos de dos semanas, que luego probamos con usuarios reales en sesiones moderadas 1:1, en colaboración con el equipo de UX Research.

Probamos con alrededor de 50 usuarios a lo largo de toda la república mexicana, en remoto. Juntos definimos preguntas de investigación enfocadas en confianza, claridad y usabilidad:

  • ¿Qué tan seguros se sentían los usuarios al enviar dinero por SPIN?
  • ¿Con qué frecuencia esperarían usar este flujo?
  • ¿Podrían completar la tarea sin ayuda usuarios con baja alfabetización digital?

El resultado: una tasa de aceptación del 90%. Los usuarios describieron el flujo de forma consistente como claro, confiable y fácil de entender, sin importar edad ni nivel de experiencia digital.

spin-sitemap-wireframes.png

"Se siente seguro. Me da tranquilidad." Comentario recurrente en pruebas de usuario.

04Decisiones clave

Las decisiones que no aparecen en el brief, pero que definieron la confianza del flujo.

Diseñar para el dinero de alguien es distinto. Un error de usabilidad en una app de notas es una molestia. En una transferencia, es el miedo a perder lo que costó trabajo ganar. Estas dos decisiones las tomé por cuenta propia, basado en experiencia diseñando para usuarios reales. Ambas resultaron centrales en el éxito de las pruebas.

Contexto

El patrón común en apps financieras es dejar que el usuario escriba el monto y, si excede un límite, mostrarle el error después. Eso genera frustración: la persona ya se hizo a la idea de enviar cierta cantidad y el sistema la rechaza.

La decisión

Decidí invertirlo. Las reglas, límites y restricciones se muestran antes de que el usuario escriba el monto. Sabe desde el inicio cuánto puede enviar y bajo qué condiciones. Sin sorpresas, sin rechazos frustrantes.

Resultado

Para un usuario que ya desconfía de las apps de dinero, evitar una sola fricción de este tipo cambia por completo la percepción de control.

05UI y sistema

Un enfoque system-first, porque en fintech la consistencia visual es confianza.

Con los flujos y wireframes validados, pasé a diseño de UI, produciendo mockups de alta fidelidad listos para desarrollo, alineados con los lineamientos de marca de SPIN y con el Design System que yo mismo construía y mantenía en ese momento.

El trabajo de UI fue deliberadamente system-first. Tipografía, color, espaciado y componentes consistentes, reutilizables y escalables a lo largo del producto. En una aplicación fintech esto es crítico: la consistencia visual y la predictibilidad de las interacciones son parte de cómo se construye la confianza del usuario.

La interfaz se diseñó para sentirse clara, calmada y accesible, especialmente para usuarios con baja alfabetización digital y financiera. Puse atención especial en estados y feedback (carga, éxito, error, vacíos), asegurando que acciones sensibles como las transferencias SPEI siempre vinieran acompañadas de señales visuales claras y confirmaciones.

El Design System lo construí desde cero. Empezó pequeño y creció junto al producto durante la etapa de lanzamiento. Al alinear las decisiones de UI con ese sistema en evolución, el equipo redujo inconsistencias, agilizó el handoff a desarrollo, e iteró más rápido. Ese enfoque dejó las bases para que SPIN se adaptara a cambios regulatorios y funcionales con el tiempo, preservando una experiencia coherente y confiable.

spin-spei-flow-final.png spin-design-system-components.png

El Design System no era un proyecto paralelo. Era la infraestructura que hacía que todo lo demás escalara.

06Diseñar para escalar

Desde el día uno, SPIN se diseñó pensando en el largo plazo.

SPIN by OXXO se diseñó desde su lanzamiento con la escalabilidad en mente, anticipando la expansión gradual de servicios financieros: remesas, promociones, recompensas, y features de valor agregado.

El producto se construyó sobre flujos modulares y flexibles que permitían introducir nuevas capacidades sin aumentar la complejidad para el usuario. La claridad y la confianza se preservaban en cada paso. Un enfoque continuo en entender el comportamiento del usuario, especialmente el no nativo digital en México, guió las decisiones de diseño.

Ese enfoque dejó las bases para que SPIN creciera manteniendo una experiencia accesible y confiable, incluso cuando los requerimientos regulatorios y la oferta de producto se expandieron después de mi salida.

07Impacto

Lo que se construyó para durar.

Nota: Mi involucramiento directo terminó en 2022, tras armar el proyecto completo para el lanzamiento. El crecimiento posterior refleja la escalabilidad del diseño inicial.

90%
Tasa de aceptación del flujo SPEI en pruebas con ~50 usuarios
~50
Usuarios probados en remoto a lo largo de toda la república mexicana
1M+
Usuarios en los primeros 9 meses post-lanzamiento
60%+
Usuarios activos en etapa temprana post-lanzamiento
Mínimo
Rediseño requerido pese a cambios regulatorios
15M+
Usuarios alcanzados conforme el producto escaló
Aprendizaje central

En productos financieros, el mejor diseño no siempre es el que quita pasos. Aprendí que cuando se trata del dinero de alguien, la fricción correcta en el momento correcto no estorba: tranquiliza. Una pantalla de confirmación extra o mostrar los límites antes del monto no son obstáculos, son la forma en que un usuario que nunca confió en un banco digital decide dar el siguiente paso. La confianza no se diseña con menos, se diseña con claridad.