Marea

https://mareashop.com

Diseño de una experiencia de e-commerce guiada y desarrollo de un recomendador de productos personalizado.

1. Resumen del Proyecto

Marea es un concepto de e-commerce centrado en inciensos y productos de aromaterapia. A diferencia de una tienda estándar, el objetivo era crear una experiencia de compra personal y guiada, reconociendo que la aromaterapia es una elección muy subjetiva y, a menudo, abrumadora para los nuevos usuarios.

Realicé el ciclo completo del proyecto: desde la estrategia de UX y el diseño de la interfaz (UI) hasta el desarrollo completo en WordPress, incluyendo la implementación de la función central: un quiz interactivo para recomendar kits personalizados.

• Mi Rol: UX/UI Designer & Desarrollador WordPress.
• El Desafío: Traducir una compra basada en “sensaciones” y “estados de ánimo” en un flujo digital intuitivo que genere confianza y conduzca a la conversión.
• La Solución: Un “Recomendador de Kits” en forma de quiz, que guía al usuario a través de preguntas visuales y conceptuales para encontrar su producto ideal.
• Herramientas: Figma, WordPress, Plugin de Quizzes/Formularios (ej. Gravity Forms, Quiz Maker).

Nota sobre el Proyecto: El diseño y desarrollo se completaron al 100%. Sin embargo, el cliente decidió pausar indefinidamente el proyecto antes del lanzamiento público y de la fase de pruebas de usabilidad programada.

2. El Desafío: La Paradoja de la Elección

El mercado de la aromaterapia está saturado. Para un usuario nuevo, la diferencia entre “sándalo”, “lavanda” y “palo santo” es abstracta. Una cuadrícula de productos estándar (típica de WooCommerce) no lograría conectar con el usuario ni ayudarlo a elegir.

El desafío central era:“¿Cómo podemos replicar la experiencia de un asistente de tienda experto que te “lee” y te guía al producto perfecto para tu estado de ánimo, pero en un formato digital?”

Fase 2: Definir (El Problema Central)

Con los insights de la fase de empatía, sinteticé el problema en una declaración clara:

Un usuario interesado en el autoconocimiento necesita una forma rápida y confiable de obtener una guía diaria de tarot, porque los sitios actuales son abrumadores y se sienten impersonales o poco fiables.

Fase 3: Idear (Lluvia de Soluciones)

En esta fase, me centré en generar ideas para la estructura y las funciones clave.

• Arquitectura de la Información (IA): Creé un mapa del sitio simple y lógico (Inicio, Sobre Mí, Blog, Carta del Día, Contacto) para facilitar la navegación.
• User Flows: Mapeé el “camino feliz” del usuario, especialmente para la función principal: “La Carta del Día”.

Fase 4: Prototipar (De la Idea a Figma)

Aquí es donde la visión comenzó a tomar forma visual.

• Wireframes de Baja Fidelidad (Low-Fi): Creé bocetos rápidos en papel y luego en digital (Balsamiq o Figma) para establecer la jerarquía y la disposición de los elementos en móvil y escritorio.

• Wireframes de Alta Fidelidad (Hi-Fi) y Componentes: Utilicé Figma para construir el diseño final. Creé una paleta de colores que inspirara calma, tipografía legible y un sistema de componentes reutilizables (botones, tarjetas, formularios) para garantizar la consistencia visual y agilizar el diseño.

Fase 5: Probar (Validación con Usuarios)

Probé el prototipo interactivo de Figma con usuarios reales.

• Pruebas de Usabilidad: Asigné tareas a 2 usuarios, como “Encuentra la carta del día y obtén tu lectura” o “Descubre cómo contactar al autor”.
• Feedback Recibido: Las pruebas revelaron que los usuarios encontraban la función “Carta del Día” atractiva, pero el botón para “revelar” la carta no era lo suficientemente obvio.
• Iteración: Ajusté el diseño del botón (CTA) basándome en los comentarios para hacerlo más claro e intuitivo, mejorando la tasa de éxito de la tarea.

Desarrollo e Implementación

Una vez validado el diseño, pasé a la fase de construcción.

Desarrollo en WordPress:

Elegí WordPress como CMS por su flexibilidad y, crucialmente, para permitir al cliente (o a mí mismo) actualizar fácilmente el contenido del blog, una pieza clave de la estrategia SEO. Desarrollé un tema personalizado que replicaba perfectamente los diseños de Figma, asegurando que fuera 100% responsivo.

La “Carta del Día” (Backend con Java)

Para la función interactiva “Carta del Día”, se requería una lógica de backend que seleccionara una carta al azar de los 78 Arcanos del Tarot y devolviera su descripción correspondiente. Utilicé Java para esta lógica del lado del servidor.

El sistema funciona así: el frontend (WordPress/JavaScript) realiza una llamada a un endpoint que ejecuta el código Java. Este código selecciona aleatoriamente una carta y devuelve un objeto JSON con el nombre de la carta, la imagen y su descripción.

Ejemplo del Código Java (Lógica de Selección Aleatoria):

Este es un ejemplo simplificado en Java que muestra cómo se estructura la lógica para seleccionar una carta aleatoria y su descripción asociada:

5. Optimización SEO: El Resultado Clave

El diseño y el desarrollo fueron solo la mitad de la batalla. El éxito del proyecto dependía de que los usuarios pudieran encontrar el sitio.

• Investigación de Keywords: Identifiqué palabras clave de “cola larga” (long-tail) y alta intención, como “lectura de tarot “ y el propio nombre de la marca.
• SEO On-Page: Optimicé cada página y entrada de blog: meta-títulos, meta-descripciones, etiquetas H1/H2, y optimización de imágenes (texto alternativo y compresión).
• Estrategia de Contenido: El blog se diseñó para responder preguntas específicas que los usuarios buscan en Google, estableciendo la autoridad del sitio.
• SEO Técnico: Aseguré tiempos de carga rápidos (optimización de caché en WordPress), un diseño responsivo y un mapa del sitio.

El Resultado: Gracias a esta estrategia integral (UX + SEO), el sitio web alcanzó la posición #1 en Google para el término de búsqueda principal “Magia del Interior” en los primeros tres meses tras el lanzamiento.

6. Conclusiones y Aprendizajes

El mayor aprendizaje fue ver cómo una buena UX impacta directamente en el SEO; un sitio fácil de usar reduce la tasa de rebote, aumenta el tiempo en la página y envía señales positivas a Google, creando un círculo virtuoso de crecimiento.