Victoria de La Fuente

Diseño y desarrollo de una plataforma espiritual con enfoque en la experiencia de usuario y optimización SEO.

1. Resumen del Proyecto

Magia del Interior es una plataforma digital dedicada al tarot y al bienestar espiritual. El desafío era diseñar y construir un sitio web desde cero que no solo fuera estéticamente agradable y fácil de usar, sino que también generara confianza y se posicionara orgánicamente en los motores de búsqueda.

Utilizando la metodología de Design Thinking, realicé un proceso completo que abarcó desde la investigación inicial hasta el desarrollo en WordPress y la implementación de una función interactiva con Java.

• Mi Rol: UX/UI Designer y Desarrolladora WordPress.
• Metodología: Design Thinking (Empatizar, Definir, Idear, Prototipar, Probar).
• Herramientas: Figma, WordPress, Java y Google Analytics.

2. El Proceso de Design Thinking

Seguí las 5 etapas del Design Thinking para asegurar que las decisiones de diseño estuvieran centradas en el usuario final.

Fase 1: Empatizar (Entendiendo al Usuario)

Para entender las necesidades y frustraciones de los usuarios interesados en el tarot, utilicé algunos métodos de investigación:

• Análisis Competitivo: Revisé otros sitios de tarot, identificando puntos débiles (exceso de anuncios, navegación confusa) y oportunidades (diseño limpio, contenido de valor).
• User Personas: Creé dos arquetipos de usuario basados en la investigación.

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.