Webflow website development for Maestro&Co
Glean, a pioneer in the field of workplace productivity and knowledge management, has rapidly ascended to unicorn status with a valuation over $2 billion.
Leveraging artificial intelligence, Glean streamlines information access and collaboration within organizations, enhancing efficiency and decision-making processes.
We collaborated with Pixelmatters to design and develop Glean's new website.
This project had four main goals
Design new pages
Glean already had their website but with their product new AI capabilities and re-position in the market, we supported their design and marketing teams in the design of new pages.
Technical audit
We conducted a comprehensive technical audit to outline various strategies for developing the new website to our leadership team. After careful consideration, the decision was made to construct the new website within the existing Webflow project. This approach necessitates a meticulous level of caution to ensure that the ongoing operations of the live website remain unaffected.
Style guide
We also created a strong style guide foundation to make sure the website is consistent and easy to scale.
Modular library
We developed a modular library designed to empower Glean's marketing team, enabling them to create new pages independently, without the need for assistance from the development team.
Integrations
Resources
We built a resources library to accommodate different types of content and different structure while keeping it simple and easy to manage.
Modular Library
We built a modular library inside Webflow that allows Glean's team to reuse pre-built sections to build new pages that are on-brand, and fully responsive. All without the help of a developer.
Learn more about our modular approach here
Style Guide
When setting up a client’s website project, decisions need to be made concerning class naming and module organization so they are easy to use and access. At Better Mistakes, we start by creating a style guide with global styles inspired by Finsweet’s Client-First guidelines and best practices. This way, if for example, your brand font changes, it will take just a couple of minutes to update it across the whole website.
Custom Code
We added custom JavaScript to Glean’s new website to accomplish custom animations and automation tools.
Fixing the navbar with animated underline
It was necessary to loop through all the navbar links and add the underline navigation as well as take the links wrapper into account as an element, to stop the situation where when the user mouses off the link but onto the wrapper, the underline disappears.
Automating tab loop
There was a feature tabs section on Glean’s product overview page which consisted of four sets of tabs sections, with three tabs in each section and the goal was to have an automated loop that ran through each of the tabs inside each tabs sections until a user interrupted the loop by clicking on any of them.
This automation was to run concurrently with a separately developed underline animation on the highlighted tab header. A further challenge was to integrate accessibility standards into the tab loops and that was done by breaking out of the loops when a user decides to tab through the website.
Underline animation on scroll
This deceptively simple-looking animation is actually rather challenging to achieve. Animating a simple “underline” as in the standard HTML underline would be easy, however, this design rises up to a degree and requires specific control over where it begins and ends.
In order to allow Glean's to add this effect to any text element, we needed to ensure the code only relied on class additions, so that adding a class in Webflow would be sufficient to apply the animation.
Filters
To make it easier for the user to find the connector they are looking for, we developed a vertical style filter.
Marketo custom forms
Marketo is a powerful B2B marketing automation tool that Glean's team was already using.
We integrated Marketo with Webflow and override the default Marekto form styles to match Glean's style guide.
Project Outcome
By building new pages and implementing a style guide and Marketing Web Systems concepts, we were able to strengthen Glean’s ability to update their website more actively and efficiently. From small changes to creating new pages in just a few minutes!
Next project
