No es solo una Card
Las pequeñas cosas importan
Si, es así, y a veces tienen fallos de usabilidad que rompen el flujo natural de la User y crean conflictos.
Una Card es el tema que nos ocupa, y además en su versión mobile, un reto que ha requerido herramientas que han conformado un framework de trabajo para solventar los problemillas que la Card tenía.
Empecemos.
Si bien el lector conoce un poco de que va esto, sabrá que empieza como todo buen reto con un Briefing. Del cual dejo aquí un breve análisis (bueno, no tan breve):
Análisis del Briefing
Nos encontramos ante una card que tiene unas problemáticas a resolver, es una card para una shop, concretamente la del feed mobile de “cerveza Galicia”. A priori puede parecer sencillo, y no lo es, pero tiene muchos matices.
Para empezar he decidido resolver este reto de una manera realista, sin alejarme de la propuesta original, podría escoger crear una card nueva, desde 0, pero no, creo que es mejor resolver la problemática dentro de las reglas del juego, de manera sutil, con pequeños cambios que hagan las experiencia del las users mas fluida con este elemento que nos toca trabajar.
En el brief, se detalla que la problemática/reto es resolver que cuando una User entra a comprar y se encuentra con una card, que esta card se explique lo mejor posible, que tenga una buena Affordance, sobretodo en si se trata de un pack de 24 unidades, de un pack de 12, un producto individual, etc. Y que si es un producto con más o menos cl sin necesidad de cambiar la foto del producto.
Card
Vemos unas cards que por motivos que desconocemos, tienen en su imagen de producto 3 elementos, posiblemente es la manera de representar un grupo de productos de numero indeterminado, estas imágenes a veces no coinciden con el producto que representan (al menos en su contenido en cl).
La linea de diseño está muy definida, juega con los colores de su branding, quizás es una linea un poco dura, pero está dentro de los parámetros del producto que vende.
¿Qué se nos pide?
- Que diseñemos una, varias cards.
- Que se se entienda con un vistazo 👀.
- Que evitemos el uso de fotografías que expliquen el contenido en la medida de lo posible.
- Usar la tipografía Jost.
- Evidentemente todo deberá estar componetizado en Figma.
Entregables
- Una o varias Card con la problemática resuelta.
- Componentes de la Card.
Research Questions
Ahora formularé unas preguntas para empezar a estructurar que puntos necesito saber para resolver el reto, y los organizaré según que herramienta vaya mejor para resolver la pregunta:
- ¿Son estas cards las que se utilizan actualmente?
- ¿Qué hace la competencia para resolver la problemática de los packs?
- ¿Cómo resuelve la competencia la problemática del tamaño del producto (cl)?
- ¿Qué maneras/formas existen de jerarquizar los elementos de una card de e-commerce?
- ¿Cómo podríamos destacar que se trata de un pack sin darle demasiada importancia?
Desk Research
Estrella Galicia
Conozcamos un poco al cliente:
Cuando hablamos del mundo de las cervezas en España, la mayoría de las personas piensan rápidamente en marcas como Mahou, Estrella Damm o Cruzcampo, ya que llevan muchos años en la mente de los consumidores. Sin embargo, en los últimos años, una marca de cerveza ha entrado con mucha fuerza en el mercado español, debido en gran parte, a la excelente estrategia de marketing que ha desarrollado
Estrella Galicia no solo es conocida en España, sino que también ha pasado a ser un referente a nivel internacional. Sin duda, el marketing se ha convertido en una gran herramienta para alcanzar los objetivos empresariales
Estrella Galicia decidió enfocarse en su producto, y más concretamente, en la diversificación del catálogo de cervezas.
Y es que en el sector cervecero español hay una fuerte competencia, de modo que Estrella Galicia apostó por una estrategia 360º de diferenciación, la cual ha desarrollado a través de diferentes canales como la publicidad en medios tradicionales -televisión, radio y prensa-, la publicidad online -buscadores y redes sociales-, la promoción de artistas del mundo de la música o el patrocinio de equipos deportivos.
Cambio de Imagen
Imaxe ha sido la encargada de dar una nueva imagen 15 años después de que llegara al mercado el último diseño de la cervecera gallega. La compañía recupera la estrella original presente en la primera etiqueta del grupo, que tiene más de un siglo de historia en un cambio de look que mantiene como referencia la imagen de marca actual, procedente de 2006.
Una nueva imagen a través de la cual buscamos diferenciarnos y sorprender a nuestros consumidores, así como afianzar nuestro carácter artesano en nuestra resistencia contra la estandarización de la cerveza. Pero sobre todo, con este diseño buscamos ser más respetuosos con el medio ambiente. Por ello, hemos introducido importantes novedades en el packaging para reducir sustancialmente nuestra huella de carbono y ser más sostenible.
Breve análisis del Feed y las Cards
Ahora ya sabemos un poco más sobre para quien trabajamos, ahora resolvamos una de las preguntas de las Research questions:
¿Son estas cards las que se utilizan actualmente?
Vamos a empezar por ver cual es el estado actual de las cards de Estrella Galicia visitando su web en mobile:
Y la respuesta es si, esta problemática existe en su web, sus cards tienen los retos por resolver, eso me anima a buscar soluciones para que sus users puedan completar el flujo de compra de una manera más eficiente.
Hay un punto importante a destacar, y es que como es habitual, cuando hacemos click en la card nos lleva a una landing de configuración de producto. En este caso podemos ver varias cosas:
😒 Hay un problema con las imágenes de producto, no corresponden al producto.
En todos los e-commerce la card te dirige a una landing. Pero lo ideal sería que al tratarse de una landing de configuración de producto, en ella las/os users tuvieran más opciones de configuración de producto (por ejemplo, otros packs).
Benchmark
Vamos a ver que hace la competencia, como diseñan sus cards. Y intentaré buscar respuestas a estas preguntas formuladas en el Research questions:
- ¿Qué hace la competencia para resolver la problemática de los packs?
- ¿Como resuelve la competencia la problemática del tamaño del producto (cl)?
- ¿Qué maneras/formas existen de jerarquizar los elementos de una card de e-commerce?
Estrella Damm
Nos encontramos que Estrella Damm utiliza unas cards más sofisticadas, con animaciones, despegándose así del clásico e-commerce, ganando un plus de calidad, diseño, y lo que es mas importante, mostrándonos como ellos resuelven la problemática que nos atañe en esta challenge.
Las card, son extremadamente minimalistas (producto + precio + tipología), vemos como dejan la card en lo esencial, si quieres personalizar el pedido lo puedes hacer en la ficha de producto (landing). En el caso de esta card no hay problema para identificar si es un pack, y tampoco lo hay con el tamaño/contenido del producto. La imagen de producto nos presenta una sola unidad.
Mahou
El siguiente es Mahou, esta marca no tiene una shop propia, si no que lleva a la user a tienda solana, encontraremos este recurso en varias marcas de la competencia, como por ejemplo Alhambra.
Al ser un e-commerce al uso nos encontramos con algo tradicional en su diseño, más cercano a un e-commerce convencional. Vemos que utiliza un diseño de card muy sencillo en la versión mobile, con los elementos mínimos, pero falta información, y el diseño es un poco pobre.
En la versión para desktop presentan el producto individual, tal y como ya hemos visto anteriormente. Nos encontramos con unas cards sencillas y con la información justa y necesaria: Producto + precio +puntuación + btn (visible solo cuando haces hover).
Es en este punto de la investigación donde una pregunta empieza a rondarme, ¿es la opción de Estrella damm la mejor, por mostrar solo la información esencial? si queremos más detalles tenemos la ficha de producto…
Alhambra
Como ya he mencionado anteriormente, esta casa cervecera utiliza Tienda Solana como Shop, pero en la pagina de tienda de su web encontramos que tienen Cards:
Estas cards son extremadamente pobres, sin información más allá del nombre del producto y un botón para ir a Solana.
Ambar
En este caso si que encontramos que tienen tienda propia, la propia web en si es una tienda, muy neutra y estándar.
Respecto a las cards, tenemos novedades, mucha mas información de configuración de producto en la card. Tenemos el titular un texto que nos informa de las especificaciones del producto, un link a la landing, precio y un selector de cantidad 🤔.
Su solución al reto de tipología de producto es poner una imagen de un solo producto para no confundir a la user (que es algo que hemos visto en todos los casos anteriores).
En la landing de configuración nos encontramos casi con la misma información que en la card, con algunos textos para completar la ficha de la cerveza.
🤓 Análisis de los datos de Benchmark
Bien, creo que es suficiente con esta muestra de la competencia, en ella me he podido ver como resuelven los retos que se nos plantean:
Estrella Galicia es la única por ahora que utiliza 3 elementos en vez de uno en la imagen de la card. Creando una confusión innecesaria.
Respecto al contenido en cl del producto, quizás es Damm la que nos muestra una solución interesante, deshacernos de toda información no esencial y concretar:
¿Conoces a Lucía?
Ahora con los resultados del análisis de datos, es interesante crear una User Persona, a la que enfrentemos al flujo de compra para ver qué paint points/oportunidades encontramos o destacamos para después buscar la solución más interesante para estos.
Lucía
Es una mujer de 38 años, es una persona resolutiva, y alegre.
Le gusta salir con sus amigas los viernes y tomar un cerveza con ellas. Es consumidora habitual de Estrella Galicia.
Trabaja en un centro para adultos dando clases, le gusta hacer deporte y es una persona que no suele hacer sus compras por internet.
Debido a su trabajo, tiene la vista cansada, por lo que suele leer con gafas, pero no las usa con el portátil.
Le gustaría desenvolverse mejor con la tecnología, y tener más afición a las webs de compra por internet, pero no acaba de tener confianza plena por desconocimiento y falta de practica.
User Journey
Veamos que tal le va a Lucía haciendo una compra en la web de Estrella Galicia. Con un sencillo Journey veremos que puntos son los mas destacados y difíciles para ella a la hora de comprar utilizando las cards actuales:
Análisis de los datos de User Persona y User Journey
Con estas herramientas hemos acabado de definir los problemas que nos encontramos en las Cards de Estrella Galicia, hay 5 principales a los que buscaremos soluciones, primero planteando unos bocetos para estructurar los elementos que la componen.
- Imagen de un sólo producto
- Jerarquía bien estructurada
- Cuerpos de texto
- No repetir información
- Mejorar botón de añadir a la cesta
Arquitectura de la información
Bocetos
Con toda la información recopilada hasta ahora, y con el foco en los paint points, he dibujado varias opciones de cómo podría ser la estructura de las cards, centrando los esfuerzos en definir diferentes variaciones de composición.
De todas las composiciones he escogido una para hacer las primeras Cards ya en Figma, en ellas empezaré a ver realmente un resultado de toda la investigación hecha hasta ahora.
Style Guide
Para trabajar la capa visual tanto de las cards como del resto de elementos es muy clara, tenemos una paleta de color bien definida y una tipografía única para trabajar:
El color
La tipografía
Componentes
Componetizar los elementos que constituyen nuestro trabajo hace más fácil su posterior manipulación. Para tener un mayor control de los elementos en Figma he utilizado Atómic design, por ello los componentes que vamos a ver son átomos, ya que las combinaciones de estos forman moléculas (el footer de la card por ejemplo), y han acabado siendo un organismo (Card).
Empezamos por los botones, en este caso es importante que tengan todos los estados para dar feedback a la user de que la acción se está realizando:
He componetizado las imágenes para agilizar la el proceso de realizar las cards de otros productos, de esta manera solo con una acción cambias la imagen por la que toca:
Con los iconos pasa lo mismo, al ser componetizados se pueden ir cambiando cuando la card o el botón lo requieren, como solo es una card tenemos 2 iconos:
Card
Finalmente, este es el diseño de la card (que es también un componente), a continuación detallo como he resuelto los retos de esta challenge:
Podemos ver el aspecto de la Card cuando la user presiona el botón, y cuando el botón esté disabled por alguna razón.
Estas son algunas variables de la misma card con distintos productos, cambiando la imagen y el contenido de los textos, gracias a los componentes este tipo de acciones son fáciles de llevar a cabo.
Prototipo
Prototipo animado con Figma, puedes mejorar la experiencia haciendo click en las flechas de expandir pantalla 😉
Test & Iteración
Una vez acabado el prototipo, he testado las cards con users y del resultado de sus experiencias he decidido iterar un poco más la Card.
He decidido hacer una variante separando los elementos Pack y cl, para hacerlos más visibles y independizar una información de la otra. El resultado es este:
Conclusiones
Retos que parecen pequeños y que finalmente podrías estar iterando sin parar cambiando pequeñas cosas que mejoren la percepción de los elementos y mejoren su Affordance, pero en algún momento hay que parar, testear y finalizar.
¡Gracias por tu atención!
En breve, más.
