tayOur Website Just Got a Major Upgrade

A key objective of our migration was to ensure that the transition wouldn’t compromise, and ideally would improve, our site’s performance metrics. We set a clear goal: maintain or exceed the current Lighthouse scores to guarantee that user experience, accessibility, SEO, and best practices remained top-tier.

There are so many improvements, new features and things to call out that we didn't want to leave any of these behind:

• Current site relies on Hubspot to render our forms and then our code to style the inputs to match our branding.

• Our new site pulls the form definition from Hubspot and renders out the components in JoyUI. We control the validation, submission, etc which gives us more control and an awesome foundation for potential features down the road.

  • Because of this, it means we have no hardcoded forms on the website like we did in the past. So no more changes needing to go through marketing engineering on scanner gate and free trial forms.

• Icons

  • Plugin that connects directly to audioeye/ui-icons to allow selection of icons for header navs, cards, etc directly in Storyblok

• Hubspot Forms

  • Plugin that automatically pulls our forms directly from Hubspot and allows the user to just have to choose one form. It then automagically pulls in the other corresponding ids it needs

    • Currently in prismic you have to supply 4 different form ids for anytime you are adding a form to a section. On top of that, it's all manual

In Prismic, we had a limited set of “global” components that allowed us to make updates across multiple pages, primarily focusing on the header and footer. However, these were only applicable to our default pages, not our international microsites or other variations.

Now, we’ve expanded the scope of globals, giving us the ability to update content in one place without having to manually edit every page it appears on. Here’s a look at the new capabilities:

• Footer

  • We can now easily manage footer content across the entire site, ensuring consistency without repetitive edits.

• Table of Contents

  • Previously, adding a table of contents to blog posts required manual entry of each link. Now, it’s fully automated. When you create a blog post, the system will automatically generate the table of contents by pulling all H2 headings from the content.

  • Mobile Version

    The previous site only had a desktop version of the table of contents. Now, we have a mobile-friendly version as well, offering seamless functionality across devices.

• Header

  • We now have the flexibility to create as many headers as needed, along with the ability to add menus, buttons, mega menus, and more.

  • New Utility Bar has been added for additional functionality in our header navigations

• Logo Banners

  • Gone are the days of updating customer logos or the number of customers on every page. Now, you can update this information in a central global logo banner, making it easier to maintain.

• Secondary Navigation

  • This new component is perfect for multi-page guides that require consistent secondary navigation throughout. It ensures a seamless experience for users navigating across various sections of the site.

• Button

  • Button functionality can now be globally referenced, which is incredibly powerful. If we need to update the text or functionality of a core button (e.g., changing it from linking to a modal form to directing to a demo page), we only need to do so once—no need to edit every individual button on each page.

• Plan Cards

  • Previously, our plans were hardcoded in the CMS. Now, we can create and manage multiple “plans” and reference them throughout different content types, such as Columned or Split Content.

• Rich Text Content

  • With global rich text blocks, we can maintain consistency in areas like the footer across pages. This allows us to update things like client count or other contact information in one place, rather than updating multiple pages individually.

• Every component on pages can work with blogs as well as tons of of new embeds for the rich text editor

  • Card

  • Eyebrow

  • Code Block (already on current site but with improved syntax highlighting that actually highlights based on language)

  • etc

Previously, almost every table in Prismic was hardcoded as static content. Now, our teams can create a variety of dynamic tables with numerous features directly within the CMS. These features include:

• Pricing tables

• Tables

• Checklist tables

• Etc

We now have an actual component that allows us to gate content behind a form. Previously this was all done as one off static/hardcoded content

Although we had our EU microsites on Prismic, they were quickly thrown together and did not give us a solid foundation to build upon into new countries, build new pages, etc. Our new setup allows for quick integration with new languages and makes it extremely easy for our teams to build new pages in those languages and push out new content.

Our previous 404 page was hardcoded and required marketing engineering to update. Now we have full control of this page in the CMS along with versions per language that we support.

New tracking events added and past event metadata improved across the board. All events can be viewed in our new documentation.

👣(opens in a new tab) Audioeye.com - Event Tracking(opens in a new tab)

We have undergone a comprehensive branding update, bringing more consistent styling, messaging, and design across the entire website. This refresh includes updated component looks, enhanced styling, and a more cohesive visual identity. Users will also experience a redesigned Scanner results page with an improved midscreen experience, as well as refined layout and styling updates to the color contrast checker tool for better usability.

With our transition to Vercel, we now have access to their firewall features, providing deeper insights into our traffic and enabling custom rules to protect against bot traffic and DDoS attacks. Additionally, we can secure our preview and staging sites behind our own VPN for enhanced access control.