emergence
Work
Talk to us
Web Development

Veritone

🤖 An online presence that conveys the excitement and dynamism of Artificial Intelligence

Veritone is a pioneer in the AI industry. They use AI to provide insights to companies like Microsoft, iHeartMedia, and CBS.

The mission? Develop design mock-ups provided by AKNS PRKR to build a WordPress theme that is highly configurable and intuitive for the Veritone team to update, while also loading exceptionally fast on both desktop and mobile devices.

The deadline was tight and the project requirements were evolving while we worked. The approach had to be flexible enough to accommodate new requirements and thoughtful enough to foresee future requests.

From the Brief

Veritone has a new site design developed with complex animations and transitions and needs to convert source design files into a WordPress theme.

Blog Layout
Blog Layout
Default Page Layout
Default Page Layout
Documents Download Layout
Documents Download Layout

Complex animations that balance beauty and performance

One of the primary challenges this project faced was integrating the WebGL animations created and developed by John Mastri.

We opted for WebGL animations instead of videos for three reasons

  1. The WebGL animations had a smaller file size than multiple videos

  2. The sharpness of the WebGL animations surpassed any video solution

  3. The WebGL objects are interactive

The bundled WebGL animations — while smaller than individual videos — is still a large file. So execution of the Javascript was deferred to prevent it from blocking the page render and impacting performance and SEO. In the event that Javascript is disabled or the visitor is on a slow connection, my implementation allows for fallback images to be displayed until the module is loaded.

🛠️ Complete customization for page layout, buttons, themes, and more.

Veritone needed a website that could keep up with it’s ever-changing array of services spanning nearly every industry. The website had to be just as dynamic as the services they offer.

Layout

The marketing team complete control over the layout of the pages. Each horizontal “section” of the website can be individually created, edited, or moved, and each section has multiple variations that change its appearance on the front-end.

Content Editor
Content Editor
Editor Output
Editor Output

One unexpected downside to this method was that by breaking the page content into these discrete sections, each time a page is loaded the database would be queried for each custom field, a number that approached 200 queries per visit on some of the larger pages.

These queries were simple look-ups and thus computationally fast, however they were maxing out the monthly quota of look-ups on their hosting plan. Ultimately this issue was resolved by caching the objects in the database and reduced our database lookups by 90%.

🎭 Differentiating between dozens of industry applications with one design

We opted to use color to differentiate between products and services. We ended up with 8 different themes, which creates a dynamic browsing experience.

Themes can be selected on a per-page basis, allowing complete flexibility of the visual appearance of each page. When a theme is applied, it affects all relevant elements on the page, including background colors, link colors, button colors, and other secondary elements.

The end result is an easy to implement color system that is simple to maintain, easily extendable, and intuitive to use.

As always, speed is paramount

As part of a broader SEO initiative, page speed was under heavy scrutiny. A variety of techniques were implemented to increase page speed and SEO ranking.

  • Optimization of image sizes

  • Deferring parsing of scripts and stylesheets

  • Leveraging browser and database caching

  • Lazy loading images

🎉 Looking back

This project was extremely fun to work on, and incorporated a lot of interesting challenges that I don’t normally get to work with. This was my first time using WebGL in production, which was a headache at times but the end result was worth it. Breathing to life the animations dreamed up by the design team was also an absolute pleasure.

It’s rare to work on an exciting project like this that really seek to push the envelope with emerging browser technology. HUGE thanks to the entire Veritone team, their patience, input, and contributions made this project possible 👏

Project Managers

Mike Morper & Kevin Ells

IT Manager

Andrew Lombardi

Designers

Akins Parker & Laurel Wilzbach

WebGL Developer

John Mastri

Emergence

© 2021 emergence

Privacy Policy