Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Benchmark sobre aplicaciones móviles del sector...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Benchmark sobre aplicaciones móviles del sector retail

Analizamos varias aplicaciones móviles del sector retail de Asos, H&M, Zara y Zalando.

Avatar for Torresburriel Estudio

Torresburriel Estudio

September 02, 2016
Tweet

More Decks by Torresburriel Estudio

Other Decks in Design

Transcript

  1. Índice de contenidos Aspectos analizados: 1. Pantalla principal 2. Listado

    de productos 3. Ficha de producto 4. Buscador de productos 5. Registro y login de usuario 6. Proceso de check-out
  2. Asos: Pantalla principal Cabecera: • Menú hamburguesa (1): abre un

    desplegable con categorías para Hombre y Mujer. • Buscador, artículos guardados y carrito. (2) Cuerpo: • Cambia en función de Hombre o Mujer (3) Pie de página (4): • Entrega al día siguiente • Devoluciones • Descuento para estudiantes 1 2 3 4
  3. H&M: Pantalla principal Cabecera: • Menú hamburguesa (1), buscador, carrito

    y escáner (2) • No tiene artículos guardados (favoritos) • El menú cuenta con una opción para volver a la pantalla principal en cualquier momento. Cuerpo: • Reclamos, como entrega gratuita a domicilio (3) • Carrusel de imágenes (4) 1 2 3 4
  4. Zara: Pantalla principal Cabecera: • Buscador y carrito y escáner

    (1) • No tiene menú hamburguesa de navegación • No tiene artículos guardados (favoritos) Cuerpo: • Banner de promociones (2) Pie de página (3): • Información organizada en pestañas 1 2 3
  5. Zalando: Pantalla principal Cabecera: • No hay menú desplegable, navegación

    por iconos (1) • Incluye buscador y acceso a artículos favoritos (2) • Puedes ver los últimos artículos que has visto. • Permite configurar tu perfil de preferencias en función de Hombre, Mujer y Niño (3) Cuerpo: • Banners de promociones (4) 1 3 2 4
  6. Asos: Listado de productos Vista general: • Vistas en lista

    y cuadrícula (1). • Ordenación. (2) • Filtros muy completos (3): género, estilo, precio, talla, marca, color. Producto: • Puede añadirse un producto a la lista de favoritos (4) Ventajas: • Diseño muy limpio con la información estructurada 1 2 3 4
  7. H&M: Listado de productos Vista general: • Prioriza filtro y

    ordenación (1) • Indica el número de artículos encontrados (2) • Vistas en cuadrícula y lista (3) Producto: • Puedes visualizar el producto solo o vestido por un modelo (4) • Muestra colores disponibles (5) 1 3 2 4 5
  8. Asos: Ficha de producto Vista general: • Ver desfile: Contenido

    multimedia que muestra el producto llevado por alguien (1). • Opción de guía de tallas muy visible (2), aunque separada del selector de talla (3). • CTAs muy visibles de Añadir al carrito (“Mi bolsa”) y “Guardar para más tarde” (favoritos), (4) Más información: • Más info de producto haciendo scroll hacia abajo • Visualizar productos recomendados (al final) 1 2 3 4
  9. H&M: Ficha de producto Toda la información en la página:

    • Carrusel de imágenes (1) a pantalla completa • Información organizada a través de un menú de pestañas: Información, opciones de colores y tallas (2) • CTAs poco visible de Añadir al carrito (3) • Botón de compartir en redes sociales (4). Cuando se ven todos los productos de la categoría sugiere otros productos que invitan al usuario a comprar más. 2 1 3 4
  10. Zara: Ficha de producto Toda la información en la página:

    • Imagen de producto a pantalla completa, con opción de Más info (1), que incluye toda la información de producto. • Efecto zoom en la imagen. • Carrusel de colores disponibles (2) • CTAs visible de Añadir al carrito (3) • No tiene botón de compartir en redes sociales. 2 1 3
  11. Zalando: Ficha de producto Toda la información en la página:

    • Carrusel de imágenes de producto a pantalla completa (1), que incluye toda la información de producto. • Tiene botón de compartir (2), para enviar a un amigo • Permite elegir color, guardar producto en favoritos y añadir al carrito como botones destacados. (3) Al deslizar hacia abajo se ven más características del producto, con opiniones y valoración de otros usuarios. 1 2 3
  12. Asos: Buscador de producto Buscador: • Texto predictivo en el

    campo de búsqueda (1) • Indica número de resultados para cada búsqueda (2) 1 2
  13. Zalando: Buscador de producto Buscador: • Texto predictivo en el

    campo de búsqueda (1) • Búsquedas agrupadas por tipo de cliente (2) : Hombre, mujer y niño. • Posibilidad de eliminar historial (3) 1 2 3
  14. Registro de usuarios y formulario de entrada Registro de usuario:

    • En ninguna es necesario registrarte para navegar a través del listado de productos. • En Asos te permite registrarte con redes sociales, sin necesidad de crear cuenta en la aplicación. Formulario de login : La mejor versión es Asos porque: • Ofrece información en tiempo real • Al situar arriba el buscador, no obstruye la función de autocompletado • Teclado adecuado a cada campo a rellenar • Widget específicos como el de calendario
  15. Asos: Formulario de check-out Check-out: • Posibilidad de editar talla,

    color y cantidad (1) • Posibilidad de eliminar el producto (2) • Posibilidad de guardar en favoritos (3) • CTA de pago seguro y el importe total se visualizan de forma clara (4) 1 2 3 4
  16. H&M: Formulario de check-out Método de envío: • Información de

    entregas mostrado de forma clara (1), aunque visualmente demasiado separadas entre sí (2). • Opción de confirmación por SMS cuando te envíen el producto (3) 1 2 3
  17. Zara: Formulario de check-out Método de pago: • Posibilidad de

    NFC para autentificar tarjeta (1) • Múltiples posibilidades de pago (2): • Visa • Mastercard • American Express • Paypal, • Affinity • Tarjeta regalo • Total de cantidad a pagar (3) 1 2 3
  18. Zalando: Formulario de check-out Check-out: • Check-out por pasos (1)

    Método de envío: • Información sobre el envío (2) • Certificados de confianza (3) • Teléfono de atención al cliente (4) 1 3 2 4
  19. Datos de contacto Torresburriel Estudio Don Jaime I, 5, planta

    3 +34 976 979 313 [email protected] 50003 Zaragoza (Spain) Conoce nuestro trabajo y lo que podemos ofrecerte en www.torresburriel.com/blog/