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.
Veritone has a new site design developed with complex animations and transitions and needs to convert source design files into a WordPress theme.
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
The WebGL animations had a smaller file size than multiple videos
The sharpness of the WebGL animations surpassed any video solution
The WebGL objects are interactive
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.
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.
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%.
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 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
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 👏
Mike Morper & Kevin Ells
Akins Parker & Laurel Wilzbach