B2C Local Brands
Eccomerce | Keesing Media Group
ROL
UX/UI Design
GOAL
Mejorar el UX de los ecommerces de las marcas locales de Keesing Media Group, como Sport Cerebral, Denksport, Tankesport…
CHALLENGE
Unificar partes de la web para no duplicar contenido, haciendo que el usuario no se sienta perdido en la navegación.
Conocer al usuario
Research
y objetivos.
Para comenzar el proyecto revisamos las pantallas actuales de uno de los ecommerce de las marcas locales de Keesing, escogimos Denksport. Todos los portales son muy similares en cuanto a funcionalidad diferenciándose, sobretodo, en estética.
Pudimos averiguar que en la página actual, duplican productos al tener dos categorias diferenciadas como ediciones sueltas (Single Copys) y Subscripciones.
A continuación mostraré las maquetas de alta fidelidad, pero durante el proceso de trabajo hemos utilizado baja fidelidad.
Unificando servicios
Mejorando la UX.
Descubrimos que lo más apremiante era unificar las secciones Single copy y Subscripciones, ya que nos hacia tener los productos duplicados (todas las magazines están disponibles en ambos formatos). Para ello creamos una unica página de aterrizaje de todos los productos. La página apenas mostraba productos en el Fold debido al gran banner superior.
Para poder mostrar productos decidimos crear banners con contenido de interés en el row de productos y mover el banner publicitario a la parte inferior de la página.
En la página de detalle, ahora se pueden ver todas las opciones disponibles del producto, uniendo así subscripciones y ediciones individuales, facilitando que el usuario encuentre la opción que desea rápidamente.
Además, incluimos un reminder anclado al top, que aparece cuando ya no es posible visualizar el precio o las opciones del producto.
Desde aquí, el usuario puede añadir el articulo directamente a la cesta o cambiar los ajustes del artículo escogido.
Añadimos un pop up para avisar a nuestros subscriptores de cuando recibirían su número y alentar a una venta cruzada de una edición individual.
Por otro lado, si los usuarios estaban comprando una edición individual, los alentamos a la prueba gratuita de nuestros puzzles en línea.
En la versión mobile, no queríamos que el pop up fuera tan intrusivo y para evadir la fricción decidimos hacer una pantalla pop up que se deslice desde la parte inferior, evitando de esta manera parecer un banner publicitario.
Product Landing Page
Filtros más usables.
Otro de los grandes problemas de esta web es que en el fold no se mostraban productos. Veíamos un gran banner publicitario y un filtro desplegado y fijado a la izquierda que nos hacía perder espacio de una primera impresión de productos.
Para mejorar esta página y poder mostrar productos en el fold añadimos un menú de filtrado encima del row de productos, así podemos mostrar siempre las opciones más clicadas por nuestros usuarios según los datos recogidos en Hotjar y dejar a un segundo plano las opciones no usadas.
Además esta opción de filtro permite al usuario ver siempre que opciones ha seleccionado y borrarlas con facilidad. El menú lateral solo se desplegará si el usuario necesita ver más opciones para filtrar.
Findability
Mejorando la searchbar.
Sabemos que tenemos dos tipos de usuarios, los que prefieren buscar las opciones en el menú y los que usan la barra de búsqueda.
Dado a la gran cantidad de articulos que Keesing tiene en sus eccomerces necesitabamos mejorar nuestra barra de busuqeda, para hacerla más eficiente, mostrar resultados relacionados y ofrecer algunas sugerencias.
Decidimos darle mayor importancia en nuestro header y hacerle varios estados según la interacción del usuario.
El Resultado.
Lo que he aprendido
Trabajar en baja fidelidad ha permitido una rápida iteracción con el equipo y facilitado el proceso de implemento de cambios. Más adelante, la alta fidelidad permitió a los stakeholders tener una visión realista del diseño.
Siguientes pasos
Seguiremos viendo que mejoras implementar y en que orden ejecutar estos cambios para poder medir la eficacia de la mejora.
More Work
WordSearch Fun
Game app & Ads | Keesign Digital
UX/UI / DISEÑO VISUAL ANIMATION
