El rediseño del cashier en GVC

De dónde partíamos

Principios de 2017. Material Design ya era un actor consolidado en el espacio de consumo, las UIs de Bootstrap estaban de salida. Pero las grandes corporaciones de gaming regulado todavía estaban averiguándolo. Los formularios parecían de Windows 98. Los inputs eran tediosos. Las pantallas transaccionales no tenían ni una pizca de gusto en el diseño.

Yo era el lead designer de las áreas de portal y casino del producto de GVC, y francamente estaba harto de la sosería. Cada día abríamos Sketch, nos chocábamos con un input plano diseñado por alguien en 2008, e intentábamos empujar algo moderno a su alrededor. Teníamos que hacer algo al respecto.

Una página era el objetivo evidente. El cashier era la página más usada de toda la web. Los mismos campos siempre: número de tarjeta, CVV, cantidad, divisa. La misma fricción siempre. Y estaba funcionando en aproximadamente quince marcas dentro del grupo GVC. Si lo cambiábamos, estaríamos cambiando la experiencia de millones de personas.

Lo que nos contaban las métricas

Tiramos de analítica y observamos. La gran mayoría de los usuarios fallaban al menos una vez al hacer un depósito. Campo equivocado, CVV mal tecleado, el selector de divisa haciéndoles tropezar, confusión en el paso de la cantidad. Una página usada millones de veces a la semana, llena de fricción, trabajando en contra del negocio en cada giro.

Nos llevamos al equipo a Tarifa para el primer workshop. El brief era simple: cortar la fricción. Encontrar la forma más sencilla de que un usuario recurrente metiera dinero.

Guardar la tarjeta era la victoria fácil

La primera fruta a mano salió del workshop de Tarifa en aproximadamente una hora: guardar los datos de la tarjeta. Un usuario recurrente no debería tener que volver a teclear dieciséis dígitos cada vez. Mostrar la tarjeta guardada, pedir solo la cantidad y el CVV. Listo.

Fácil por sí solo. Queríamos empujar más. Así que escribimos las preguntas más pequeñas pero comprobables:

¿Con qué frecuencia cambiaban realmente los usuarios la divisa de su depósito? Le preguntamos al equipo de analítica. Respuesta: casi nunca. Así que el selector de divisa, que llevaba años comiéndose espacio en pantalla, se convirtió en una etiqueta pasiva.

¿Y si el campo de cantidad fuera más juguetón? Maquetamos chips de cantidades predefinidas al lado del input (10, 20, 50, 100) y lanzamos un test rápido en nuestro mercado brasileño en Sportingbet, donde el coste de experimentar era menor. El valor total de los depósitos durante la semana del test aumentó significativamente. La feature se pagó sola antes de que la lanzáramos en ningún otro sitio.

Mantener al usuario en contexto

Una de las apuestas UX más grandes que hicimos fue que hacer un depósito no debería sentirse como un viaje aparte. A media tirada, a media apuesta, a medio flujo, el cashier debería aparecer en contexto, recordar al usuario y dejarle volver a lo que estaba haciendo antes de pensar en dinero.

Reconstruimos el cashier como un overlay contextual en lugar de una página. Tarjeta guardada en el archivo. CVV con foco previo. Cantidad pre-establecida en un valor que el usuario probablemente elegiría. Tap, confirmar, vuelta a la slot. La fricción no estaba en ningún campo concreto; estaba en el propio viaje.

En los mercados probados, los depósitos totales subieron un 15% una vez que se lanzó el overlay en contexto. Mismo producto, mismos usuarios, mismos saldos. La página dejó de sacarles de su experiencia y los depósitos siguieron.

El segundo workshop, y el campo +/-

Volvimos a Tarifa para un segundo workshop. La victoria de las cantidades predefinidas era real, pero la página seguía pareciendo un formulario. Queríamos algo fresco. Algo que señalara que este no era el cashier que recordabas.

¿Y si el campo de cantidad dejaba de ser un input de formulario y pasaba a ser el centro de la página? Un número grande. Dos botones circulares a cada lado, más y menos, que suben y bajan la cantidad sin que nadie tenga que recurrir al teclado. Los usuarios podían seguir tecleando un valor concreto cuando quisieran, pero el comportamiento por defecto era el tap.

Y un paso más allá: personalizar los pasos. Un usuario que deposita diez libras para echar el rato no es el mismo usuario que un VIP que deposita cuatro cifras. El botón +/- podía mover la cantidad en saltos que coincidían con el usuario, no en un paso global.

Los números del test fueron contundentes. Para clientes de bajo valor, el depósito medio saltó de 10€ a 40€. Para los VIPs, el depósito medio pasó de 500€ a 2.000€. El mismo aumento de 4x en todo el espectro. La gente le daba a los botones de más y menos como si no hubiera un mañana.

El resultado

Y lo crucial: los depósitos totales no cayeron. Un rediseño de una página de checkout que sube el valor por checkout sin perder volumen es algo raro. Tres números llamaron la atención de la dirección de inmediato.

El time-to-success bajó de 20 segundos a menos de 6. El camino más rápido desde “quiero hacer un depósito” hasta “depósito completado” eran ahora tres taps. Tarjeta guardada, +/- hasta la cantidad correcta, CVV, listo.

La tasa de segundo depósito se cuadruplicó del 2% al 8%. Antes del rediseño, solo uno de cada cincuenta nuevos clientes volvía para un segundo depósito. Después, era uno de cada doce. El indicador más claro de que la experiencia ahora se sentía digna de repetir.

La consistencia hizo que la experiencia se sintiera más valiosa. Los usuarios de bwin y los usuarios de PartyCasino estaban usando ahora el mismo modelo de interacción subyacente, tematizado a su marca. Las entrevistas de customer-research decían que el cashier se sentía “más fiable” y “más limpio” en cada marca que probamos. Palabras distintas para lo mismo: la disciplina de diseño se lee como calidad incluso cuando los usuarios no saben nombrar qué ha cambiado.

El equipo directivo cogió el rediseño en el sprint siguiente y metió el rollout en el roadmap global. Se desplegó por el grupo GVC en oleadas a lo largo de 2018.

El equipo

Nada de esto pasa con una sola persona. El trabajo del cashier lo sacó adelante un grupo compacto:

• Álvaro Velasco — Lead UX Designer (autor de este caso de estudio)
• Fernando García Jiménez — Senior UX Designer
• Rajesh Venkatamaran — Product Manager
• Irene Piqueras — UX Designer
• Jay Herbert — UX Designer
• Goran Ramljak — UX Designer

Dos workshops en Tarifa, varios meses de arqueología de analítica, decenas de prototipos y un despliegue multi-marca que ninguno de nosotros podría haber sacado solo. Crédito a quien le toca.

El sistema de diseño que cayó de todo esto

Lanzar un único cashier en quince marcas obliga a una conversación sobre sistemas. PartyCasino es rosa y morado. Vistabet es naranja. Sportingbull y Sportingbet son verdes distintos. Anadolu, Giocodigitale, Gamebookers, bwin: cada una tenía su propia paleta, voz, contexto regulatorio y audiencia.

Podíamos reconstruir el cashier quince veces o definir un modelo de componentes compartido que absorbiera la varianza de marca como tema. Hicimos lo segundo. Botones, controles +/-, chips de tarjeta, checkboxes, cada estado cubierto: disabled, active, pressed, hover. El mismo componente, tematizado. La misma interacción, con marca.

Qué haría distinto

Dos cosas en las que apretaría más si tuviera este brief otra vez.

Correr el experimento por marca, no solo en Sportingbet. Sportingbet era un buen banco de pruebas porque el volumen era menor, pero el comportamiento brasileño no es el comportamiento de bwin ni el de PartyCasino. El patrón se transfirió de forma global, pero la magnitud por marca casi seguro varió. Deberíamos haberlo medido a propósito.

Documentar el sistema desde el día uno. Construimos el modelo de componentes multi-marca en marcha, lo que salió rápido pero dejó la documentación como algo secundario. Hacerlo como pista paralela desde la semana uno habría hecho que el rollout al resto de marcas tardara la mitad.