Wonderfud: sitio B2B bilingüe en WordPress con animación · Caso de estudio
B2B · Sitio bilingüe en WordPress · Sep – Oct 2026
Wonderfud conecta ingredientes y productos de bienestar peruanos con marcas de otros mercados. Llevé su diseño a un sitio bilingüe que su equipo edita solo, con un movimiento propio que hace memorable la marca.
De un prototipo en Figma a un sitio en WordPress administrable de punta a punta, en dos semanas y con dos rondas de revisión con el cliente.
El punto de partida: Un prototipo visual con mucha personalidad.
Wonderfud llegó con pantallas en Figma: la portada en escritorio y móvil y algunas páginas internas. El reto era convertirlas en un sitio real, bilingüe y editable, sin perder la energía del diseño, y definir lo que el prototipo no decía: las pantallas que faltaban, el comportamiento en móvil y el movimiento.
Lo que acordamos construir
- Fiel al diseño Cada página tal como se aprobó, en cualquier ancho de pantalla.
- Editable sin riesgo El equipo cambia textos, fotos y productos sin poder romper el diseño.
- Dos idiomas Inglés para compradores de afuera y español para el mercado local.
El sistema: Del prototipo a un sistema de diseño.
Ordené el Figma en componentes y tokens: una paleta de marca, una escala tipográfica y un ancho fluido, de modo que cada página nueva sale del mismo sistema.
La versión móvil es una capa propia, no una reducción: espaciado, tipografía, imágenes y menú pensados para el teléfono.
El movimiento: Una marca que se mueve como habla.
El prototipo no definía movimiento, así que propuse un lenguaje propio con cuatro gestos de marca. El más visible: la W de la portada se pinta como una pincelada al cargar.
- Ligado al scroll Las secciones se apilan y se revelan al ritmo de la lectura.
- Una coreografía por pantalla Escritorio y móvil tienen su propio recorrido.
- Respetuoso Si el visitante pide reducir el movimiento, el sitio lo respeta; y se puede apagar desde el panel.
El panel: Todo editable, nada que se pueda romper.
- Qué vimos: El equipo necesitaba actualizar el sitio sin un desarrollador. Qué hice: Cada página con sus campos propios y un interruptor para mostrar u ocultar cada sección. (10 — grupos de contenido editables)
- Qué vimos: Cada insumo tenía que poder compartirse con un comprador. Qué hice: Suplementos y materias primas como catálogo, con su propia URL, galería, atributos y relacionados. (1 URL — por producto)
- Qué vimos: Los compradores llegan de varios mercados. Qué hice: Sitio en inglés y español, con contenido propio en cada idioma y no solo traducción. (2 — idiomas desde un solo panel)
Cada cambio pasa por revisión automática y llega primero a QA; las migraciones de contenido se aplican solas, con copia de seguridad previa.
Tecnologías: Con lo que construí el sitio.
- CMS: WordPress, ACF, WPML
- Frontend: HTML, CSS, JavaScript, GSAP
- Entrega: Docker, GitHub Actions, Redis, Cloudflare
- Diseño: Figma
El resultado: Un sitio bilingüe, fiel al diseño, que el equipo de Wonderfud edita sin miedo a romperlo.
- 2 — idiomas con contenido propio
- 17 — páginas y fichas de producto
- 10 — grupos de contenido editables
- 2 — semanas, con dos rondas de revisión