UX Review
Shop/App Go
Objetivos
Este documento tiene el objetivo de identificar las prácticas negativas desde el diseño visual y la experiencia en el Shop de la app de Go.
La creación de un diagnóstico preliminar nos permite identificar los puntos de dolor que generan fricción en los usuarios, impactando en la percepción del producto y el servicio.
2
Título presentación
Historial de pedidos
Estados de pedidos y detalles de productos en el pedido
01
Estados de pedidos
Puntos de dolor
Estados de pedidos
Los estados del historial de pedidos necesitan un nuevo estilo.
Los usuarios deberían identificar claramente el estado actual de cada pedido.
Algunos estados actualmente tienen texto oscuro y otros blancos. Debería ser consistente el color del texto.
El estilo de los estados puede confundirse con botones.
Historial de pedidos
4
Título presentación
Tablas
Puntos de dolor
Control para ordenar tabla por columnas
El usuario no necesita poder ordenar libremente el historial de pedidos. El historial de pedidos siempre debe estar ordenado de más reciente a más antiguo.
Historial de pedidos
5
Título presentación
Detalle del pedido
Puntos de dolor
Scroll dentro de la misma página
Al querer consultar el detalle del pedido tocando en el botón de “Detalle” la pantalla hace scroll hasta abajo de la tabla con la lista de pedidos.
Detalle del pedido
Historial de pedidos
6
Título presentación
Detalle de productos en el pedido
Puntos de dolor
Detalle de productos
Los productos dentro de la compra y el detalle quedan ocultos en una tabla con scroll horizontal. No es claro para el usuario que existe más información dentro de la tabla.
Detalle del pedido
7
Título presentación
Propuesta de mejora
Propuesta de mejora
Cambiar el estilo de los estados de los pedidos
Mejora de navegación para consultar los detalles de los pedidos:
Historial de pedidos
8
Título presentación
Propuesta de mejora
Propuesta de mejora
Cambiar cómo se presenta el detalle de los productos en el pedido.
Detalle del pedido
Propuesta MDP
Nos gustaria podes agregar en este paso final cual es el precio final que estaria pagando el cliente con los reintegros incluidos (teniendo en cuenta el tope)
9
Título presentación
Precio del producto
Precio final y descuentos
02
Productos y precio con descuento
Puntos de dolor
No es claro cómo impactan los descuentos en el precio del producto.
Al estar separados el porcentaje de descuento y el precio original no es claro si es adicional o cual es el precio final.
Precio del producto
Home del shop
11
Título presentación
Productos y precio con descuento
Puntos de dolor
En la página con el detalle del producto no se ve el descuento, ni el precio original o si hay un descuenta por reintegro y el tope de reintegro está muy oculto en el footer.
Sólo se muestra el precio final
Detalle del producto
12
Título presentación
Productos y precio con descuento
Propuesta de mejora
Cambiar la estructura de cómo está presentado el precio del producto y descuentos
Ajustar tamaños y estilos de texto
Revisar el contraste del color aqua para mejorar la lectura
Home del shop
13
Título presentación
Productos y precio con descuento
Puntos de dolor
Aparte de mostrar el descuento, el precio original tachado y el precio con descuento mas grande podriamos agregar un recuadro como este
Esto porque el precio que vemos como el mas grande no es el precio final sino que es el precio con descuento del seller, sobre ese precio hay un reintegro por parte del banco. En vez de la leyenda “Si depositas tu sueldo en ICBC” deberia tener la frase por ej “Pagando con tu Tarjeta de Crèdito Visa BBVA”
Propuesta MDP
Me gusta que se vea el precio final con el descuento adicional x el reintegro
14
Título presentación
Propuesta de mejora
Productos y precio con descuento
Mostrar la información sobre los descuentos en la pantalla del detalle del producto
Detalle del producto op 01
Detalle del producto op 02
15
Título presentación
Filtros de búsqueda
Precio final y descuentos
03
Filtro de productos
Puntos de dolor
Hay problemas de alineación dentro de cada tipo de filtro (precio, marca, producto).
Es difícil desplegar cada opción porque el área clickeables es muy pequeño.
Los componentes en general no aparentan adaptarse bien a dispositivos móviles. (por ejemplo el componente de rango de precio no está a un 100% del ancho)
17
Título presentación
Filtro de productos
Propuesta de mejora
Nuestra propuesta de mejora plantea agregar dos botones que le permitirán al cliente por un lado filtrar y por el otro ordenar el resultado de las listas una vez que se haya elegido una categoría desde el Menú lateral.
Dichos botones al ser tapeados redirigirá a una nueva pantalla para poder mejorar los problemas de scrolling, foco, y tamaños de áreas clickeables.
Además planteamos que las cards de productos deben adaptarse a el ancho de la pantalla para tener mejor adaptación a los dispositivos móviles.
Botón de filtrar y ordenar
Cards de productos al 100% del ancho
18
Título presentación
Filtro de productos
Propuesta de mejora
Botón de “Aplicar” deshabilitado hasta tener filtros elegidos
Botón de “Cancelar” para volver o cerrar la pantalla de filtros
Agregar pastillas de filtros aplicados que puedan ser eliminados
Que los precios a elegir aparezcan en rangos con bulletpoints��Checkboxes con un mínimo 45px de altura de área clickeable. Y que sea clickeable toda la línea.
Es difícil desplegar cada opción porque el área clickeables es muy pequeño.
Los componentes en general no aparentan adaptarse bien a dispositivos móviles. (por ejemplo el componente de rango de precio no está a un 100% del ancho)
19
Título presentación
Filtro de productos
Propuesta de mejora
Que tenga un sticky nav con principales acciones y título para cuando scrolleas hacia abajo para continuar filtrando.
Mostrar cuantos filtros fueron aplicados al listado
Mostrar cuántos resultados hay y el tipo de orden aplicado a la lista
20
Título presentación