Cómo logramos que nuestros usuarios vendan más en Mobile
Una historia del equipo de UX de Tienda Nube.
A fines del 2015, teníamos tres problemas bien claros en Tienda Nube/Nuvem Shop.
1) Todos nuestros themes eran responsive, pero no mobile-first y solo el 33% de las ventas de nuestros usuarios eran por medio del celular. 📱
2) El tráfico mobile era cada vez mayor y ya estaba por superar el tráfico en desktop. 💻
3) Nuestros themes estaban hechos pensando en usuarios argentinos y el modelo mental de una tienda para un usuario en Brasil era completamente diferente. 🇧🇷
Necesitábamos mejorar esto de forma urgente para que nuestros usuarios (Merchants), puedan dar la mejor experiencia de compra posible a sus usuarios (Consumers).
Por otro lado necesitábamos un cambio cultural grande, a nivel organización y negocio. Teníamos que ser mobile-first en toda nuestra plataforma y dejar de diseñar pensando en desktop. Para esto nos movimos rápido, enfocados en pequeñas cosas que iban a generar ese cambio cultural:
- Dejamos de hacer tests de usuarios en desktop para hacerlos 100% mobile.
- Dejamos de decir “click” y comenzamos a decir “tap”.
- Si alguien enviaba un wireframe con propuestas para desktop, la respuesta era “Hasta que no vea la versión mobile no paso feedback”.
- Solo nos compartíamos artículos sobre UX que eran sobre UX-Mobile.
- Nos enfocamos en entender cómo podíamos tener un mejor HTML/CSS para mobile, mejorar los tiempos de carga.
En definitiva: foco en Mobile.
Theme-tathon
Pero más allá del cambio cultural interno, necesitábamos un primer cambio rápido para nuestros clientes, teníamos que entregar ese valor a nuestros usuarios de forma urgente y para eso hicimos una “theme-tathon”.
Se trató de reunir al equipo de diseño en una sala, cerrar el chat, cerrar el email y enfocarnos durante una semana en solo hacer más mobile nuestras plantillas. Decidimos hacer una pequeña selección y priorización de mejoras y nos enfocamos en ejecutar pequeñas mejoras que sean posibles de deployar en ese período de tiempo y el resultado, en una semana fue:
- Mejoramos las grillas de productos para que los usuarios puedan escanear más productos en menos tiempo.
- Dejamos a la vista las opciones de color para mejorar la selección de esa variante en los productos y mejoramos el slider para que sea más finger-friendly y respondiera a los gestos.
- Adicionamos un carrito ajax que permitía actualizar el carrito, el subtotal y total de la compra sin recargar toda la página.
- Ajustamos mucho cómo se veía el contenido generado por el usuario en mobile.
- Hicimos varias mejoras de wording.
- Rediseñamos los filtros de búsqueda (en mobile, obvio).
- Mejoramos los themes sin contenido (empty-screens), con poco contenido y ajustamos algunas configuraciones específicas para Brasil.
Enamorarse del problema y no de la solución
Sabíamos que habíamos mejorado la experiencia y en solo una semana habíamos entregado valor a nuestros usuarios, pero todavía no solucionábamos los tres problemas principales.
Como dice Julie Zhuo (que tiene un newsletter al que el 99% de la compañía está subscripto), teníamos que enamorarnos del problema y no de la solución. Y eso hicimos.
- Comenzamos con un research de patrones comunes en los diseños mobile de Brasil analizando las aplicaciones más usadas y las tiendas más visitadas.
- Realizamos entrevistas con usuarios brasileños.
- Aprovechamos nuestros encuentros con clientes para entender las necesidades de los merchants a la hora de configurar sus tiendas.
- Cada vez que modificábamos algo, íbamos al Starbucks de la esquina de nuestra oficina a validarlo rápidamente con usuarios.
El resultado de esto fue una pila de información y de conocimientos nuevos que podíamos aprovechar para finalmente solucionar estos problemas.
Priorizamos, descartamos, medimos el ROI de las diferentes ideas y nos movimos al siguiente paso.
Mobile-first-theme-tathon
(Sí, nos encanta hacer “tathones”).
Armamos tres equipos de dos personas y durante una semana nos enfocamos en armar tres prototipos de cero, que ataquen estos problemas de raíz.
¿El resultado? Tres nuevos themes que nos permitieron continuar aprendiendo.
¿Qué aprendimos? Les contamos algunos detalles:
1) Las webapps y la barra de navegación 👎
Una práctica muy común en las aplicaciones es adicionar la barra de navegación en la parte baja para que el usuario pueda llegar con su dedo de forma más fácil (Antonela Debiasi y Nicolás J. Engler nos ayudan a entender mejor el alcance del dedo en una pantalla con http://thumbzone.co/).
El problema es que en algunos browsers como Safari hacen que un click en la parte baja revele la barra de navegación y esto genera que el usuario deba tapear más de una vez hasta lograr su objetivo.
2) Scroll horizontal 👍
Un recurso que estábamos utilizando poco y es súper efectivo en mobile es el scroll horizontal.
El scroll horizontal permite al usuario ver el primer ítem de una lista y decidir si quiere ver el resto o continuar scrolleando. De esta forma aumenta su control sobre el contenido.
Es importante, para generar una buena experiencia, generar esta interacción mediante swipes y no taps en una flecha (estilo desktop) y dar visibilidad al usuario de que puede “swipear” para ver más elementos.
3) Slider generado por los usuarios
Nuestros usuarios daban mucha importancia al slider principal. Este slider en desktop funciona con proporciones diferentes a mobile y al ser una imagen que se adapta al 100% del ancho se generan problemas con los tamaños de los textos.
Por ese mismo motivo, lanzamos un nuevo slider que se auto-generaba a partir de los productos y permite al merchant configurarlo fácil y rápido.
“Get shit done” o entregar valor a nuestros usuarios
Estábamos chochos con los prototipos, habíamos aprendido mucho, pero en las últimas semanas habíamos entregado cero valor. Solo aprendizaje interno. Por ese motivo decidimos enfocarnos en solo un theme para acortar el scope y aumentar el foco.
Fer y Fede (los creadores del prototipo en la tathon) se enfocaron en testear a fondo que el contenido generado por el usuario (uno de los desafíos más grandes a la hora de hacer plantillas) se vea siempre impecable y lanzamos Material, nuestra primer plantilla mobile-first.
En su primer mes Material tenía menos Bounce Rate y mejor Average time per session que el resto de los themes. Nada mal para el debut.
Seguimos enamorados del problema
Sentíamos que era un gran comienzo, pero no nos conformamos con eso y seguimos iterando y mejorando Material.
Siempre habíamos trabajado de forma conjunta todas las plantillas de la plataforma, sumando las mismas mejoras a todas. En este caso, queríamos entender el impacto específico de cada uno de los cambios y por eso nos enfocamos solo en una. Los resultados fueron más que buenos.
Todo este sprint que voy a detallar a continuación se lo cargó todo casi solito Fede #GOAT ❤.
1) Hamburguesa 🍔
El famoso hamburger menu era una gran solución para mobile. Resolvía la UI de forma simple y era reconocido por la mayoría de los usuarios.
Lo malo era que mantenía varias secciones escondidas y daba poca exposición a secciones que eran importantes para mejorar el embudo de compra.
Por eso, ajustamos la navegación y aumentamos la exposición precisamente de las secciones de ese funnel de venta: Inicio, productos y carrito.
Eso mejoró las visitas a las diferentes categorías, los usuarios ahora llegaban a más productos y por lo tanto se creaban más carritos de compra.
2) Zoom + slider mobile
Continuamos mejorando la experiencia mobile permitiendo que el usuario pueda ver los detalles del producto a partir de gestos.
3) Carrito ajax
Esta es una de las mejoras que más me gustan.
Seguíamos peleando contra el 3g y con la necesidad de que la pantalla cargue cada vez de forma más rápida.
En el primer sprint habíamos logrado que en la pantalla del carrito se puedan actualizar las cantidades sin recargar todo, pero queríamos llevar esta experiencia a toda la compra. Para eso, implementamos esta mejora del carrito ajax:
ahora el usuario puede agregar productos, continuar comprando y también finalizar la compra sin la necesidad de recargar la pantalla.
Lo mejor, el detalle del carrito que da feedback saltando.
4) Búsqueda
Al igual que el carrito ajax, sumamos la posibilidad de que los usuarios obtengan resultados de búsqueda a medida que escriben o borran y sin la necesidad de recargar toda la tienda.
Queremos seguir puliendo esta mejora para dar resultados con imágenes, precio y más detalles de estos productos.
5) Lijar, pulir, lijar…
Por último ajustamos varios detalles en la experiencia mobile:
- Desplegamos el teclado que precisa el usuario en cada interacción.
- Ajustamos niveles de lectura, optimizamos espacios.
- Arreglamos algunos bugs 🐛 que tenía nuestra primer versión.
¿El resultado?
En Brasil Material convertía 2x más en Mobile y sorpresivamente~3x más en desktop que el resto de los themes.
En el 2016 comenzamos a trabajar para que todos los diseños de Tienda Nube conviertan igual que Material llevando estas mejoras al resto de las plantillas y seguir aprendiendo sobre el mundo mobile, first.
En cuanto al diseño, logramos lanzarlo con ajustes que sean específicos para el público de Brasil: la posibilidad de combinar más colores, sumado a composiciones que no eran minimalistas, generó una mayor aceptación por parte de los usuarios brasileños. También, al ser una propuesta diferente a las plantillas anteriores, el diseño fue visto con buenos ojos por nuestros usuarios del resto de Latinoamérica.
Como deben haber notado, también seguimos las guías de Material Design para construir una plantilla que siga patrones a los que los usuarios están acostumbrados. Aprovechando estos beneficios que cuenta Fabricio Teixeira en su artículo: A favor da homogeneidade do Design.
Hoy en día, el 68% del tráfico de las tiendas es a través de dispositivos mobile y sigue creciendo. También estamos acompañando esto generando que el 56% de las compras se realicen en mobile.
Por otra parte, vimos cómo muchas tiendas (como por ejemplo Zapatillas Puro) aceptaron nuestra sugerencia de migrar a esta nueva plantilla y estamos súper felices de ver como eso está impactando directamente sobre sus ventas 📈.
¿Y ahora?
Hoy seguimos trabajando en mejorar la experiencia mobile en toda nuestra plataforma y esperamos volver con más historias como esta pronto.
El equipo de UX de Tienda Nube.
