Gomilovers Web — de diseño a producción

01 · Investigación — 7 tiendas reales auditadas en vivo

Cada decisión de estructura sale de lo que hacen las mejores tiendas de gomitas funcionales del mundo y de la región — no de gustos. Auditamos home, colecciones y páginas de producto de cada una (07-07-2026). Detalle completo en investigacion.md.

Patrones que adoptamos (14)

1. Entrada Para Ella / Para Él, persona primero (Ritual) — con ventaja nuestra: son productos pareja → cross-sell recíproco.
2. Tagline de beneficio en toda card (OLLY) — nunca nombre+precio solos.
3. Packs con ancla tachada (Goli/Lemme/Gummy Life) — el patrón más repetido del rubro.
4. Pack cruzado día+noche con nombre (Yumi Gumi) — "Pack 24/7" y "Pack Pareja".
5. "60 gomitas = 30 días" (Gummy Life) — convierte S/99 en "S/3.30 al día".
6. Colección como mundo del beneficio (OLLY) — clave con 1-2 productos por colección.
7. "Lo que NO contiene" + sellos como badges (Goli/Lemme/SugarBear).
8. Claims con verbos de soporte + dosis (Lemme/Ritual) — "ayuda a…", nunca curas; resuelve lo legal.
9. FAQ dentro de la página de producto (Yumi Gumi/Gummy Life).
10. Garantía explícita con número grande (Goli/SugarBear/Gummy Life) — decisión D7.
11. WhatsApp visible + Libro de Reclamaciones con badge (Yumi Gumi) — higiene Perú.
12. Barra de anuncio persistente con el delivery gratis (todas).
13. Escalera de volumen en el menú (SugarBear "Buy More & Save") — nuestra colección Promociones.
14. Regalo-muestra cross-producto (SugarBear) — decisión D8 (requiere sachets).

Qué descartamos (por ahora)

• Suscripción en el lanzamiento — ninguna peruana la tiene; primero validar recompra vía email (queda como D5/fase 2).
• Quiz de recomendación — con 4 productos la navegación directa es más corta.
• Loyalty/puntos — prematuro para el volumen actual.
• Landings funnel fuera del catálogo (Goli) — rompe feeds de Meta/Google; nuestra PDP larga logra lo mismo.

02 · Arquitectura — qué se construye

El documento maestro: cada URL con su plantilla, cada bloque clasificado por costo de implementación. Detalle completo en arquitectura.md.

NATIVO incluido en el build · METAFIELD editable por ustedes sin código · APP app con posible fee mensual · CUSTOM desarrollo a medida

Sitemap

gomilovers.com
├── /                                      HOME
├── /products/gomi-balance                 PDP · verde  · Activa tu metabolismo
├── /products/gomi-dreams                  PDP · morado · Descanso y relajación
├── /products/gomi-energy-para-ella        PDP · rojo   · ★ winner
├── /products/gomi-energy-para-el          PDP · azul   · ★ winner
├── /collections/…                         4 colecciones por beneficio + Promociones
├── /blogs/bienestar (+artículos)          educación → cada artículo vende su producto
├── /pages/nosotros · faq · contacto       institucional
├── /pages/libro-de-reclamaciones          legal Perú (INDECOPI)
├── /policies/*                            políticas nativas
├── carrito (drawer) → checkout nativo     Izipay: tarjetas + Yape/Plin
└── /account · /search · 404               sistema

La página de producto (la plantilla que más vende)

• Galería sobre el gradiente de su línea + buy box con "60 gomitas = 30 días".
• Upsell de cantidad x1 / x2 / x3 con ancla tachada.
• ★ Cross-sell "Combínalo con": en Ella → Él (y viceversa, SIEMPRE recíproco); en Balance/Dreams → winner afín + entre sí. Editable por ustedes sin tocar código.
• Ingredientes con dosis + claims cuidados · FAQ del producto · reviews · educativo del beneficio.

Integraciones — riesgos declarados por escrito

Preparado para crecer

Los 4 productos futuros no se diseñan ahora, pero la estructura los absorbe: lanzar uno nuevo = cargar el producto + llenar sus metafields (beneficio, color de línea, cross-sell, FAQ). Cero código.

03 · Flujogramas — cómo se navega

Los 3 recorridos que definen el negocio (+ postventa). Fuente: flujograma.md.

Compra estándar

flowchart LR
    A["Home"] -->|"card"| B["Página de producto"]
    B -->|"pack x1/x2/x3"| C["Carrito drawer
progreso + cross-sell"]
    C --> D["Checkout Shopify
Izipay: tarjeta / Yape / Plin"]
    D --> E["Confirmación + email"]

★ Winners: Para Ella / Para Él con cross-sell recíproco

flowchart TD
    H["Home: sección dual
PARA ELLA rojo · PARA ÉL azul"] -->|"clic"| PE["PDP Para Ella"]
    H -->|"clic"| PL["PDP Para Él"]
    PE -->|"Combínalo con"| PL
    PL -->|"Combínalo con"| PE
    PE -->|"Pack Pareja"| C["Carrito con 2 ítems"]
    PL -->|"Pack Pareja"| C
    C --> K["Checkout"]
    ADS["Meta Ads
ángulo Ella / ángulo Él"] -.-> PE
    ADS -.-> PL

Entrada por beneficio (pauta / orgánico)

flowchart LR
    ADS["Meta Ads"] --> PLP["Colección del beneficio
hero + educativo"]
    SEO["Google"] --> ART["Artículo del blog"]
    ART -->|"CTA"| PDP["Página de producto"]
    PLP --> PDP
    PDP --> CART["Carrito"]

Postventa / soporte

flowchart LR
    C["Cliente"] --> FAQ["FAQ"]
    FAQ -->|"no resuelve"| WA["WhatsApp"]
    C --> WA
    C -->|"reclamo legal"| LR["Libro de Reclamaciones
correlativo + copia email"]

04 · Solicitud de información — todo en una sola lista

Para no frenar el cronograma con pedidos sueltos: 33 ítems organizados por categoría. 🔴 bloqueante (sin esto no hay lanzamiento) · 🟡 ideal para lanzar · 🟢 fase 2. Pedimos además un interlocutor por categoría y un kickoff de materiales de una sesión. Versión completa: solicitud-informacion.md.

05 · Wireframes — la estructura de cada página

Cajas grises con etiquetas, a propósito sin diseño: aquí se opina de estructura (qué va, en qué orden), no de estética. 13 plantillas; cada bloque indica su costo de implementación. El diseño real usa el design system ya validado.

Abrir wireframes en pestaña completa ↗

Design System v1.1.3 — ya validado con tu feedback

El sistema visual que vestirá estos wireframes. Incorpora todas tus correcciones: gradientes de 2-3 tonos de una misma línea (sin acercarse al blanco), categorías por beneficio, frutas como recurso secundario, corazón solo en el logo, manuscritas fuera de la web, y el color por producto: verde Balance · morado Dreams · rojo Para Ella · azul Para Él.

Documentación del design system ↗ Tienda demo interactiva ↗

Cronograma: la tienda al aire el 20 de agosto

Tres sprints y 13 días hábiles, con dos entregas por semana (avance el martes, cierre el viernes). La estructura ya está cerrada (fases 1 a 5, wireframes aprobados), así que el diseño en Figma y el desarrollo del theme corren en paralelo desde hoy: el Figma va unos días adelante y cada plantilla pasa a código apenas queda aprobada.

Sprint a sprint

Cómo funciona el ritmo

• Dos entregas por semana: avance el martes y cierre el viernes. En un cronograma de tres semanas, esperar al viernes para ver algo es demasiado tarde.
• El Figma va unos días adelante del código: se programa únicamente lo aprobado, y una plantilla aprobada se congela.
• El feedback entra en bloque en la siguiente entrega: así no se interrumpe lo que ya está en código y la fecha no se mueve sola.
• Se maqueta con placeholders desde el día 1: el contenido real reemplaza los placeholders en el sprint 2, sin frenar el desarrollo.

Qué queda para después del lanzamiento

Lanzar el 20 de agosto se paga recortando alcance, no calidad. Estas piezas entran en un segundo pase de setiembre, sin bloquear la tienda:

• Los 4 artículos del blog: la plantilla se entrega funcionando, los artículos se cargan después.
• App de reviews (decisión D3): la tienda sale sin reseñas y la app se instala cuando esté definida.
• Sachets de regalo (D8) y suscripción (D5): ya estaban en fase 2, ahí siguen.
• Pase de pulido: microinteracciones, optimización fina de velocidad y los primeros ajustes que muestre el comportamiento real de los usuarios.