Volver al blog

Renovamos la landing de woku: el día que el CSS nos ganó (y lo aceptamos)

Diego Orrego
Diego Orrego
17 de diciembre de 20254 min lectura
Renovamos la landing de woku: el día que el CSS nos ganó (y lo aceptamos)

Renovamos la landing de woku: migramos de Webflow a Next.js + Tailwind, sumamos Ghost y Mintlify, y usamos IA para acelerar diseño y copy. Lo que aprendimos y por qué ahora el sitio cuenta mejor nuestro impacto en educación y eventos.

No escribíamos por acá desde principios de año, pero no fue “silencio”: fue iteración.

Lo que cambió en woku en estos meses

En 2025 nos concentramos en una cosa: entender dónde woku realmente mueve la aguja.

Sin alargarlo (habrá post para eso), el patrón fue claro:

  • Donde más reseñas capturamos hoy: educación y eventos.
  • En algunos casos vimos hasta ~80% de tasa de respuesta.
  • Esa riqueza de datos hace que equipos tomen decisiones más rápido y con más confianza.

Y cuando tus clientes renuevan anual, la pregunta es simple:
¿la landing está contando esto… o está contando “un producto genérico”?

Hero renovado de woku

Webflow nos dio velocidad… hasta que dejó de dárnosla

Webflow fue una excelente decisión en 2023 e inicios de 2024. En ese momento:

  • Necesitábamos iterar rápido.
  • No queríamos meterle horas de desarrollo a cada cambio de copy/section.
  • El “no-code” nos compró foco.

El problema es que el tiempo pasa, el sitio crece y la fricción se acumula.

Lo que empezó a doler de verdad (más que nada a Paula que ella lo gestionaba):

  • CSS que se volvía una pesadilla: arreglabas un margen y explotaba una dimensión en otro breakpoint.
  • Cambios chicos que terminaban en “no lo toquemos porque se rompe”.
  • Performance y edición que se sentía lenta para el ritmo que queríamos.

Mientras tanto, el mercado de GenAI sacó herramientas nuevas y mejores (Lovable, Cursor, Claude Code, etc.). Y nos empezó a hacer ruido seguir “peleando” con el editor, cuando podíamos volver a lo que conocemos bien: código + buen tooling.

La decisión: volver a Next.js... La vieja confiable

Tomamos una decisión muy poco romántica: mover la landing a Next.js + Tailwind CSS.

No por moda. Por control.

  • Next.js: para tener estructura, performance y SEO en serio.
  • Tailwind: para iterar UI sin que “la hoja de estilos” se convierta en un campo minado.
  • Cursor: para construir más rápido (incluyendo flujos donde el modelo abre el navegador, mira screenshots y te ayuda a cerrar detalles de estilo).
  • Agentes en paralelo: si te organizas bien, te acelera. Si no, te genera caos. (No hay punto medio.)
El enfoque visual del nuevo hero

El sitio tenía que contar una historia, no una lista de features

Un error común en landings B2B: “tenemos esto, esto y esto”.

Nosotros queríamos otra cosa:

  • Partir por el problema real: encuestas que nadie responde.
  • Mostrar el contraste: feedback simple, análisis profundo.
  • Dejar claro el uso: educación y eventos, sin esconderlo.
Sección sobre el problema de las encuestas

Nuestro stack 2025 para movernos rápido

Elegimos herramientas con un criterio: que nos ahorren tiempo en tareas críticas, no que se vean bien en un tweet.

Sitio

  • Next.js + Tailwind CSS: base y velocidad para iteración.
  • Figma: diseño y sistema visual.
  • Fotos: librería de Canva (rápido, consistente, sin sobrepensar).

Contenido y documentación

  • Ghost: blog y casos de éxito.
  • Mintlify: documentación.

Copys y research

  • ChatGPT, Gemini y Perplexity: cada uno aporta distinto.
  • Modo “investigación profunda” cuando era necesario, y cuando no: prompt corto y directo.

Gestión del proyecto

  • Notion: tareas, checklists, migración, decisiones. Antes odiaba Notion, pero ahora con el chat con IA y el calendar me convence.
Bloques que priorizan “mostrar” sobre “prometer”

Inspiración en grandes

Nos fijamos en landings que hacen bien lo básico: claridad, visual, y navegación sin fricción.

  • Canva
  • GitHub
  • Figma
  • Notion
  • Shopify

No para clonarlas (igual si puedes copiar, para qué reinventar la rueda). Para responder:
¿Qué se entiende en 5 segundos? ¿Qué se entiende en 30?

El elefante en la habitación: migrar más de 100 posts

Sí: el blog era un dolor logístico. Migrar +100 posts no es “export/import y listo”.

Lo que nos ayudó:

  • Definir un estándar mínimo (slugs, títulos, extractos, imágenes, categorías).
  • Automatizar lo automatizable.
  • Y aceptar que “perfecto” era enemigo de “publicado”.

Ese es el tipo de tarea donde elegir bien herramientas te ahorra semanas.

Volvimos a atacar el problema original: encuestas largas

woku es, técnicamente, una encuesta. Pero en la práctica es otra cosa:

  • Una pregunta simple que se representa en una imagen.
  • Un input sin fricción (texto o audio).
  • Reportes accionables en un clic.

En la nueva web quisimos que eso se sintiera:

  • Menos texto.
  • Más producto en pantalla.
  • Más “así se ve”, menos “así suena”.
Formulario/CTA para empezar a medir

Educación y eventos dejaron de ser un “caso más”

No los escondimos en un menú. Los convertimos en el centro.

Porque si un prospecto entra por educación, quiere ver educación.
Y si entra por eventos, quiere ver eventos.

No quiere “una solución horizontal para todo el mundo”.

Ejemplo de caso de uso en universidades

Lo mejor de renovar una web no es la web

Lo mejor es el efecto colateral: te obliga a responder preguntas incómodas.

  • ¿Qué vendemos, exactamente?
  • ¿A quién le sirve hoy (no en la teoría)?
  • ¿Qué parte del producto es la que genera el “ah, ok”?

Es bacán ver el trabajo con Paula tomar forma en algo que se entiende rápido.
Y más genial cuando eso se traduce en clientes tomando mejores decisiones sobre su experiencia.

¿Qué sigue?

Lo próximo es escribir sobre lo que dejamos mencionado arriba, con calma y con datos:

  • Qué aprendimos capturando feedback en educación y eventos.
  • Qué patrones vemos en los datos (sin “IA mágica”).
  • Qué estamos construyendo para que el análisis sea aún más accionable.

Mientras tanto, si quieres ver la landing y darnos feedback (irónico, lo sé):
woku.app.