Ejemplos de Diseño Web SaaS: el Caso Pressmerit

Este proyecto es uno de nuestros ejemplos de diseño web SaaS: Pressmerit, una plataforma de PR digital y colaboraciones dedicada al link building. El software lee tu sitio, busca en la web abierta editores a los que merece la pena escribir, puntúa cada candidato, encuentra un contacto verificado y redacta el pitch. El envío lo haces desde tu propio correo. Cuando el enlace se publica, la plataforma lo verifica y lo vuelve a comprobar cada 30 días.

Nos ocupamos del sitio de marketing de principio a fin: posicionamiento, arquitectura de información, sistema visual, los fragmentos de interfaz que aparecen en todas las páginas, los textos y la capa de SEO técnico. Trece páginas, un idioma, construidas con Next.js y desplegadas en Vercel.

El briefing traía una restricción dura. El link building es una categoría donde los compradores ya se han quemado, así que el sitio no podía vender como suele venderse aquí. Cada afirmación tenía que llegar con su prueba, y cada precio tenía que estar en la página antes de que alguien se registrara. La versión general de este argumento está en nuestra guía sobre diseño web para startups.

Tres problemas llegaron juntos.

El producto es un flujo, no una función. Analizar, descubrir, redactar, enviar, verificar. Explicarlo como una lista de funcionalidades habría perdido el punto: la plataforma hace el trabajo pesado y se detiene en las dos decisiones que debería tomar una persona.

No había capturas que usar. El producto estaba antes del lanzamiento, y los datos reales de clientes tampoco se ponen en una página de marketing. Los mockups genéricos de dashboard habrían parecido exactamente lo que son.

Y el sitio tenía dos públicos que nunca se solapan. Compradores de SEO evaluando una suscripción de 49 $, y editores que recibieron un correo de outreach y quieren saber quién les escribe antes de responder. Atender solo al primero habría dañado la reputación del producto ante el segundo, un daño que aparece meses después en las tasas de respuesta.

Consulta nuestros planes de precios para ver cómo dimensionamos proyectos así.

El flujo marcó la estructura. La home recorre los cinco pasos que van del dominio al enlace verificado en vivo y señala los dos en los que actúa el usuario. Una página larga amplía ese mismo flujo a ocho etapas, con un ancla cada una, incluidas las partes que la plataforma no puede hacer. Todo lo demás del sitio cuelga de una etapa, así que la navegación es un mapa del producto y no una lista de departamentos.

En lugar de capturas, reconstruimos la interfaz como fragmentos de código: una tarjeta de análisis con los componentes de su domain score, una lista de prospectos puntuada, un contacto verificado con su nivel de confianza, un pitch redactado, una línea de tiempo de monitorización. Cada uno usa datos de ejemplo de sitios ficticios y lo dice en el pie de imagen. Son texto y CSS, así que se mantienen nítidos en cualquier resolución, cuestan casi nada de carga y se editan cuando el producto cambia.

Los precios se publican completos. El plan, la tabla íntegra de créditos por acción, un ejemplo mensual calculado y una calculadora que aplica la misma aritmética que la tabla de arriba. No se reserva nada para una llamada comercial, porque no hay llamada comercial.

El lado del editor tuvo sus propias páginas. Una explica qué es una solicitud de colaboración y qué hacen sus tres botones, otra responde por qué alguien recibió el correo, y otra documenta el rastreador de verificación con su user agent y su calendario. Existen para enlazarse desde el propio correo de outreach, que es donde realmente se plantea la pregunta de confianza.

El sistema visual es editorial en lugar de SaaS genérico: una serif para titulares, monoespaciada para etiquetas, datos y elementos de interfaz, y un único acento cálido. Los fragmentos de interfaz se leen como interfaz, la prosa como prosa, y nunca compiten entre sí. Esa separación trabaja más de lo que parece, porque mantiene legible una página larga sin una sola ilustración decorativa.

Cuatro páginas del sitio en vivo, cada una resolviendo una parte distinta del diseño.

El sitio se lanzó con 100 en Rendimiento, Accesibilidad, Buenas Prácticas y SEO en Lighthouse de escritorio. Largest Contentful Paint en 0,5s, cero desplazamiento de diseño, cero tiempo de bloqueo. En móvil, el Rendimiento queda en 96 y las otras tres categorías siguen en 100.

Esas cifras vienen de la misma decisión que dio forma al diseño. Construir los fragmentos de interfaz como marcado en vez de imágenes hizo que los elementos visuales más pesados de la página costaran unos pocos kilobytes de HTML. No había presupuesto de imágenes que optimizar más tarde. Casi todo el trabajo de rendimiento en un sitio de marketing es en realidad una decisión de diseño tomada antes, como recuerdan los Core Web Vitals de Google.

Cada página se renderiza en servidor, lleva datos estructurados Organization, WebSite, SoftwareApplication y FAQPage, y aparece en un índice llms.txt con un resumen de una línea. Los bloques de FAQ se escribieron como preguntas que la gente teclea de verdad, y eso es lo que los hace utilizables tanto por los buscadores con IA como por Google.

Las páginas para editores lograron algo que no esperábamos que pesara tanto. Convierten el correo de outreach en un documento de dos caras. Quien recibe una solicitud puede leer quién pregunta, qué es la plataforma y cómo darse de baja, sin cuenta y sin responder primero.

Auditorías de Lighthouse en el lanzamiento, escritorio y móvil.

Seis decisiones de este proyecto se trasladan a otros ejemplos de diseño web SaaS y se trasladan a casi cualquier diseño web SaaS, haga lo que haga el producto.

Deja que el producto fije el orden de las páginas. Si el software ejecuta una secuencia, el sitio debería mostrar la misma secuencia. Una parrilla de funcionalidades pide al visitante que monte la historia por su cuenta, y la mayoría no se molestará.

Pon la interfaz en la página como marcado. Los fragmentos de UI reconstruidos ganan tanto a los mockups genéricos como a las capturas reales. Cargan más rápido, sobreviven a un rediseño del producto, y los datos de ejemplo se pueden etiquetar con honestidad en vez de insinuar una cartera de clientes que todavía no existe.

Publica los precios. En cualquier producto de autoservicio, la página de precios es la llamada comercial. Enseña los costes por acción y deja que el visitante calcule antes de registrarse.

Escribe los límites. Decir lo que el producto no hace es la señal de confianza más barata que existe, y filtra a los leads que se habrían dado de baja en la tercera semana.

Da páginas propias al segundo público. La mayoría de productos SaaS B2B tocan a alguien además del comprador: un aprobador, un socio, un destinatario. Esas personas están a una búsqueda de tu sitio, y una página escrita para ellas protege la reputación del producto.

Trata el rendimiento como decisión de diseño. Elegir marcado en lugar de imágenes produjo el 100 de Lighthouse, no una ronda de optimización al final. Cómo llevamos la fase de diseño está en diseño UX/UI, y la estructura de sitios más grandes en sitios web corporativos.