El rediseño del sitio web de Jasper demuestra el poder de la narrativa inmersiva y el diseño: una combinación de visión creativa y precisión técnica que redefine lo que pueden lograr los sitios empresariales.
Jasper, una plataforma líder de marketing con IA, tenía el objetivo de crear un sitio web de próxima generación que pudiera lograr resultados comerciales tangibles mientras reforzaba su misión de potenciar a todos los especialistas en marketing y al marketing mismo con el poder de la IA.
Acudieron a nosotros en OFF+BRAND. para ayudarles a hacer realidad su visión: aprovechar el potencial de Webflow para construir algo audaz, inmersivo e impactante. Lo que siguió fue una colaboración increíble, en la que nuestros dos equipos se unieron para crear un sitio web que no solo destaca, sino que combina un diseño inmersivo y una narrativa para ofrecer un valor comercial real.
A continuación, presentamos un relato de primera mano sobre cómo superamos los límites del diseño, creamos contenido atractivo y desarrollamos un sitio de alto rendimiento que posiciona a Jasper como un pionero en el competitivo panorama de la IA.
Un vistazo a la estructura y los objetivos del proyecto
Cuando Jasper nos contactó, tenían tres objetivos claros para el proyecto:
- Elevar el mensaje de marca de Jasper para la web: Utilizar el mensaje de marca existente para desarrollar contenido dirigido a perfiles específicos que refleje la misión de Jasper de potenciar a los especialistas en marketing con la IA y darle vida en la web.
- Superar los límites del diseño: Construir un sitio web inmersivo y visualmente impactante que no solo se alinee con nuestra visión de marca, sino que también amplifique nuestro mensaje de formas innovadoras.
- Generar un valor comercial real: Optimizar el sitio para el rendimiento, aumentando el tráfico, las solicitudes de demostración y las conversiones de MQL.
Para lograr estos objetivos, colaboramos estrechamente en tres pilares fundamentales: estrategia de contenido, diseño y desarrollo, asegurando que tanto nuestro equipo como el de Jasper estuvieran involucrados en cada etapa para mantener un mensaje central coherente y un enfoque orientado a perfiles específicos.
Una estrategia de contenido basada en datos: desarrollo de textos dirigidos a perfiles específicos para la web
El corazón de nuestro éxito con Jasper fue un enfoque unificado en textos dirigidos a perfiles específicos y el desarrollo de nuestro "hilo conductor" a partir de temas clave: una narrativa unificadora que conectaba cada aspecto del mensaje y el diseño del sitio web. La oferta de productos de Jasper atiende a una variedad de perfiles y, con acceso a un enorme banco de datos cualitativos y cuantitativos, pudimos adaptar el mensaje para satisfacer las necesidades únicas de cada segmento de audiencia.
Nuestro hilo conductor para Jasper fue un concepto centrado en la idea de un guía de proyectos de IA, que presentaba a la marca como una plataforma para ayudar a los usuarios a navegar por una variedad de soluciones. Este concepto surgió a través de talleres colaborativos en los que participaron nuestro equipo de estrategas, redactores, diseñadores, desarrolladores, ingenieros 3D y las partes interesadas de Jasper. Juntos, refinamos el mensaje central de la marca para la web y exploramos cómo adaptarlo a diferentes perfiles, manteniendo siempre la coherencia.
Superando los límites del diseño: aprovechando los elementos visuales como herramienta para una narrativa poderosa
El diseño es más potente y convincente cuando es capaz de evocar emociones o contar una historia. Antes de sumergirnos en la parte de diseño de este proyecto, desarrollamos un marco visual que capturaba la esencia de Jasper: guiar a los especialistas en marketing hacia una forma nueva y mejor de hacer marketing, impulsada por la IA. Esta base fundamentó cada decisión de diseño, desde elementos 2D y 3D escalables hasta diseños dinámicos.
Desarrollo de temas visuales clave
Los temas visuales clave que definimos para el marco visual incluyeron:
- Líneas isométricas para evocar un espacio infinito y la exploración.
- Estética de neblina para dar profundidad y resonancia emocional, enfatizando los mensajes clave.
- Elementos interactivos que fomentan el descubrimiento, asegurando que cada interacción se sienta intencional y atractiva.
Al diseñar una experiencia que reflejara el espíritu creativo de los especialistas en marketing, nos aseguramos de que cada interacción con Jasper dejara una impresión duradera. Estas técnicas añadieron un toque de sorpresa y descubrimiento, fomentando una conexión más profunda a medida que los usuarios encontraban algo nuevo en cada interacción.
A través de estos temas visuales, creamos una experiencia de marca que no solo era visualmente atractiva, sino también inmersiva, interactiva y lista para el desarrollo.
Ideación con prototipado de alta fidelidad
El prototipado desempeñó un papel fundamental durante la fase de diseño. Usando Figma y Blender, exploramos las interacciones desde el principio, incluyendo el trabajo en 3D.
Esto garantizó que recibiéramos comentarios de los clientes de forma temprana y frecuente, lo que permitió un enfoque colaborativo e iterativo que nos ayudó a perfeccionar las ideas mucho antes de que llegaran a la fase de desarrollo.
Elevando la interactividad: Desarrollar experiencias de usuario ricas y atractivas sin comprometer el rendimiento del sitio
Un pilar fundamental de este proyecto fue ofrecer una experiencia que no solo fuera atractiva, sino también de alto rendimiento, especialmente dada la naturaleza de alto tráfico del sitio. Nos aseguramos de que cada interacción del usuario —ya fuera navegar por el contenido, pasar de una sección a otra o interactuar con elementos dinámicos— se sintiera fluida y natural, incluso bajo condiciones exigentes. Aplicamos todas las técnicas posibles para ofrecer la solución más ligera para cada problema que enfrentamos, y no se desperdició ni una sola línea de código para optimizar el rendimiento.
Desde el principio, el rendimiento fue una consideración clave en cada componente que desarrollamos. El desafío consistía en proporcionar una interactividad rica sin sacrificar la velocidad del sitio, asegurando que la experiencia fuera completa y atractiva en cualquier dispositivo.
Dos ejemplos de cómo abordamos estas decisiones en nuestra construcción fueron el componente de pestañas automáticas y nuestro sistema de control deslizante a medida.
Componente de pestañas automáticas: Mejorando la navegación con transiciones fluidas
Una característica destacada que implementamos fue el componente de pestañas automáticas, diseñado para mejorar la navegación por el contenido sin necesidad de intervención manual. Esta función se colocó estratégicamente en todo el sitio para sumergir a los usuarios en la experiencia. Usando el plugin Observer de GSAP, habilitamos transiciones activadas por el desplazamiento que permitieron a los usuarios navegar sin problemas de una sección a otra, creando un recorrido intuitivo y fluido a través del contenido.
El componente se construyó con un script optimizado para admitir tanto el ciclo automático como la selección manual de pestañas. También incorporamos técnicas de carga diferida (lazy-loading) para cargar los scripts solo cuando fuera necesario, asegurando que el rendimiento del sitio se mantuviera alto. Inspirándonos en las metodologías eficientes de Timothy Rick, logramos un equilibrio entre una interactividad rica y la optimización del rendimiento, asegurando que el componente ofreciera una experiencia altamente atractiva sin ralentizar el sitio.
Sistema de control deslizante a medida: Componentes sincronizados para una experiencia pulida
También desarrollamos un sistema de control deslizante personalizado utilizando Swiper.js y JavaScript a medida. Este sistema integró tres componentes sincronizados —deslizadores de fondo, contenido y títulos— que trabajaron en armonía para crear transiciones suaves entre diferentes secciones. La interacción fluida entre estos elementos permitió a los usuarios mantener el control sobre su experiencia, proporcionando tanto un diseño pulido como una funcionalidad impecable.
Al combinar herramientas como GSAP, carga diferida y Swiper.js, pudimos ofrecer un sitio visualmente impresionante y de alto rendimiento que sigue siendo escalable y adaptable a medida que el negocio crece.
Creación de efectos visuales de alto impacto para un sitio de alto tráfico con WebGL
WebGL dio vida a la visión de Jasper, ofreciendo efectos visuales complejos e interactivos que resaltaron la funcionalidad del producto. Una escena 3D infinita mostró las integraciones fluidas de Jasper mientras sumergía a los usuarios en una narrativa dinámica.
Antes de su integración con la interfaz de usuario del sitio web, era esencial optimizar los efectos visuales basados en WebGL para mejorar el rendimiento. Los modelos ligeros de bajo poligonaje y las texturas comprimidas mantuvieron los tiempos de carga al mínimo, mientras que las bibliotecas compartidas como GSAP redujeron la redundancia. Técnicas como la carga asíncrona de escenas y la instanciación de mosaicos aseguraron un rendimiento fluido, incluso con animaciones complejas.
“Al optimizar WebGL para el rendimiento, entregamos un sitio inmersivo y visualmente impresionante que cautivó a los usuarios y dio vida a los productos de Jasper, funcionando a la perfección para todos los usuarios, en cualquier dispositivo”.
— Adrian G., ingeniero, OFF+BRAND.
Priorizar un diseño accesible e inclusivo
La accesibilidad fue otro elemento central de nuestra filosofía de diseño. Para los usuarios que prefieren reducir el movimiento, ofrecimos una experiencia alternativa con efectos activados por clic en lugar de desplazamiento. La compatibilidad con WebGL 2.0 garantizó que las opciones de respaldo se activaran automáticamente en dispositivos no compatibles.
El usuario se encuentra con una pantalla de inicio más tradicional, pero le hemos proporcionado controles de botón para la interacción principal, de modo que pueda disfrutar de la experiencia completa. También tuvimos cuidado de colocar las «rutas de conexión» en la parte inferior izquierda de la pantalla, para que no interfirieran con nuestras llamadas a la acción principales o secundarias.
Este compromiso con la inclusión garantizó que todos los usuarios, independientemente de sus capacidades o dispositivo, pudieran disfrutar de una experiencia fluida.
Cuantificar el éxito del relanzamiento de un sitio web
El relanzamiento del sitio web de Jasper obtuvo un éxito cuantificable, demostrando el impacto tangible del diseño inmersivo y las mejoras bien pensadas en la experiencia de usuario. Los puntos clave incluyen:
- Un aumento del 4,2 % en el tráfico general del sitio web durante la semana de lanzamiento, lo que refleja la eficacia del nuevo diseño y los mensajes a la hora de atraer a más usuarios a la plataforma.
- Un aumento significativo en las solicitudes de demostración, con la semana de lanzamiento y la siguiente superando los promedios anteriores en más de un 15 %. Este pico de interés subraya el éxito del sitio a la hora de atraer a posibles usuarios.
- Una tasa de conversión récord de solicitudes de demostración a clientes potenciales calificados por marketing (MQL), con un rendimiento posterior al lanzamiento que muestra una mejora del 10 % en comparación con los promedios anteriores. Esta mejora destaca la capacidad del sitio para generar clientes potenciales de alta calidad para el equipo de ventas de Jasper.
Estos resultados no solo reflejan un aumento en la interacción de los usuarios, sino que también refuerzan el posicionamiento de Jasper como líder en su panorama competitivo. Al combinar la narrativa inmersiva con un diseño estratégico, el relanzamiento del sitio web logró su objetivo principal: verse increíble, cargar rápido y generar conversiones significativas.
La colaboración es un conducto fundamental para el éxito web
Este proyecto no habría sido posible sin el enfoque abierto del equipo de Jasper y su disposición a colaborar como verdaderos socios. Juntos, superamos los límites del diseño, el desarrollo y la creatividad, desbloqueando soluciones audaces que desafiaron las convenciones y ofrecieron una experiencia digital destacada.
Para las empresas que buscan elevar su presencia digital, el diseño inmersivo es más que una tendencia: es una estrategia transformadora que distingue a su marca. Considérelo una inversión no solo en su sitio, sino en el futuro de su marca.
Webflow Enterprise
Con la confianza de más de 300 000 de las marcas líderes del mundo, Webflow Enterprise permite a tu equipo crear, gestionar y optimizar sitios web sofisticados a gran escala de forma visual, todo ello respaldado por una seguridad de nivel empresarial.
