Quo Agency
Look for a new angle
s
s
s
s
Project: Webflow & Hubspot interfaces
Trivie

A workflow platform that helps employees remember their training.

Materializing Trivie’s vision for change.

Introducing the client

As a workflow platform, Trivie uses adaptive learning, cognitive science, and proven gamification techniques to help employees remember their training information.

the goal to

accomplish

As with many other platforms on the market, Trivie was in need of a number of changes on their website. With this valuable information we learned about the platform and our experience working with them in the past, we ventured into a new project.

The challenges and how they were overcome

There are three challenges to consider. First, creating an interactive Drag and Drop interface on Hubspot and for desktop and mobile phones. Second, developing templates and integrations on Hubspot. And third, developing interfaces on Webflow.

A very important challenge was the checklist page, as it is uncommon to work with this type of request. This page displays a list of Key Performance Indicators (KPIs) that users can "play" with by dragging them into a series of columns. Once they are satisfied with the lists they have compiled, they can download a PDF file with their selections. Indeed, this functionality was not easy to implement, especially when it came to making the Drag and Drop interaction work perfectly on mobile phones.

For the landing pages, another challenge was to make the Hubspot templates and integration with the CMS ( Content Management System ) as flexible as possible so that Trivie's marketing team could create different iterations of the landing pages and easily run A/B tests without depending on possible additional implementations by Quo.

When integrating the landing pages, we followed the same approach as with other CMSs, such as Webflow or Prismic, always keeping in mind the best experience for the user who will be managing the content on these pages. In addition, we developed interfaces on Webflow, which implies the creation of a new website.

An aspect of the process worth highlighting

Our experience with web development, CMS integration, and UI /UX design were critical in overcoming each challenge. Quo was able to deliver a final product that met the expectations of Trivie's marketing team in launching their new image through their website.

Workflow

As for Webflow, Trivie sent us the designs and later received our feedback on issues regarding the functionality of some elements. After that, we started building the Webflow website. Once this phase was complete, we sent Trivie a preview of the site so they could give us their feedback on how the site looked on different devices and screen sizes.

It is worth noting that as we created the various pages, we took great care to adjust the design so that it looked and worked correctly across all responsive versions (desktop, tablets, horizontal / landscape mobile, vertical / portrait mobile). Once the pages were approved, we implemented certain functions, integrations and/or animations/interactions.

Regarding integrations, there were regular integrations such as Google Tag Manager and Google Analytics. The integration that took the most time was the Hubspot forms on the website with fully customized styles so that these forms do not clash with the rest of the website.

Once we had all the integrations and functions completed, we ran tests to make sure everything was working properly. The penultimate step was to integrate the website with the Webflow CMS. This is especially important for some elements such as blogs or other types of collections or listing pages managed through CMS Collections. A final round of quality control was performed and the final delivery was sent to Trivie. This usually includes instructions (written and/or video) on how to manage the content of the website.

Before we started working on the landing pages in Hubspot, our client let us know what they envisioned for their project, in this case landing pages, their structure, and goals. Once this was clear, we began the design phase, which included research, wireframing, and user interface design.

Once the first iteration of the design was complete, we sent it to the client for feedback. If the client still wanted to make changes, the second iteration would be created and sent to them, and so on until the design was approved for implementation.

Finally, as with Webflow, a final quality check is performed and the final delivery is sent to our clients. This usually includes instructions (written and/or video) on how to manage the content of the website.

Conclusion

The Quo team was happy to take on this project as we had already had a great experience working with Trivie in the past. Thanks to our experience, we were able to overcome each of the challenges we found along the way. We can not forget that the Trivie staff was always clear about their desired end result, and understood and respected the time we needed to implement the changes for their website.
⭐ Credits to the brains behind the project development
María Salas
Front-end & Back-end Developer
Carlos Briceño
Project Manager, QA Tester
Daniela Cárdenas
Webflow Developer
Nayeli Valenzuela
Webflow Developer
Diego González
UI Designer
Talents behind this presentation
Diana Morales
Translator, Creative Director & Editor
Carlos Briceño
Editor and Film Host
Nayeli Valenzuela
Webflow Developer
Santiago González
Filmmaker
Diego González
Filmmaker, Photographer