Honk — Una app de mensajería que muestra la sensación antes que la lista de funciones
Honk es una app de mensajería en tiempo real donde se ve cada tecla mientras la otra persona escribe. El sitio tenía que transmitir esa sensación a quien nunca la usó, en los segundos previos a decidir si la instala.
El reto
La mensajería en tiempo real es difícil de explicar en una frase e imposible de demostrar con la captura de una pantalla de ajustes. El atractivo del producto es movimiento: vive en el momento en que un mensaje aparece letra por letra, y una página estática arranca en desventaja.
El enfoque
Pusimos las pantallas de la app en el centro de la composición, a tamaño de teléfono, rodeadas de los elementos que los usuarios reconocen: burbujas de mensaje, reacciones, el juego dentro de la app. El titular enuncia la promesa en cinco palabras, la línea de apoyo la matiza y todo lo demás de la primera pantalla es producto.
Mostrar el producto en lugar de describirlo
La portada se arma alrededor de un marco del tamaño de un teléfono con la interfaz real, y las burbujas de chat y los stickers de reacción se salen de él hacia el fondo de la página. El efecto se parece más a una demo sostenida frente a la cámara que a una ilustración de marketing.
El texto es deliberadamente escaso: cinco palabras en el titular, una línea que lo matiza y, a partir de ahí, explica el producto.
Una paleta que hace trabajo estructural
El sitio funciona sobre un azul saturado con acentos amarillos y verdes tomados de la propia interfaz de la app. Como la superficie de marketing y el producto comparten paleta, las pantallas incrustadas se leen como parte de la página y no como algo pegado encima.
Eso también permite que la barra de anuncios y los enlaces secundarios se distingan sin bordes ni cajas: el color solo ya los separa.
Anuncios que no rompen la página
Las novedades del producto necesitaban un lugar que no obligara a rediseñar cada vez. Un anuncio con forma de píldora vive dentro de la composición de la portada, no como una franja encima, así que se lee como parte del diseño y se puede editar o quitar sin dejar un hueco.
Desarrollo
El sitio de marketing es una aplicación Next.js servida a través de Cloudflare. Las pantallas de la interfaz son lo más pesado de la página, así que se sirven en el tamaño adecuado para cada pantalla en lugar de enviarse en una sola resolución y reducirse en el navegador.
Qué entregamos
- Portada construida alrededor de pantallas reales de la interfaz, a tamaño de teléfono
- Sistema de color compartido entre la app y el sitio de marketing
- Un espacio de anuncios dentro de la composición, editable sin rediseñar nada
- Build en Next.js servido a través de Cloudflare
Preguntas frecuentes
Mostrando la interfaz en vez de describir el mecanismo. La página se arma alrededor de las pantallas de la app a tamaño de teléfono, con las partes reconocibles —burbujas, reacciones, el juego— saliéndose hacia el fondo.
Porque el producto se explica solo más rápido que un párrafo. El titular enuncia la promesa, una línea la matiza y el resto del espacio es para la interfaz.
Con Next.js y React, servido a través de Cloudflare.
Por dentro del sitio
«El desafío era mostrar qué hace diferente a Honk sin explicarlo durante cinco minutos. Sakura puso el producto en el centro del sitio y fue exactamente la decisión correcta.»