Diseño UX/UI para un Ecommerce de Productos Ecológicos

Este case study detalla el proceso de diseño UX/UI para un ecommerce de carne ecológica, enfocado en ofrecer una experiencia de compra sencilla y confiable para consumidores interesados en productos sostenibles.

Proyecto realizado en la empresa CompsaOnline

Diseñadora UX/UI: Irene Pedrico

Tiempo: 2 meses

Contexto

La creación de este ecommerce surge de la necesidad de brindar a los consumidores de productos ecológicos un espacio de compra en línea que combine comodidad, confianza y sostenibilidad. Con un tiempo y presupuesto limitados, el reto principal fue diseñar una plataforma clara y atractiva que, sin investigación avanzada, lograra responder a las expectativas de usuarios que valoran la transparencia en el origen de los productos y la facilidad de compra. Para ello, el equipo de diseño se apoyó en estudios de competencia y perfiles de usuario basados en datos secundarios y tendencias de mercado, desarrollando un sitio web optimizado para un usuario interesado en la autenticidad y en la sostenibilidad de su compra.

Problema

El proyecto presentaba dos grandes desafíos:

  1. Tiempo limitado: Disponíamos solo de dos meses para la investigación, diseño y presentación del proyecto.

  2. Presupuesto ajustado: La falta de presupuesto restringió la posibilidad de realizar entrevistas a usuarios y otros estudios de investigación primaria, limitando la recopilación de insights directos sobre necesidades y expectativas del cliente final.

Para superar estas limitaciones, el equipo realizó un análisis de la competencia y definió perfiles de usuarios basados en datos secundarios, asegurando un diseño orientado a la confianza, simplicidad y optimización de tiempo en el proceso de compra.

Objetivos

  1. Transmitir la historia y el valor ecológico del producto: Diseñar una experiencia que comunique de manera visual y accesible la procedencia, autenticidad y sostenibilidad de los productos, generando confianza en los usuarios.

  2. Optimizar la navegación y el proceso de compra: Crear un flujo de navegación claro y un proceso de compra rápido y sin fricciones, ideal para usuarios con poco tiempo que buscan productos de primera necesidad.

  3. Garantizar una interfaz moderna y atractiva: Asegurar que el diseño visual refleje los valores ecológicos y sostenibles del producto, con una interfaz intuitiva y completamente optimizada para dispositivos móviles.

Proceso de diseño

En este proyecto de diseño y desarrollo web, optamos por el método Double Diamond debido a su estructura clara y secuencial, que nos permitió abordar de manera ordenada las fases de exploración y definición del problema.

A diferencia de Design Thinking, que es más fluido e iterativo, el Double Diamond nos brindó un enfoque más controlado, ideal para un proyecto con plazos ajustados y poco margen para testing o iteraciones extensas.

Esta metodología nos permitió enfocarnos rápidamente en la identificación del problema y la entrega de una solución concreta, sin perder de vista la calidad del diseño dentro del tiempo disponible.

Notion

  • Para la organización del proyecto he utilizado distintas funcionalidades de Notion. La gestión de tareas, las tablas de documentación y el calendario y cronograma.

  • Notion ha sido también una herramienta clave para poder documentar todo el proceso y recopilar la información de éste conforme avanzaba el proyecto.

ChatGPT

  • Como en esta ocasión, por limitaciones de tiempo y recursos, no he podido contar con usuarios reales para la fase de UX Research, he usado a ChatGPT para simular las posibles respuestas de los usuarios y hacerme una idea aproximada de cuáles serían sus necesidades, deseos y pain points.

  • Para evitar usar un Lorem Ipsum genérico, he usado textos creados por AI para que el prototipo final se viera más realista.

Miro

  • He usado MIRO para la creación de Empathy Maps ya que ofrece una funcionalidad específica para ello y agiliza en gran medida el proceso de crear y organizar los grupos de ideas.

Figma

  • He usado FigJam para crear los flows del diseño ya que está pensado, en gran parte, especialmente para ello.

  • Siguiendo la recomendación - y también por preferencia - Figma ha sido la herramienta principal para el diseño de este proyecto debido a su navegación extremadamente intuitiva y a sus funcionalidades específicas para este tipo de proyectos.

WooCommerce

  • En este caso la plataforma escogida para la implementación fue Woocommerce, ya que nos brindaba las prestaciones necesarias dentro del presupuesto del cliente.

Estas son las principales herramientas que me han ayudado a desarrollar el proyecto.

Herramientas

OBJETIVO:

Entender las necesidades, motivaciones y expectativas de los usuarios de un ecommerce de productos ecológicos, sin posibilidad de realizar entrevistas reales debido a limitaciones de tiempo y presupuesto.

ACCIONES CLAVE:

  • Entrevistas simuladas con usuarios ficticios (usando ChatGPT)

    • Simulamos entrevistas para recopilar insights y logramos identificar patrones de comportamiento, intereses y frustraciones comunes.

  • Análisis de Competencia

    • Estudiamos ecommerce de productos ecológicos directos e indirectos para identificar sus fortalezas y debilidades

CONCLUSIÓN

Esta fase nos permitió entender el contexto del mercado y las necesidades de nuestros usuarios. Con insights de los user personas y el análisis de la competencia, pudimos avanzar a la siguiente etapa, ya con los primeros wireframes que priorizaron:

  • Navegación intuitiva y simplificada

  • Storytelling visual que refleja la autenticidad del producto

  • Proceso de compra optimizado para usuarios con poco tiempo

INVESTIGACIÓN Y DEFINICIÓN

User Personas

Competitive Audit

Este análisis competitivo muestra las oportunidades existentes para el ecommerce de Debosc: destacarse en la narrativa del origen y valores de los productos, una ventaja que responde bien a las necesidades de los consumidores conscientes y que no estaba tan bien abordada por todos los competidores. La implementación de estrategias de story telling, opciones de pago flexibles y una navegación optimizada nos permitirían ofrecer una experiencia que no solo atraiga, sino que retenga a los usuarios interesados en productos ecológicos auténticos.

PROBLEM STATEMENT

Desafío Principal:
Crear una experiencia de compra que inspire confianza, comunique el valor ecológico del producto y facilite un proceso de compra rápido y eficiente, todo en un plazo de solo 2 meses y con un presupuesto limitado.

Puntos Clave del Problema a Resolver

  • Comunicación de Valor y Procedencia

    • Los usuarios necesitan información clara sobre la procedencia y calidad del producto antes de decidirse a comprar.

    • La historia de la marca debe integrarse de forma accesible y breve, sin sobrecargar la experiencia de compra.

  • Facilidad y Rapidez en la Compra

    • El flujo de compra debe ser rápido y sin fricciones, especialmente importante para usuarios con poco tiempo.

    • Necesitamos un diseño que facilite la navegación, con filtros y categorías claras que ayuden a encontrar productos rápidamente.

  • Interfaz Visual y Optimización Móvil

    • Crear una interfaz atractiva y moderna que refleje los valores ecológicos del producto.

    • Asegurar una experiencia fluida y optimizada para dispositivos móviles, donde muchos usuarios hacen sus compras.

Conclusión de la Definición del Problema

La solución debe enfocarse en combinar narrativa de confianza y facilidad de uso, con un diseño visualmente atractivo que respalde los valores de la marca y que permita realizar compras rápidas y sin complicaciones. Con estos objetivos definidos, estamos listos para avanzar al diseño de wireframes y prototipos.

Wireframes Iniciales

  • Creamos tres versiones de wireframes que exploraban distintas formas de organizar la pantalla de inicio, con el objetivo de combinar la historia del producto y la tienda en una misma experiencia.

  • Cada versión probaba diferentes maneras de priorizar la información sobre el origen y el valor ecológico del producto, sin sacrificar la claridad y simplicidad del flujo de compra.

DISEÑO Y TESTING

Selección de la Mejor Opción

  • Finalmente, elegimos la opción 3, que mostraba una combinación equilibrada de producto e historia en la primera pantalla de inicio.

  • Este diseño permite a los usuarios obtener contexto sobre el valor y origen del producto de inmediato, mientras se les facilita comenzar el proceso de compra sin pasos adicionales.

Esta fase de testing interno nos dio la base para pasar a prototipos de alta fidelidad, asegurándonos de que la interfaz reflejara los valores de la marca y mantuviera una navegación rápida y atractiva.

Elementos UI

  • Paleta de Colores

    • Elegimos tonos tierra y grises suaves que evocan naturaleza, simplicidad y sostenibilidad, alineándose con el compromiso ecológico de la marca. Estos colores transmiten una sensación de calma y confianza, ayudando a crear una experiencia visual acogedora y auténtica.

  • Tipografía

    • Seleccionamos fuentes que combinan un toque tradicional con una apariencia moderna y clara, lo cual inspira confianza y autenticidad. Este estilo tipográfico refuerza la idea de un producto artesanal y de alta calidad, mientras mantiene la legibilidad y sencillez necesarias para una experiencia de compra agradable.

ENTREGA Y FEEDBACK - PROPUESTA FINAL

Dado que no pudimos realizar testing con usuarios reales, aseguramos la usabilidad del ecommerce realizando una revisión exhaustiva basada en los 10 principios heurísticos de usabilidad de Jakob Nielsen. A continuación, se detalla cómo cada principio fue considerado y cumplido en el diseño final.

Los 10 principios heurísticos de la usabilidad

  • El diseño proporciona feedback constante al usuario sobre su progreso en el proceso de compra (ej.: estado del carrito, confirmaciones de acciones). Esto les permite saber siempre en qué paso se encuentran y qué esperar a continuación.

  • Utilizamos términos y categorías de productos que son familiares para el usuario. La paleta de tonos tierra y los iconos inspirados en la naturaleza también refuerzan una conexión directa con los valores ecológicos de la marca.

  • Permitimos que el usuario navegue y corrija errores fácilmente con opciones de “volver” o “editar” en el carrito y el proceso de pago, ofreciendo así flexibilidad para modificar sus elecciones en cualquier momento.

  • Mantenemos un diseño y navegación coherentes en todas las secciones del sitio. Elementos como botones, colores y tipografía siguen un mismo estilo, lo que permite que el usuario anticipe y reconozca los patrones de interacción rápidamente.

  • Reducimos el riesgo de errores mostrando mensajes de confirmación en cada acción importante (por ejemplo, al añadir un producto al carrito). Además, los campos de formularios en el proceso de pago incluyen validaciones automáticas para evitar entradas incorrectas.

  • Diseñamos una navegación clara y accesible, de modo que los usuarios puedan encontrar información y categorías fácilmente, sin tener que recordar pasos previos. Los filtros y el menú de categorías ayudan a que las opciones sean siempre visibles.

  • La interfaz está optimizada para diferentes niveles de usuarios, facilitando tanto la compra rápida para usuarios frecuentes como la exploración para usuarios nuevos que desean conocer más sobre los productos y la historia de la marca.

  • El diseño mantiene una estética limpia y minimalista, sin elementos visuales innecesarios que puedan distraer al usuario. La combinación de tonos tierra y grises asegura una experiencia visualmente agradable y sin sobrecarga cognitiva.

  • Los mensajes de error en el sitio son claros y descriptivos (ej.: “Por favor, verifica tu dirección de envío”), lo que ayuda al usuario a entender y corregir fácilmente cualquier problema sin frustración.

  • Aunque el diseño es intuitivo y no requiere una curva de aprendizaje elevada, incluimos secciones de FAQ y ayuda en puntos clave, como en el carrito de compra y el proceso de pago, para responder preguntas frecuentes sobre envíos, devoluciones y opciones de pago.

Lanzamiento y primeros resultados

El ecommerce fue lanzado recientemente, por lo que aún no contamos con métricas completas de uso. Sin embargo, hemos integrado herramientas clave, como Google Analytics y Hotjar, para recopilar datos iniciales que serán fundamentales para nuestras próximas decisiones de diseño

Estas herramientas nos permitirán evaluar el rendimiento en tiempo real y obtener insights específicos sobre cómo los usuarios interactúan con la plataforma, identificando puntos fuertes y áreas de mejora.

Siguientes pasos

Plan de iteración

  • Durante el primer mes, analizaremos los datos de comportamiento de usuario, incluyendo:

    • Mapas de calor: para ver cómo navegan los usuarios por la página y qué secciones atraen más atención.

    • Flujo de conversión: para identificar posibles fricciones en el proceso de compra.

    • Interacciones con storytelling: para evaluar si la historia de la marca y la procedencia de los productos están generando el interés y la confianza esperados.

  • Basándonos en estos datos, realizaremos ajustes en áreas clave como:

    • Navegación: simplificando rutas o filtros según los hábitos de los usuarios.

    • Proceso de compra: optimizando pasos que puedan estar generando fricciones.

    • Storytelling: reforzando o redistribuyendo elementos narrativos si observamos poca interacción con estas secciones.

Reflexión sobre el proyecto

  • Aplicar el enfoque del Double Diamond nos permitió estructurar el proceso de diseño en etapas claras y mantener el foco en el usuario, incluso sin acceso a entrevistas reales. En ecommerce, el diseño es un proceso continuo que debe adaptarse a los cambios en los comportamientos y preferencias del usuario.

  • Las iteraciones futuras, basadas en datos reales, asegurarán que el sitio evolucione de acuerdo con las necesidades y expectativas del usuario, ofreciendo una experiencia de compra cada vez más fluida y personalizada.