ABC Market (o cómo conseguir la experiencia de compra Offline a Online)

Mockups High Fidelity

El proyecto de ABC Market se ha enfocado para conseguir llevar la experiencia de compra Offline (en la tienda de debajo de tu casa, en el mercado…) a Online. Actualmente la gente es muy recelosa de sus gustos y sus manías y según hemos descubierto en las primeras partes del proceso de investigación, la gente no confía en otras personas para que les realicen la compra.

Aunque la confianza se tarda mucho en ganar, se puede perder en un solo segundo… ¡y nunca más volver!

A NO SER…

Este proyecto se ha basado en la metodología del Design Thinking; entendiendo y comprendiendo las necesidades del cliente (problemas, preocupaciones, etc) y así tener una visión más objetivas de las posibles soluciones que plantearle.

Problema: Los compradores online necesitan ahorrar tiempo y confiar en los productos porque a menudo sienten inseguridad en la calidad, en el estado de los productos y en el proceso de compra.

Hipótesis planteada: Creemos que a través del Superider junto a un seguimiento del pedido para los compradores online lograrán conocer el estado y calidad del pedido asegurándose de recibir justo lo que quieren mientras ahorran tiempo y ganan confianza.

Validación: La hipótesis será validada como correcta, si aumentamos la tranquilidad y la confianza de los compradores online ofreciendo un control sobre la elección y seguimiento de sus pedidos.

¿PERO CÓMO CONSEGUIR DESMARCARNOS DE UNA COMPETENCIA TAN FUERTE COMO POR EJEMPLO EL SUPERMERCADO ONLINE DE… AMAZON?

No, no estamos locos, creemos que realmente podemos competir con Amazon, con la creación de la figura del SUPERIDER. El superider es la figura que se encargará (a través de una suscripción Premium) de elaborar la cesta de la compra de nuestros clientes y llevársela a casa. El cliente a su vez, tendrá la disponibilidad de estar en contacto con el superider para indicarle el lugar y la hora exacta de entrega. Pudiendo ser su propio domicilio (compra semanal o mensual de productos), domicilios ajenos (compras para fiestas o compras para alguien ajeno: hijos, abuelos, etc), la dirección del trabajo, o cualquier otra que se nos ocurra.

Otra funcionalidad que nos parecía muy potente era la de la lista colaborativa de productos, que os explicaré más adelante.

PROCESOS DE INVESTIGACIÓN

Hemos seguido la metodología del Design Thinking para llevar a cabo el proceso de diseño desde el inicio hasta el final: Blueprint Canvas, Problem Statement, Competitive Analysis, Lean Survey Canvas, Affinity Diagram, encuestas, entrevistas, y un graaaaan número más.

Al principio puede sonar un poco a humo todo el proceso de investigación, pero os aseguro que el sentimiento percibido cuando al volverse tangible, todo cuadra… ¡no tiene precio!

¡La CIENCIA del UX!

LA ARQUITECTURA DE LA INFORMACIÓN

El mapa web se convierte en uno de los pilares sobre el que se construyen el resto de las actuaciones de diseño de UX de tu producto digital, porque la ordenación y priorización de opciones que se hace es aplicable tanto a una página web, una app móvil o al diseño de un servicio digital.
Samuel Gimeno

Como cualquier otra construcción (ya sea física o digital) se necesitan unos cimientos y unos pilares que nos proporcionen una estructura estable y sólida. En nuestro caso, nos salió una rama muuuuuy larga porque quisimos adentrarnos en el mayor número de casuísticas posibles. Necesariamente no tiene por qué ser tan larga, al menos no en este momento de la investigación, pero sí altamente recomendable:

Arquitectura de la información — Flujo.

Después de varios testeos, y ver que no solo para nosotros, sino para el público en general que no estaba “intoxicado”, tenía sentido este flujo propuesto (usando los siguientes métodos: Card Sorting, User Flow, Concept Testing…) seguimos adelante con el proceso de prototipado.

PROTOTIPADO

Cuanto antes se cague, antes se arregla.
— YO (Durante el Bootcamp).

Y es así, cuanto antes saques un prototipo básico al mercado y el público lo testee, mejor. Los errores los verás antes, las soluciones a esos errores llegarán antes, y tendrás más margen de mejora en el tiempo que se te haya dado.

Aquí os dejo la presentación de nuestro prototipo en baja fidelidad:

Hemos usado wireframes, mockups y prototipos para que el producto, pese a no tener todavía colores y formas, tenga una consistencia sólida en la cual basar nuestro diseño.

El siguiente paso será crear un atributo de marca: colores, formas, tipografía, logo… El resto de atributos que el público verá y asociará a nuestro sello diferenciador.

IDEAS

Para crear una buena imagen de marca, nos basamos en conceptos que queríamos llevar a la realidad: cercanía y familiaridad, experiencia única (Premium), confianza, calidad, satisfacción, comunidad. Los colores que elegimos transmitía esa cercanía y a la vez la sensación de estar consumiendo productos de altísima calidad.

“Es curioso que los colores del mundo real solo parecen verdaderos cuando los vemos en una pantalla.”
Malcom McDowell

Una vez elegimos los colores (y sus contrastes), queríamos conseguir una tipografía a la par de nuestros conceptos: legible en digital, sólida y cercana. Por eso elegimos la Barlow con sus formas naturales y sencillas, sin adornos y muy directa. Para el caso de los números utilizamos la Roboto, ya que a la hora de situar los números en sus cajas contenedoras no se producía ningún descuadre.

Así nace nuestra guía de estilo:

Style Tile

Ahora que ya tenemos un prototipo, unos colores, una tipografía, y unos valores de marca bien definidos, vamos a sustituir imágenes, textos, botones, logotipo, etc. Para que todo tenga muchísima más consistencia:

High Fidelity Prototipe

Observamos que la sensación que nos produce ahora después de realizar los cambios pertinentes, es la de solidez y empaque. O lo que viene siendo: realidad. Ahora nos imaginamos cómo se ven las cosas realmente.

Lo que antes era magia, ahora es visible. Lo que antes teníamos en mente y sólo eran ideas, ahora las hemos bajado al mundo de lo tangible.

Y a continuación os dejo cuál sería el resultado final en contraposición con el vídeo en baja fidelidad visto anteriormente:

Como veis, ahora tiene una visión mucho más profesional. Y podría pasar como una web creada para un supermercado online perfectamente.

Espero que os haya gustado y ¡muchas gracias por vuestra atención!

POSTDATA

En este artículo he hablado en primera persona del plural porque fue un proyecto conjunto. Y sin mis compañeras Adriana, Mercedes Sagüés y Maca Ramírez, no hubiera sido posible. He aprendido una barbaridad junto a ellas (no sólo en cuanto al diseño, sino a la organización y alguna que otra lección de vida) así que solo me queda agradecerles que hayan aguantado mis “cabezonerías” y mis ideas un tanto utópicas.

¡Muchas gracias!

POSTDATA 2

Si tienes alguna pregunta, no dudes en ponerte en contacto conmigo en los comentarios, en mis redes sociales: @pablo_uxui (twitter), @pablo_uxui (instagram) o a través de mi correo electrónico: pablosaizhernansanz@gmail.com