E-commerce Mónaco

Case Study

ANTECEDENTES
Mónaco es una marca departamental con 10 tiendas físicas en España, que tiene como objetivo convertirse en referente. Actualmente, desea optimizar sus fichas de producto para ofrecer a sus clientes la mejor experiencia de compra ​​online.

Metodología Design Thinking, porque es para generar ideas innovadoras, y centra su eficacia en entender y dar solución a las necesidades reales de los usuarios.

Tiempo: cuatro días.

RESEARCH
Investigué las fichas de producto de e-commerce viendo y analizando: el contenido y funcionalidades que tienen, sus fortalezas y debilidades, estrategia, diseño, usabilidad, accesibilidad e innovación. Indagué en posibles soluciones​​ para presentar y gestionar dicha información a través de un interfaz visual.

CONCLUSIONES
Una ​ficha técnica es la pieza clave​​ de nuestra web, aquí es ​donde el usuario decide si comprar o no el producto, aumentando o disminuyendo nuestra conversión.​​ Factores importantes:

Efectividad: Poder acceder a todos los rincones sin ningún tipo de problema.
Eficiencia:​​ Reduciremos al máximo el número de pasos.
Satisfacción: Un factor donde el usuario tendrá una actitud positiva hacia el ecommerce, por ejemplo uno de los puntos clave a tener en cuenta es la​ velocidad de carga.

EMPATIZAR con los usuarios
Encuestas online, un método cuantitativo​​ que nos dará una recopilación de datos de los usuarios donde podremos extraer insights. Resultados:

71% — El precio con los gastos incluídos.
58% — Poder ver varias imágenes del producto.
54% — Seguridad a la hora de comprar.
51% — Valoraciones de otras personas del producto.
41% — Ver las diferentes opciones del producto.
32% — Pequeña descripción.
29% — Descripción más amplia.
19% — Video del producto.

INSIGHTS

Le gustaría ver el ​tiempo estimado de entrega​​ / Visualizar los métodos de pago / Es muy importante la ​seguridad​​ tanto, a la hora de pagar como la devolución de dinero / Saber que el producto es de ​calidad / La rapidez de entrega / Los ​comentarios de otros compradores / Que se pueda devolver / Seguimiento​​ del artículo.

USER PERSONAS y PROTO JOURNEY

DEFINIR

En qué nos diferenciamos:

• Es sencilla, intuitiva, funcional e innovadora, con una buena Accesibilidad y usabilidad. Con contenido coherente y fácil de interpretar para todos los usuarios, utilizando el lenguaje del usuario.
• Dar confianza y seguridad
• Que tenga :
• Imagen ​​principal / Galería con imágenes del producto desde diferentes ángulos / Zoom / Nombre del producto (palabras claves para aumentar la visibilidad en los motores de búsqueda) / Precio total (con iva incluido) / Opciones del producto / Ayudas / Descripción / Ficha técnica / Stock / Tiempo estimado de entrega / Métodos de pago / Valoraciones / Opiniones / Entrega y devolución / Código del producto / RRSS / CTR Botón de compra / Breadcrums / Carrito de la compra / Botón de lista de deseos / Feedback / Idioma / Usuario / Buscador eficaz / Chatbot / Módulo de sugerencias de productos con IA.

ARQUITECTURA DE LA INFORMACIÓN

Se representa dos diagramas de flujo que empieza desde la página del producto para realizar la compra. Uno realiza la compra sencilla, y el segundo visualiza más información.

Prototipo
El ​primer impacto visual​​ antes de hacer scroll, es ​la fotografía, seguido del botón de comprar (CTA),​​ y a continuación el orden de lectura sería; el precio, el nombre del producto, las opciones del producto, las valoraciones, etc… Todo está estudiado para llevar un orden de lectura. También el chatbot tiene un impacto visual, pero es menor al del producto y al CTA, por su ubicación y tamaño. Pero lo bastante visible por si el usuario necesita ayuda.

La ​tipografía​​, tiene ​altas cualidades de legibilidad con un diseño que ​transmite calidad, seriedad y confianza.​​ ​Con tamaño adecuado para cumplir las mínimas normas de ​accesibilidad.
Es un diseño que refleja la calidad del producto y crea confianza.
Los ​Iconos no crean confusión, y para los usuarios menos digitales e inexpertos, al realizar hover le sale escrita la acción que realiza.
Un diseño limpio también tendrá efecto sobre la ​velocidad de carga​​ de nuestra página.

¿Como lo consigo?
Porque es un ​diseño limpio y consistente sin ninguna carga cognitiva​​, de ahí su facilidad de entendimiento a primera vista.
Las ​fotografías son de calidad​​ y tienen un fondo neutro para enfatizar más el producto.
Por ​la disposición de los elementos​​. Como comenté anteriormente el orden de lectura en Europa es de izquierda a derecha y de arriba abajo.
Por el ​uso de colores neutros​​ para dar prioridad al producto ya que es el protagonista, el objeto deseado.
Utilizando ​diferentes pesos en tipografía y contrastes con el color​​. ejemplo en el caso del CTR, utilizó el negro más fuerte para darle un mayor contraste y peso, como resultado nos da el segundo puesto de impacto visual.
Utilizando ​diferentes tamaños​​ para los elementos y para la tipografía.
Para el menú principal utilizo ​mayúsculas​​ para darle más visibilidad. La legibilidad de las mayúsculas en la lectura de una sola palabra es buena, salvo cuando se utiliza en un párrafo o frase, que es cuando va perdiendo esa cualidad.

Testeo

Tras testar, he comprobado que ​los impactos de los usuarios son los esperados para realizar la compra del producto. En un futuro con la funcionalidad del ​feedback, los usuarios nos dirán posibles errores, con lo cual podemos ​iterar.

También es fundamental realizar un diseño ​Responsive​​.