Innovación de UI/UX e integración de HubSpot para Trivie

Client
Trivie es una plataforma de retención de conocimientos basada en inteligencia artificial que utilizan las principales empresas para mejorar la formación de los empleados. Trivie, una solución empresarial probada, ha recaudado más de **20 millones de dólares en fondos de riesgo y fue adquirida por Quantum5 en 2024**. La plataforma utiliza la ciencia del cerebro para convertir cualquier contenido de la formación en evaluaciones atractivas, garantizando que se conserven los conocimientos cruciales para mejorar el rendimiento laboral a largo plazo.
Description
Nuestro cliente necesitaba un socio que lo ayudara con el diseño y el desarrollo de la interfaz y la experiencia de usuario, así como con una integración perfecta en el CMS de HubSpot. Concretamente, buscaban una solución que permitiera a sus clientes potenciales personalizar y utilizar indicadores clave de rendimiento (KPI) de forma dinámica y práctica.
Trivie.ai - Hero of Destino page
Trivie.ai - Componentes de interfaz de usuario (navegación y modales)
Trivie.ai - Sección de casos de uso y cómo funciona
Trivie.ai - Sección de funciones de microaprendizaje
Trivie.ai - Cuadrícula de funciones ampliadas
Trivie.ai - Registro y pie de página de la versión de prueba
Trivie.ai - Vista previa de la sección Hero y del panel
Trivie.ai - Propuesta de valor y preguntas frecuentes
No items found.
Al crear secciones de héroes dinámicas para las páginas de destino de Trivie, el diseño utiliza un título fuerte y orientado a la acción y un vídeo incorporado para explicar rápidamente el valor fundamental del producto: convertir cualquier contenido en evaluaciones en cuestión de minutos.
Un vistazo al diseño detallado de UI/UX para la plataforma de Trivie. Esta foto muestra una navegación limpia a modo de megamenúes y un modo funcional de «Añadir código fuente», ambos diseñados para ofrecer una experiencia de usuario intuitiva y fluida.
Esta sección de interfaz de usuario comunica eficazmente el valor de Trivie a diferentes usuarios. Combina casos de uso específicos con una guía sencilla e ilustrada de 3 pasos que facilita la comprensión del flujo de trabajo del producto para los clientes potenciales.
Sección de interfaz de usuario que destaca las capacidades de microaprendizaje de Trivie. El diseño minimalista de columnas divididas utiliza maquetas de productos para demostrar la experiencia móvil y textos concisos para explicar los beneficios, lo que hace que las funciones complejas sean fácilmente comprensibles.
Se diseñó un diseño de cuadrícula limpio, espacioso y escaneable para mostrar el amplio conjunto de funciones de Trivie. El uso de la iconografía y un amplio espacio en blanco garantiza que la información sea fácil de digerir, lo que ayuda a los usuarios a comprender rápidamente las capacidades de la plataforma.
El punto de conversión final de la página. El diseño utiliza un titular directo y orientado a los beneficios («no se requiere tarjeta de crédito») y una sólida justificación social para generar confianza y animar a los usuarios a iniciar una prueba, todo ello integrado a la perfección en el CMS de Hubspot.
La sección principal de héroes diseñada para Hubspot CMS de Trivie. La interfaz de usuario establece inmediatamente la credibilidad con una propuesta de valor clara y un sólido respaldo social (testimonios y logotipos de clientes), a la vez que permite a los usuarios vislumbrar el limpio panel de control de la plataforma.
Este diseño combina una atractiva maqueta de producto (la tabla de clasificación) con un texto claro que explica el «por qué» detrás de la función. La sección de preguntas frecuentes, accesible a continuación, ayuda a responder a las preguntas de los usuarios y a reducir la fricción como parte de la estrategia general de UX.

El encargo

Trivie necesitaba un socio de diseño y desarrollo para reconstruir por completo su sitio de marketing. La plataforma —basada en inteligencia artificial para la retención de conocimientos en equipos de formación empresarial— contaba con una gran tracción, datos de resultados reales y un producto que funcionaba de verdad. Lo que necesitaba era una presencia web capaz de comunicar todo eso a un comprador que solo dedica treinta segundos de atención antes de decidir si seguir leyendo.

El alcance abarcó el diseño UI/UX, el desarrollo front-end y la integración completa con el CMS de HubSpot, incluyendo un requisito específico: una herramienta dinámica de personalización de KPI que permitiera a los leads entrantes interactuar con métricas relevantes para su propio negocio antes de hablar con el equipo de ventas.

Lo que comenzó como un proyecto definido se convirtió en algo más duradero. atQuo trabajó con Trivie en múltiples colaboraciones a lo largo de los años: nuevas páginas, secciones actualizadas, lanzamientos de funciones, refinamientos del sistema de diseño y ciclos de implementación que mantuvieron la presencia web de la plataforma sincronizada con un producto en constante evolución.

El desafío de diseño

Los compradores de SaaS empresarial son escépticos por naturaleza. Han visto demasiadas plataformas que prometen resolver problemas y no lo hacen. Por eso, el trabajo no consiste solo en explicar el producto, sino en generar credibilidad rápidamente, añadir el nivel adecuado de detalle a medida que aumenta la confianza y hacer que el camino hacia una prueba gratuita parezca de bajo riesgo.

El desafío secundario era el CMS. El equipo de Trivie necesitaba poder gestionar y actualizar el sitio sin depender de desarrolladores. Eso significaba construir sobre HubSpot de una manera que fuera realmente flexible, no solo técnicamente compatible.

Lo que construimos

La sección principal se diseñó para establecer la propuesta de valor y la prueba social simultáneamente. Los logotipos de los clientes y los testimonios aparecen en el primer scroll, no enterrados al final, porque para los compradores empresariales, la validación de terceros importa antes que la explicación del producto. Una vista previa del panel de control otorga a la página una credibilidad visual inmediata.

La sección de casos de uso y funcionamiento se estructuró en torno a las personas usuarias en lugar de las funciones del producto. La pregunta que se hace un comprador no es "¿qué hace esto?", sino "¿es esto para alguien como yo?". Un flujo ilustrado de tres pasos permite que la explicación del proceso sea escaneable sin simplificarla en exceso.

La sección de microaprendizaje utiliza un diseño de columnas divididas con maquetas de productos móviles. Para una plataforma que funciona en cualquier dispositivo, mostrar la experiencia móvil desde el principio es preciso y tranquilizador.

Se diseñó una cuadrícula completa de funciones para que fuera escaneable en lugar de exhaustiva, utilizando iconografía y espacios en blanco para organizar la información y evitar que la densidad de funciones resulte abrumadora.

La secuencia de conversión encabeza con un titular orientado a los beneficios y elimina la fricción explícitamente: no se requiere tarjeta de crédito y la prueba social es visible en el momento de la decisión. La integración con HubSpot hace que el envío del formulario forme parte del mismo flujo de trabajo de CRM que el resto de la estrategia de ventas de Trivie.

Una colaboración a largo plazo

El trabajo que aquí se describe es solo una muestra de una relación más larga. Trivie no fue un proyecto con fecha de inicio y fin, sino una colaboración continua que creció a la par de la empresa. A lo largo de los años, atQuo apoyó a Trivie en múltiples ciclos de diseño y desarrollo: nuevas páginas, secciones actualizadas, lanzamientos de funciones, mejoras en el sistema de diseño y tareas de implementación que mantuvieron la presencia web de la plataforma sincronizada con un producto que evolucionaba rápidamente.

Ese tipo de continuidad cambia la forma en que se trabaja. Dejas de explicar el producto y empiezas a anticipar lo que necesita. Las decisiones se vuelven más rápidas, los resultados más precisos y la relación deja de basarse en sesiones informativas para centrarse en el conocimiento mutuo. Para cuando Trivie fue adquirida por Quantum5 en 2024, atQuo ya formaba parte del equipo desde hacía tiempo, habiendo contribuido a varios de los puntos de contacto que hicieron posible ese resultado.

El resultado

Un sitio web completo en HubSpot CMS que otorga al equipo de marketing de Trivie un control total sobre el contenido y ofrece a sus compradores un camino claro y creíble desde la primera impresión hasta la prueba del producto, incluyendo una herramienta dinámica de KPI que personaliza la propuesta de valor antes de iniciar cualquier conversación de ventas. Todo ello como parte de una colaboración sostenida que duró años y abarcó mucho más que un simple lanzamiento.

Keep| reading, browsing, paging

Our case studies unite high-performance design and tangible results.