00-rediseño-responsive-de-Walmartca-incremento-conversión

Walmart Canadá dio a conocer su nuevo diseño responsive, la primera empresa e-commerce en la país que da el gran cambio.

Rick Neuman y Matt Ginsberg, de Walmart.ca, comparten con Get Elastic los detalles de su renovación responsive, incluyendo lo que los hizo tomar la decisión de optar por ese tipo de diseño web, cómo funcionó el proceso de diseño, los desafíos que enfrentaron en el diseño y desarrollo web y las enseñanzas de las pruebas A/B.

Primero las tablet

El movimiento «tablet first» con frecuencia recomienda empezar con una experiencia viable mínima, comenzando con los smartphones y continuando con otros dispositivos. Mientras que esto hace que una página web sea sencilla y, potencialmente, menos pesada al cargar, las e-commerce, las conversiones y el valor de pedidos promedio son mucho más altas en tablets y pantallas pequeñas.

Al ver la significativa cantidad de tráfico desde tablets, Walmart reconoció la importancia de brindar un buen servicio a sus principales clientes, las mamás, una experiencia de compra rápida y fácil desde cualquier habitación de su hogar, incluyendo el sofá. El equipo adoptó un enfoque «tablet first» centrado en los toques, y expande su diseño a las computadoras convencionales y smartphones. (Ve a Walmart.ca y redimensiona tu pantalla para ver cómo se acomoda a los distintos puntos de ruptura).

Walmart también quiso mantener un solo dominio y base de código, el cual es un beneficio de escoger un diseño responsive frente a un adaptive, sin sacrificar el rendimiento, que es un riesgo al escoger el primero diseño si no se prioriza el rendimiento.

03-rediseño-responsive-de-Walmartca-incremento-conversión

02-rediseño-responsive-de-Walmartca-incremento-conversión

Diseñado para rendir

Sabiendo que cuando se nos referimos al tiempo de carga de una página, cada segundo afecta la satisfacción y conversión de clientes, las pruebas de rendimiento fueron realizadas en cada sprint (usando un desarrollo ágil de software) con un conjunto completo de pruebas de estrés, y Walmart fue capaz de lograr una mejora de 35% en rendimiento a través de un ajuste a un modelo de arquitectura modular con una variedad de mecanismos de carga.

El caching, o almacenamiento, es clave en la optimización de una página web. Walmart.ca presenta el comercio en contexto, con disponibilidad de stock, ubicación en el momento e información de precios, también fechas estimadas de llegada de productos, que puede cambiar a lo largo de día. El número de consultas que esto requiere pesa mucho en una página web, por lo tanto, se usa un sistema de consultas inteligentes y los mensajes se dividen en una serie de componentes que son almacenados por distintas reglas de negocio para mantener la información en tiempo real importante, como cambios de inventario, lo más fresca posible.

Otra táctica de rendimiento de Walmart es que usa fuentes de íconos en vez de imágenes. Esto permite una carga más rápida y asegura que los íconos se vean geniales y bien definidos, incluso con un zoom de 1000%.

Proceso de Diseño

El proceso inició con una sesión JAD (Joint application development) de una semana a través de los departamentos funcionales. El proyecto usó la metodología Ágil, que permitió que los diseñadores pudieran lanzar el proyecto rápidamente luego de solo 16 sprints de 2 semanas. En total, el proceso, de inicio a fin, tomó un poco menos de un año.

El equipo redujo los analytics para comprender qué anchos de pantallas y navegadores eran los más comunes entre los dispositivos móviles, tablets y computadoras, y optaron por una cuadrícula de escala completa de entre 320 y 1152 píxeles (dejando de lado los puntos de ruptura para después). Usando un sistema de colunma 4/8/12, la página web, pixel por pixel, escala rápidamente con el espacio que tiene disponible. Se decidió contar con 5 plantillas diferentes a cada nivel. Se viene una sexta.

Retos del diseño

En cuanto al diseño, no se contaba con una riqueza de ejemplos a nivel empresarial en la cual inspirarse (solo 1 de cada 100 páginas web son responsive hasta la fecha). La mayoría de las páginas web que adoptaron el diseño responsive eran pequeñas tiendas e-commerce, y no se contaba con las mejores prácticas para elementos de diseño complejos.

Para Walmart, el elemento más complejo fue su navegación global. Tuvieron un sistema sencillo que hacía escalas. La navegación pasó por varias revisiones mientas que el equipo aprendía, al mismo tiempo, sobre el diseño responsive.

03-rediseño-responsive-de-Walmartca-incremento-conversión

Rick y Matt describen el diseño del proceso de compra como «un proceso sencillo», aunque la integración de localizador de tiendas de Google fue un poco difícil.

El equipo decidió deshacerse de su costumbre de nombrar sus plantillas CMS, que estaba basado en un sistema de desarrollo más tradicional, para favorecer un sistema inspirado en diferentes tipos de ajíes (jalapeños, poblanos y habanero). Mientras más picante el ají, más compleja plantilla. Los términos ahora son parte del vocabulario del equipo, y las terminologías específicas que usan reducen la confusión en la resolución de problemas. Todos lo entienden.

Lo que la prueba reveló

Walmart usó una mezcla de prototipos, que incluían pruebas de papel, prediseñados y prácticos con pruebas postdiseño de usuarios (sesiones moderadas en Canadá) y también pruebas A/B, incluyendo pruebas de rendimiento inicial tanto para las páginas responsive y no responsive por alrededor de una semana.

Los resultados fueron muy positivos para diseño responsive: la conversión creció hasta un 20% y en usuarios móviles hasta un 98%.

En dispositivos móviles, es común enseñar menos productos en categorías y páginas de búsqueda, y hace que los usuarios interactúen para encontrar más de lo que buscan. Pero Walmart encontró su zona óptima al presentar 60 productos por página, que funciona en diferentes puntos de ruptura… puedes mostrar 3, 4 o 6 productos por fila y en vista cuadriculada, sin dejar productos colgando al final. Mientras más productos muestras, menor la necesidad de tocar la pantalla.

La percepción más sorprendente que se rescató del las pruebas de usuario apareció cerca a la fecha presentación de los productos: algunos de los productos están disponibles en las tiendas físicas, mientras que otras solo en línea, u otros no están disponibles en las tiendas cercanas a un usuario.

04-rediseño-responsive-de-Walmartca-incremento-conversión

En el diseño original, cada miniatura tenía 1 o 2 posibles botones. Ya sea un botón «añadir al carrito» (para productos en stock) o un botón gris «ver detalles» (para productos fuera de stock); esto en adición a un mensaje en stock/fuera de stock explícito. «Nos dimos cuenta de que los usuarios pasaban por alto los mensajes explícitos juntos y hacían clic en los botones grises, esperando que los productos estén en stock. Al remover el botón gris para los productos fuera de stock y solo dejando el espacio en blanco, hicimos clara la diferencia», comenta Ginsberg.

En resumen

La nueva movida de Walmart.ca tuvo éxito al conseguir una conversión de 20%. Si bien es cierto, el diseño responsive puede tomar un poco más de tiempo de carga, pero el resultado es más agradable a la vista del usuario. Si deseas tener un diseño responsive, Staff Creativa es tu mejor opción. Contamos con los mejores profesionales del diseño digital, capaces de utilizar las más últimas tecnologías en tu página web. ¡No dudes en contactarnos!

Traducido y adaptado de GetElastic. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.

Deja una respuesta