Cómo el equipo de diseño de UX de Zivame permitió el descubrimiento de productos de múltiples vías

Esta es la primera de una serie de blogs invitados de cinco partes de Udit Khandelwal, director de UX en Zivame.

Si los usuarios no pueden encontrarlo, ¡la característica no existe! – Internacional de Factores Humanos (HFI)

Escuché esta cita por primera vez en una sesión de capacitación en HFI en 2012, y siempre encontrará que resuena con mi forma de abordar UX.

El descubrimiento de productos es uno de los aspectos más importantes de cualquier negocio minorista, y si los usuarios no pueden encontrar los productos que ofrece, no existen. Para permitir la exploración fluida de productos en Zivame, desarrollamos una estrategia de descubrimiento multidireccional en nuestras plataformas. En esta serie de 5 artículos, cubriré las palancas utilizadas para presentar colecciones, descubrir productos y ofrecer comunicación en Zivame.

Este es el primer artículo de esta serie, y aquí cubriré principalmente los elementos bajo Rompehielos de la lista de palancas que se proporciona a continuación:

Cada uno de estos tiene un propósito muy específico en el viaje del usuario y se utilizan en consecuencia. Echémosles un vistazo, uno por uno, mientras hablamos sobre los desafíos en cada caso y lo que hicimos para superarlos. También hablaré sobre métricas comerciales, cuando corresponda.

Tarjetas de aterrizaje de la página de inicio

Desafío

• El 45 % del tráfico web en Zivame se compone de usuarios primerizos

• El 40 % del tráfico directo y orgánico llega a la página de inicio de Zivame

• La mayoría de los usuarios anteriores tienen muy poca idea sobre la variedad de productos que ofrecemos.

Solución

No tener un menú horizontal abierto e ir con una hamburguesa de navegación móvil primero fue un enfoque muy bien pensado y probado por el usuario que comenzamos a seguir con nuestra nueva pila.

Tuvo el costo de no ser sincero con nuestras ofertas.

Por lo tanto, se volvió fundamental para nosotros comunicar lo mismo, justo en el primer pliegue. Las tarjetas que se muestran a continuación sirven exactamente para este propósito.

Lo interesante es que este enfoque se conceptualizó primero para el escritorio y luego se adaptó para dispositivos móviles, como se muestra a continuación. En la versión de escritorio,

las tarjetas ocupan el espacio superior en el primer pliegue, mientras que en dispositivos móviles, están justo debajo del banner de héroe debido a la limitación de espacio vertical.

Cuando estábamos conceptualizando esto, nuestros ejecutivos lo visualizaron de la siguiente manera:

Nadie que pase 8 segundos en mi página de inicio debería irse sin saber que Zivame vende lencería, ropa y ropa deportiva. – Shaleen, directora de operaciones de Zivame

…y creo que hemos hecho un buen trabajo para lograr lo mismo a través del diseño. El posicionamiento de las tarjetas las hace imperdibles y los títulos junto con los enlaces establecen expectativas claras sobre las categorías individuales , es decir, lencería, ropa deportiva y prendas de vestir. Además, la cuarta carta permite suficiente flexibilidad para colocar elementos meta que merecen un asiento en el primer pliegue.
PD Este componente está en desarrollo mientras escribo esta publicación, ¡y se lanzará pronto!

(Lea también: Dar forma a la experiencia del usuario en Zivame: un estudio de caso de gestión de productos)

Esfuerzo

¡Es difícil saber qué 4 cosas irán en cada tarjeta, porque cada parte interesada en la empresa está buscando propiedades inmobiliarias de primera para su propiedad!
Si bien los datos parecen ser una ruta de escape fácil, en la que simplemente podría mantener las cosas más demandadas en la parte superior, el negocio podría tener una dirección contradictoria . Por ejemplo, la ropa en sí misma contribuye con solo el 8 % de los ingresos de Zivame a la fecha, pero ocupa el 25 % de las propiedades inmobiliarias más importantes.

Una colaboración multifuncional con una buena cantidad de moderación por parte de los ejecutivos de la empresa debería darle la respuesta correcta. Como dice mi gerente de producto:

Tienes que ser desproporcionadamente amable con ciertas entidades para asegurar su crecimiento desproporcionado. – Vishrut Shukla, primer ministro senior – Zivame

Carrusel de héroes de la página de inicio

Desafío

• Esta es la siguiente propiedad inmobiliaria principal y la propiedad es visual. Debe representar la marca y se debe seguir un estricto lenguaje de diseño visual.

Solución

Francamente, este fue fácil de diseñar, pero difícil de ejecutar. Sabíamos que estábamos siguiendo un lenguaje de diseño grande-negrita-hermoso y, por lo tanto, fue una decisión fácil que el banner debe ocupar el 100% del ancho de la pantalla y el 100% de la altura restante de la pantalla. Pero eso nos dejó con 2 problemas por resolver:

• En ciertos tamaños de pantalla, el banner se recortaría ya que íbamos a usar el algoritmo de 'cubierta'.

• Cuando el banner se extiende hasta el borde inferior de la pantalla, los usuarios pueden tener la ilusión de que la página termina allí y no hay nada más allá.

Para resolver el problema de recorte, definimos las áreas seguras y las probamos en múltiples resoluciones. Después de algunos éxitos y pruebas, pudimos clavarlo.
Colocamos un cheurón en la parte inferior del banner para dar una indicación visual a los usuarios de que hay más allá del banner. Para mantenerlo limpio, decidimos hacer que la flecha de navegación fuera unidireccional, pero también dimos pistas de presentación de diapositivas al poner una navegación basada en puntos.

Se dedicó una gran cantidad de colaboración interfuncional a crear el banner correcto, con el mensaje correcto y unirlo con los banners de la página de categoría, teniendo en cuenta el viaje del usuario. La sección anterior muestra una captura de pantalla de ejemplo, y a continuación se muestra cómo definimos el área segura:

Colecciones destacadas

Desafío

• Los banners son buenos para llamar la atención, pero para generar interés en los usuarios y hacer que los usuarios hagan clic con la expectativa correcta, debemos contarles un poco más sobre la colección. Sin embargo, el espacio disponible es limitado y hay mucha competencia entre las diferentes colecciones.
• El diseño anterior de la página de inicio para dispositivos móviles de Zivame solía mostrar un acordeón de colecciones en el que cada colección tenía una variedad de 10 productos seguidos de un botón "Ver más" después de desplazarse hasta la última miniatura. El análisis de datos reveló que más del 40% de los usuarios que interactuaron con el acordeón hicieron clic en ver más. Esto refuerza el punto mencionado anteriormente. Sin embargo, no queríamos usar acordeón porque no era visual y tenía mucho texto.

  

• Cargar demasiadas imágenes de productos por adelantado afecta negativamente el rendimiento de la página. Por cada segundo adicional de tiempo de carga de la página, la conversión se reduce en un 7%.

Solución

Al costo de un clic adicional, muestre los USP y un adelanto de cada colección. Además de un collage de productos, simplemente presentamos 3 piezas de información críticas:

1. Nombre de la colección
2. Descripción
3. Atributos de firma

Esto no solo invocó el interés en la colección, sino que también guía al usuario en un viaje de descubrimiento de productos con una expectativa establecida. El collage de productos se puede optimizar técnicamente para que se devuelva como una sola imagen de collage en lugar de múltiples imágenes de productos. Una vez más, esta versión se ha implementado parcialmente en el sitio actual y el resto se está implementando mientras escribo este artículo.

Visita Zivame

Cabecera de categoría

Desafío

• Las páginas de categoría son páginas de destino principales para el tráfico pagado. Además, cualquiera que haga clic en cualquiera de las colecciones/banners de oferta dentro del sitio, aterriza en una página de categoría. Por lo tanto, se vuelve crucial unir el viaje del usuario aquí y mantener el contexto.

• Cuanto más amplia sea la categoría, más difícil será para los usuarios hacer una elección. Por lo tanto, para ciertos casos, es posible que queramos reducir el viaje del usuario a una subcategoría más específica y, posteriormente, a productos específicos.

• Ciertas categorías son muy especiales o nuevas y los usuarios deben conocer las USP en el mismo momento en que llegan a la página.

Solución

La cabecera consta de 4 componentes principales. Se nos ocurrió un enfoque en el que los componentes configurables se encargarían de los casos de uso mencionados anteriormente: simplemente colocar un banner en el encabezado y confiar en los banners creativos, comprar por, filtrar/ordenar la barra de herramientas y ofrecer comunicación para hacer el resto.
Hablaré de banners aquí, y cubriré 'comprar por' y ofertas más adelante. Diseñamos 3 variaciones o plantillas para los banners de categoría:

1. Banner único
2. Carrusel
3. Dividir pancartas

Los banners individuales funcionan perfectamente para categorías estrechas y hablan de sus USP. Los carruseles y los banners divididos, por otro lado, son una excelente manera de proporcionar múltiples banners dentro de un espacio limitado y se utilizan para conducir a subcategorías.
Al promocionar cualquiera de estas páginas, los equipos creativos y de marketing digital se aseguran de que los creativos de marketing hablen el mismo idioma y utilicen imágenes similares para unir el viaje del usuario.

Ahora, al igual que el banner de héroe de la página de inicio, estos banners ocupan el 100% del ancho disponible, sin embargo, la altura es constante. De ahí que en algunos casos (o resoluciones) acabemos recortando el banner por la derecha. Entonces, al igual que la página de inicio, definimos áreas seguras y se le pidió al equipo creativo que siguiera lo mismo al diseñar estos banners.
A continuación se muestra un ejemplo de cómo definimos lo mismo para un banner dividido:

Advertencia

Este no es un diseño para dispositivos móviles y, luego de una elegante degradación, en los dispositivos móviles recurrimos a un simple banner o un carrusel habilitado para deslizar. No hay banner dividido para móviles.

Incorporación de aplicaciones

Desafío

• Desea decirle mucho a los usuarios, pero ir más allá de 4 tarjetas durante la incorporación es una exageración. El espacio es limitado, las funciones son enormes, los usuarios no tienen tiempo para leer y, a pesar de todo esto, es necesario que la aplicación se mantenga.

• No sabes quién está navegando : un novato o un experto, un explorador o un navegante; y debe diseñar una experiencia de incorporación adecuada para todos

Solución

En lugar de pensar en lo que queremos decirle al usuario, comenzamos a pensar al revés → ¿Qué querrían aprender los usuarios? Con una investigación rápida con tira reactiva, pudimos darnos cuenta de que los usuarios buscaban principalmente respuestas a las siguientes preguntas:

1. ¿De qué se trata esto?
2. ¿Qué puedo hacer aquí?
3. ¿Cómo empezar?
4. ¿Qué hay para mi ahí dentro? ¿Cómo me ayuda esto?

Entonces, el problema simplemente se redujo a 4 pantallas que podrían responder estas preguntas. Por lo tanto, nos concentramos en las siguientes 4 pantallas:

La última pantalla está ingeniosamente diseñada para promocionar FitCode, pero los usuarios pueden omitirla y continuar comprando.

Advertencias

Hay un par de fallas, que ahora estamos corrigiendo y me gustaría advertirle:

1. La ventana emergente de permiso de notificación se muestra directamente en la pantalla de incorporación. Esto es muy irritante para el usuario y es probable que obtengamos una conversión mínima aquí. Qué se debe hacer en su lugar: se debe buscar el permiso de notificación después de que ocurra un determinado evento (por ejemplo, inicio de sesión, pedido exitoso, acceso al contenido, etc.).
2. Los mensajes de participación web (ventanas emergentes de marketing) a veces se muestran durante la incorporación. Una vez más, es una experiencia muy mala y es muy probable que los usuarios no sean receptivos a los mensajes de marketing durante la incorporación. Debemos tener cuidado de que no se muestren ventanas emergentes en las pantallas de incorporación.

Código de ajuste

Desafío

• Muchas mujeres prefieren comprar en una tienda física a comprar online. Una de las razones más comunes de esto es que no están seguros de si un producto en particular se adaptará a ellos. No pueden probarlo en línea.

• Diferentes mujeres tienen diferentes formas corporales y no existe un producto único para todas cuando se trata de lencería. Por lo tanto, es crucial presentarles el producto que se adapte a su forma corporal y preferencias.

• Si les das un formulario para llenar sus medidas y preferencias, las bajas son altas. Por lo tanto, cualquier solución que se nos ocurra debe ser efectiva.

Solución

El equipo de diseño de moda de Zivame, junto con los gerentes de producto, realizaron una investigación exhaustiva y dedujeron que los tipos de cuerpo de las mujeres se pueden describir con precisión dividiéndolos en 11 tipos de perfiles.

Combina estos perfiles, junto con las medidas y preferencias, y deberías poder proporcionar las recomendaciones de productos correctas a los usuarios. A esto lo llamamos FitCode, que se obtiene haciendo a los usuarios una serie de preguntas (FitCode Quiz).
Una versión de esto fue diseñada, probada por usuarios, implementada y lanzada en aplicaciones. Mientras los usuarios captaban el concepto y respondían el cuestionario, hubo 2 problemas evidentes:

• Alto número de abandonos
• Algunas personas pensaron que las imágenes que habíamos usado para representar los perfiles eran espeluznantes.

Nos dimos cuenta de que el cuestionario estaba diseñado de una manera en la que primero preguntábamos a los usuarios las preguntas difíciles, y este enfoque debía cambiar. Necesitábamos que los usuarios se involucraran haciéndoles primero las preguntas más fáciles y luego las más difíciles. También cambiamos nuestras creatividades y las hicimos más abstractas. Ya no eran espeluznantes. Echa un vistazo a las pantallas a continuación:

Encuentra tu ajuste perfecto

Espero que hayas encontrado este artículo informativo y perspicaz.

Estudie cursos de gestión de productos en línea de las mejores universidades del mundo. Obtenga programas de maestría, PGP ejecutivo o certificado avanzado para acelerar su carrera.

Programa destacado para usted: Programa de certificación Design Thinking de Duke CE

¿Qué se entiende por descubrimiento de productos de múltiples vías?

El descubrimiento de productos se refiere a la forma en que un cliente, que ha llegado a un punto de contacto con el cliente por primera vez, aprende, comprende y retiene información sobre el producto que ofrece la empresa, lo suficiente como para garantizar que recordará inmediatamente la marca la próxima vez. tener un requisito de repetición. El objetivo de todos los gerentes de producto debe ser garantizar que esto suceda dentro de los primeros 8 segundos de la experiencia del cliente en los diversos puntos de contacto con el cliente de la empresa. En caso de que la firma ofrezca más de un producto, el objetivo es que esto suceda para todos ellos. Esto es básicamente de lo que se trata el descubrimiento de productos de múltiples vías.

¿Existen cursos específicos de gestión de productos para empresas de comercio electrónico?

No, no hay cursos específicos de gestión de productos para comercio electrónico. Algunas empresas menos escrupulosas pueden afirmar eso, pero sería prudente verificar sus credenciales antes de lanzarse. Los buenos programas para la gestión de productos no son tan específicos, ya que sería una desventaja para los estudiantes. El objetivo de permitir que uno se convierta en un buen gerente de producto es garantizar que tenga las habilidades y el conocimiento necesarios para hacer un buen trabajo independientemente de la elección de la industria, lo que a su vez les permitiría cambiar de industria en etapas posteriores de sus carreras.

¿Cómo me convierto en gerente de producto sin un MBA?

Para ser un buen gerente de producto que pueda resolver las entrevistas más difíciles, las habilidades básicas de dominio que necesita son una comprensión justa de la tecnología del producto, un excelente conocimiento del diseño del producto y el diseño de los recorridos del cliente, y habilidades de gestión comercial. Por lo tanto, podría ser desalentador para una persona que tiene suficientes habilidades técnicas y experiencia laboral, pero que no comprende la gestión empresarial, como la planificación financiera, la elaboración de presupuestos, la gestión de proyectos, el marketing, la estrategia, etc. De hecho, la mejor manera de desarrollarlos implicaría obtener un MBA. Sin embargo, gracias a la demanda de gerentes de productos capacitados, uno también puede acceder a estos roles siguiendo cursos de medio tiempo en gestión de productos.