nextCaso de estudio 03
Proyecto propio
NextMail
Email marketing · Producto del estudio
Nuestro propio producto, y por eso el caso más útil: aquí se ve cómo montamos una landing de conversión completa cuando no hay que negociar nada con nadie.
Visitar sitio
- Servicios
- Posicionamiento · Marca · Diseño · Desarrollo
- Construido con
- Vite · React · Tailwind · Radix
- Estado
- En producción · EN
Contexto
Un caso sin cliente al otro lado.
NextMail no es un encargo: es un producto del estudio. Lo decimos aquí porque cambia cómo hay que leer el caso — no hay un briefing que interpretar ni una marca previa que respetar, así que todas las decisiones son nuestras y todas son discutibles.
Y por eso mismo sirve de prueba distinta a las otras dos. Ohana y Yussi enseñan ejecución sobre el negocio de otro. NextMail enseña la parte que normalmente no se ve: cómo ordenamos una oferta, en qué orden la contamos y dónde ponemos cada botón cuando el único objetivo de la página es que alguien deje su correo.
Nota sobre las cifras: la landing de NextMail incluye porcentajes, ROI y fichas de resultados. Son afirmaciones comerciales del propio producto, no métricas medidas por Next Site. En este caso aparecen como piezas de la arquitectura de conversión, nunca como prueba de rendimiento.
Posicionamiento
Primero la categoría, después el servicio.
La página no se presenta como “agencia de email marketing”. Se presenta como infraestructura de ingresos, y el titular lo dice sin rodeos: convertir el correo en el canal más rentable. La categoría se elige antes que el catálogo, porque es lo que decide contra quién te comparan.
-
Un titular que nombra el resultado
“We turn email into your most profitable channel.” Sujeto, verbo y resultado. Sin adjetivos de agencia y sin la palabra “soluciones”.
-
La oferta va en el subtítulo, no escondida
El modelo comercial —no pagas hasta que haya mejora medible— aparece bajo el titular, no en una página de precios. Es el argumento que quita el riesgo, así que va donde se lee.
-
Tres datos y ni uno más
Bajo el hero, tres cifras en tira: rango de mejora, plazo y coste inicial. Es el resumen de la oferta antes del primer scroll.
-
Quién no es el cliente también está dicho
Una sección entera separa infoproductores de e-commerce. Calificar temprano evita conversaciones que no van a ningún lado.
Arquitectura de conversión
Nueve capítulos numerados, un solo objetivo.
La página se recorre como un documento: cada bloque lleva su número y su etiqueta en monoespaciada, de 01 a 09. No es decoración — es lo que deja saber dónde estás en un argumento largo, y lo que nos obligó a justificar la existencia de cada sección.
-
Problema
Cuatro fugas de ingreso concretas. El lector se reconoce antes de que se le venda nada.
- Oportunidad Por qué el canal importa. Se argumenta la categoría, todavía sin producto.
-
Qué se construye
Tres sistemas nombrados —campañas, flujos, optimización— para que el servicio sea imaginable.
-
Proceso
Tres fases: diagnosticar, instalar, componer. Responde “¿qué pasa si digo que sí?”.
- Corte de conversión A mitad de página, una llamada a la acción a pantalla completa para quien ya está convencido.
- Encaje Dos perfiles de negocio, uno al lado del otro. El lector se autoclasifica.
- Prueba Telemetría, fichas de caso y marcador de métricas: el bloque donde el producto expone sus propias cifras.
-
Objeciones
Garantía y seis preguntas directas. Cada una desactiva una razón para no escribir.
-
Cierre
El último bloque es la misma acción del principio, sin alternativas compitiendo por el clic.
Jerarquía de acción
Una acción principal, repetida sin variar.
Cinco puntos de entrada al mismo destino: la barra de navegación, el hero, el corte de mitad de página, la barra pegajosa que aparece al pasar el hero y el cierre. Todos dicen lo mismo —“Get free revenue audit”— con el mismo relleno cian. La única acción secundaria vive en el hero y es de contorno, no de relleno.
Dirección visual
Terminal, no folleto.
Casi negro con un solo cian
Un fondo de #04090e y un único acento cian que solo aparece en dos sitios: los números de capítulo y el botón principal. Cuando el color se reserva, el botón no necesita crecer para que se vea.
Display estrecho contra monoespaciada
Titulares en Clash Display muy apretados frente a etiquetas en JetBrains Mono con tracking abierto. El contraste entre las dos hace el trabajo que en otras landings hacen las ilustraciones.
Todo dato se etiqueta como dato
KPI.01, SYS.02, FILE 03, PHASE 01. La nomenclatura sostiene la promesa de la categoría —infraestructura— mejor que cualquier adjetivo.
Nada de fotografía
No hay retratos de equipo ni fotos de portátiles. La página se compone solo con tipografía, filetes y tarjetas: es el material que un producto de software puede enseñar con verdad.
Móvil
La versión corta es otra página.
En móvil la landing no se apila: se recorta. La construcción de escritorio mide unos 13.700 px de alto; la de móvil, unos 6.500 — cinco capítulos en vez de nueve, con el cierre de conversión llegando a poco más de la mitad del recorrido. La decisión asume que quien lee en el teléfono no va a atravesar nueve capítulos, y prefiere darle la acción antes que el argumento completo.
Construcción
Cómo está hecho.
React sobre Vite con Tailwind, primitivos de Radix para el acordeón de preguntas y Calendly para agendar. Una sola página, en inglés, sin CMS: el copy es parte del código porque la página se itera como producto, no como contenido.
-
Vite + React
Una landing, un bundle.
-
Tailwind
Sistema de espaciado y color en utilidades.
-
Radix
Acordeón accesible sin reescribir el patrón.
-
Calendly
La reserva ocurre sin salir de la página.
Resultado
Una landing donde cada bloque tiene que justificar por qué retrasa el formulario.
No publicamos resultados de campaña, ingresos atribuidos ni métricas de correo: no nos corresponden y no las hemos medido. Lo que este caso demuestra es lo otro — que el estudio puede elegir una categoría, ordenar una oferta en nueve movimientos, sostener una sola llamada a la acción de principio a fin y decidir qué se cae en móvil.
Visitar sitio