.jpg)
Mi viaje de diseño de la página de inicio de mi SaaS como desarrollador de backend
He construido Vigilant, una herramienta de monitorización diseñada para vigilar todos los aspectos de un sitio web, desde comprobaciones básicas de disponibilidad hasta controles más avanzados como rendimiento, user flows y la infraestructura pública. Empezó como un proyecto open source y ahora es un SaaS con estructura open core. Como desarrollador backend, el diseño no es mi punto fuerte, así que en este artículo comparto las distintas revisiones de la página de inicio y el feedback que recibí de personas generosas en internet, gracias al cual pude mejorar la homepage varias veces hasta llegar a la versión actual.
La elección del modo oscuro fue deliberada: ya lo había usado en proyectos anteriores y me parece que transmite una vibra más moderna. Más tarde comprendí que es más fácil hacer que algo luzca bien en modo claro, pero seguiría prefiriendo el modo oscuro por gusto personal. La paleta que utilizo se llama Flexoki y es open source.
La versión inicial era muy simple: solo dos colores, negro y rojo, una lista de características y una captura de pantalla. El objetivo principal era tener algo funcional y un campo para que la gente se suscribiera por correo. En aquel momento el proyecto no era todavía un SaaS y quien quisiera usarlo debía desplegarlo por su cuenta, algo que sigue siendo posible hoy.
Cuando lancé la versión SaaS quise hacer la página más atractiva y añadí una animación Lottie que simbolizaba cómo funciona Vigilant. Cambié también el texto del hero y organicé las características en una cuadrícula con capturas. Con el tiempo probé muchos textos de hero distintos y aprendí que hay muchas opciones válidas y que elegir la adecuada no es trivial.
El primer feedback relevante llegó de Reddit, donde alguien ofrecía revisar landing pages. Tras analizar la página, me comentó que parecía un sitio hecho por un desarrollador pensando en sus propios gustos, que faltaban colores, que la animación era divertida pero no profesional, que el CTA era demasiado genérico y que los textos hablaban del producto y no del cliente. Se hizo hincapié en preguntas clave: para quién es Vigilant y qué problema resuelve, la captura de pantalla no aportaba información y faltaban casos de uso. Otro fundador confirmó lo mismo: añadir más color y enfocar los textos en el cliente.
Aplicando ese feedback empecé por el hero y cambié el texto y el botón CTA. Intenté destacar partes del texto con colores pero me pasé: acabó siendo demasiado, confuso y cansaba la vista. El diagrama que creé para explicar la funcionalidad Flows, con flechas e imágenes pequeñas, resultó difícil de entender. Más tarde sustituí esa imagen por un GIF animado que muestra el flujo en acción y puse un fondo azul específico para esa sección, de modo que destaque como uno de los puntos más diferenciadores de Vigilant. También añadí secciones que explican canales de notificación y casos de uso.
En lugar de saturar los textos con color, cambié el color de fondo de algunas secciones a tonos más suaves de la paleta Flexoki. Añadí animaciones modestasen tres puntos: franjas en el header, una animación de separación en la página y círculos animados detrás de las notificaciones para simular la recepción de alertas. Estos pequeños toques ayudaron a que la página respirara y a guiar la atención del visitante.
La versión actual es mucho mejor que la primera. Aprendí y mejoré gracias al feedback de desconocidos en la red. Como mis habilidades de diseño son modestas, también experimenté con IA. Utilicé Copilot CLI y trabajé componente por componente con un prompt que describía la web y pedía mejoras de diseño. El resultado fue una interfaz más pulida, con microanimaciones, efectos hover en el hero y una presentación más profesional. Esta renovación se desplegó en la release 2025.11.
A lo largo del proceso tuve claro que la experiencia de usuario y la comunicación orientada al cliente son tan importantes como la funcionalidad técnica. Hoy puedo decir que Vigilant comunica mejor para quién es y qué problema resuelve, muestra casos de uso claros y utiliza animaciones y colores con moderación para mejorar la comprensión.
En Q2BSTUDIO, empresa dedicada al desarrollo de software y aplicaciones a medida, nos apasiona acompañar proyectos como este y aplicar buenas prácticas de UX y diseño también cuando el equipo original carece de experiencia visual. Ofrecemos servicios de desarrollo de aplicaciones y software a medida integrando inteligencia artificial y enfoque en seguridad, por lo que podemos ayudar a proyectos SaaS a madurar tanto en funcionalidad como en presencia online. Si buscas soluciones de inteligencia artificial para empresas o agentes IA podemos aportar experiencia y metodología en servicios de inteligencia artificial, o si lo que necesitas es crear una aplicación robusta desde cero consulta nuestro apartado de desarrollo de aplicaciones y software a medida.
Además de desarrollo a medida trabajamos con ciberseguridad y pentesting, servicios cloud aws y azure, servicios de inteligencia de negocio y Power BI, automatización de procesos y más. Palabras clave que consideramos esenciales y que integran nuestros servicios: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Si tienes comentarios sobre diseño o crees que algo podría mejorarse, en Q2BSTUDIO estamos abiertos al diálogo y a colaborar con equipos técnicos que necesiten apoyo en diseño, seguridad o capacidades avanzadas de IA.
Publicación original en el blog de Vigilant actualizada con la experiencia y adaptaciones de diseño hasta noviembre de 2025. Si quieres más información sobre cómo podemos ayudar a tu proyecto visita nuestra web o contacta con el equipo de Q2BSTUDIO.
