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 de usuario y la experiencia de usuario y la integración perfecta de Hubspot CMS. Concretamente, necesitaban una solución que permitiera a sus clientes potenciales personalizar y utilizar los 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.

The brief

Trivie needed a design and development partner for a full marketing site rebuild. The platform — AI-powered knowledge retention for enterprise training teams — had strong traction, real outcomes data, and a product that genuinely worked. What it needed was a web presence that could communicate all of that to a buyer who had thirty seconds of attention before deciding whether to keep reading.

The scope covered UI/UX design, front-end development, and full HubSpot CMS integration, including a specific requirement: a dynamic KPI personalization tool that let inbound leads interact with metrics relevant to their own business before talking to sales.

What started as a defined project became something longer. atQuo worked with Trivie across multiple engagements over the years — new pages, updated sections, feature launches, design system refinements, and implementation cycles that kept the platform's web presence in sync with a product that was constantly moving.

The design problem

Enterprise SaaS buyers are skeptical by default. They've seen too many platforms that promise to solve problems and don't. So the job isn't just to explain the product — it's to build credibility fast, layer in the right amount of detail as trust accumulates, and make the path to a trial feel low-risk.

The secondary challenge was the CMS. Trivie's team needed to be able to manage and update the site without developer involvement. That meant building on HubSpot in a way that was genuinely flexible, not just technically compliant.

What we built

The hero section was designed to establish the value proposition and social proof simultaneously. Client logos and testimonials sit at the first scroll, not buried at the bottom — because for enterprise buyers, third-party validation matters before product explanation does. A preview of the dashboard gives the page immediate visual credibility.

The use cases and how-it-works section was built around user personas rather than product features. The question a buyer asks isn't "what does this do" — it's "is this for someone like me." A three-step illustrated flow keeps the process explanation scannable without oversimplifying it.

The microlearning section uses a split-column layout with mobile product mockups. For a platform that works on any device, showing the mobile experience early is both accurate and reassuring.

A full features grid was designed to be scannable rather than exhaustive — iconography and white space doing the organizational work so the feature density doesn't feel overwhelming.

The conversion sequence leads with a benefit-oriented headline and removes friction explicitly: no credit card required, social proof visible at the decision point. The HubSpot integration makes the form submission part of the same CRM workflow as the rest of Trivie's sales motion.

A long-term partnership

The work described here is a snapshot of a longer relationship. Trivie wasn't a project with a start and end date — it was an ongoing engagement that grew as the company did. Over the years, atQuo supported Trivie across multiple design and development cycles: new pages, updated sections, feature launches, design system refinements, and implementation work that kept the platform's web presence in sync with a product that was moving fast.

That kind of continuity changes how the work gets done. You stop re-explaining the product and start anticipating what it needs. The decisions get faster, the output gets tighter, and the relationship becomes less about briefing and more about knowing. By the time Trivie was acquired by Quantum5 in 2024, atQuo had been part of the team long enough to have contributed to more than a few of the touchpoints that made that outcome possible.

The outcome

A complete HubSpot CMS site that gives Trivie's marketing team full content control and gives their buyers a clear, credible path from first impression to trial — with a dynamic KPI tool that makes the value proposition personal before a sales conversation starts. Delivered as part of a sustained partnership that lasted years and touched far more than a single launch.

Keep| reading, browsing, paging

Our case studies unite high-performance design and tangible results.
¿Listo para arrancar?

Activa tu solución

Ya sea que necesites definir tu marca o empezar a producir contenido y crecer en digital, el equipo está listo.
[ Hablemos → ]

Need something else from the atQuo infrastructure?

Enter frontier layer
(You are here)
Relia
Integrated Teams