27 enero 2015

De nuevo uno de esos momentos que molan cuando uno dedica su tiempo en cuerpo y alma a tratar de enfocar proyectos con una nueva perspectiva.

En este caso os quiero hacer algunos comentarios al hilo del trabajo de rediseño en el que hemos aportado nuestro granito de arena desde el Estudio: el ecommerce de Up&Scrap.

Up&Scrap es una empresa aragonesa que se dedica a vender materiales de scrapbooking. Su catálogo de productos es muy diverso y teníamos el encargo de abordar el rediseño del mismo con un claro objetivo de optimización.

Nuestra intervención ha tenido lugar en los primeros pasos del rediseño, donde hemos planeado una revisión de la arquitectura de la información así como de los modelos de interacción que llevan al usuario a hacer una selección de producto y se produzca de la mejor manera posible la venta final. Que, por cierto, es de lo que se trata en la mayoría de ecommerce’s, por no decir en todos.

Hemos utilizado las técnicas habituales para abordar un proyecto de este tipo:

  1. Estudio de la competencia en tanto en cuanto queríamos detectar y estudiar buenas prácticas.
  2. Estudio de buenas prácticas en sectores complementarios.
  3. Entrevistas para obtener el máximo de información de primera mano, con el objetivo de intentar no dejar ningún detalle del comportamiento de los usuarios a la hora de interactuar con el ecommerce.
  4. Observación. ¿Y qué es lo que hemos observado? Al tratarse de un ecommerce que vende un producto tagible, estuvimos visitando, y observando, las instalaciones logísticas de Up&Scrap con el objetivo de tener un conocimiento mucho más rico de los procesos que se siguen para que una venta se entregue al cliente, lo cual nos llevó a conocer cómo son las maneras en las que los usuarios interactuan con la propia tienda, además de conocer los procesos internos que llevan al ecommerce a proporcionar el servicio al cliente final.
  5. Prototipado de alto nivel. Lo que hicimos fue tratar de consensuar con el cliente las pantallas con las que íbamos a trabajar, donde intentamos reflejar lo que el usuario iba a ver, cómo podría realizarse la interacción. Es un buen momento también para comprobar que las funcionalidades y los requisitos están plasmados en la propuesta. Y es bastante sencillo de visualizar para el cliente.
  6. Prototipado de bajo nivel. O lo que es lo mismo: diseñamos todas las pantallas, sin visual, que son necesarias para que los usuarios realicen las tareas que harán cumplir los objetivos de negocio del ecommerce.

Vamos a hacer algunos comentarios al hilo de algunas de las pantallas que hemos trabajado en este proyecto.

Página principal

Como es sencillo de imaginar, la página principal en un ecommerce de este tipo y de esta naturaleza tiene en la página principal una buena tarjeta de presentación. La recurrencia en las visitas es uno de los índices que hay que considerar a la hora de prestar más o menos atención a los detalles de interacción y los copys, desde nuestra experiencia.

U&S Home
Diseño visual de la página principal

U&S wireframe Home
Modelo de trabajo de wireframe de la página principal en una de sus versiones de trabajo

Ficha de producto

La ficha de producto, en mi opinión, es el momento del ecommerce en el que más atención hay que prestar a los detalles y a la interacción con el usuario, considerando los escenarios de uso (que hemos tenido que identificar en algún momento de la fase de prototipado).

U&S Ficha de producto
Diseño visual de la ficha de producto

U&S wireframe Producto
Wireframe de trabajo de la ficha de producto

Listado de producto

Se trata de uno de los momentos, que no necesariamente el único, en los que el usuario tiene la posibilidad (y la intención) de hacer una selección de producto para considerar su idoneidad. Dicho así quizá parezca un poco abstracto, pero si entendemos este momento como un momento de indagación por parte del usuario, creo que podremos comprender mejor la importancia de esta pantalla en un entorno de ecommerce como del que estamos hablando.

U&S Listado de producto
Diseño visual del listado de producto

U&S wireframe Listado
Wireframe del listado de producto en una de sus versiones

Checkout

Qué vamos a decir de la pantalla de checkout, ¿verdad? Pues eso.

U&S Checkout
Diseño visual del checkout

U&S wireframe Checkout
Wireframe de trabajo del checkout

Por supuesto, todo esto que cuento aquí ni se hace en dos días ni es tan sencillo como sólo leerlo (ni mirar los WF o las pantallas visuales). Es sólo un resumen de la metodología de trabajo utilizada para abordar el proceso de rediseño. Nada nás que eso. Y nada menos 🙂

Los resultados del proceso de trabajo se pueden ver en el propio ecommerce de Up&Scrap.

El trabajo de diseño visual y la integración ha corrido a cabo del equipo de Hiberus Internet.

Como siempre digo en estos casos, cualquier feedback será bien recibido.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Comentarios

  1. Hola,hay algunas cosas que me desconciertan, ahí van:

    – como es que en el proceso de check out, no existe el path o rastro de migas especifico para que el usuario tenga el control en este proceso? ya sabemos que es el “momentum” de abandono de carritos.

    – en el primer paso de la cesta de la compra, ¿ por qué no se refuerza la confianza al usuario, añadiendo iconos de pago seguro, entidades financieras, confianza online o similares cerca del call to action FINALIZAR LA COMPRA? en este mismo punto, porque no se le da la posibilidad de seguir comprando desde este step del proceso con un enlace tipo SEGUIR COMPRANDO?

    Un saludo.Victor

  2. Por qué no existe el path o rastro de migas especifico en el proceso de check out?

  3. Muy interesante el rediseño completo de la web. ¿ Cuánta gente habéis trabajado en ella ?

    Una cosa que se me hace árida al entrar, supongo que será porque desconozco la temática un poco, es que hay demasiados términos en inglés.

    Por lo demás es muy interesante el tiempo que habéis trabajado en ella. Sin duda se ve que es mucho.

    Un saludo

  4. Jorge: a tus preguntas te puedo decir que el conocimiento de la materia es uno de los elementos clave, desde luego. Por eso puede que quizá no comprendas alguna cosa, pero el target es uno muy definido.

    Gracias por tu comentario!

  5. Víctor: es debido a los objetivos parciales de la pantalla.

  6. Víctor:

    Como le acabo de decir ahora mismo a otra persona, la ausencia explícita de breadcrumbs es debido a los objetivos parciales de esa pantalla. En relación a tu segunda pregunta, es debido a las pautas de comportamiento de los usuarios. No todos los patrones de comportamiento de usuarios en momentos específicos son iguales, ni exportables de unos proyectos a otros. Del mismo modo, la interfaz tal y como está lo que persigue es facilitar la finalización del proceso.

    Gracias por tus comentarios.

  7. que poco respeta los WF tu diseñador…

  8. Juan: considera que los WF que he incluido en el post son documentos de trabajo, y no necesariamente WF finales.

  9. Gracias por la respuesta, ¿a qué te refieres con “objetivos parciales”? no es recomendable qué el usuario sepa el “camino” hasta finalizar el proceso?,¿tenga el control sobre el mismo? Así lo comenta nuestro amigo Nielsen o la gente de Multiplica entre otros, no? Luego, la segunda cuestión, esta claro que el objetivo final es acabar el proceso con éxito (satisfacción, tiempo…), pero quizás el usuario desea consumir más productos, consumir más información… (de igual manera que se linka logotipo con Inicio), ¿ no sería recomendable insertar la opción de seguir comprando?, ¿ no le interesa a la empresa aumentar el valor medio del carrito?saludos y gracias por la respuesta

  10. Víctor:

    Objetivos parciales son los objetivos a nivel micro que tiene (o debe tener) cada pantalla. Son objetivos a nivel cliente y como entenderás no los puedo contar aquí.

    Respecto a la segunda cuestión, plantearlo en términos como los que tú lo haces (“¿ no sería recomendable insertar la opción de seguir comprando?, ¿ no le interesa a la empresa aumentar el valor medio del carrito?”) lo puedo entender si hablamos de un genérico, o de un proyecto del que no conocemos el patrón de comportamiento de los usuarios. Pero ese no es el caso en este proyecto.

    Gracias a ti por mantener viva la conversación en el blog 🙂

Trabajamos proyectos de diseño de servicios y productos digitales en los que la investigación de usuarios es un elemento fundamental del proceso.