Tubular Labs, the leading measurement and analytics solution for social video, first came to us in 2017 looking to redesign their marketing website. With the Tubular team focused on the product, and with a small in-house design team, they needed our help to get their website into new pixel-perfect levels.
Here's a look at a dedicated campaign website we created together to announce their VideoAces Awards. It honors the top social video brands and media companies creators.
With a steady relationship and a trail of successful projects, we were challenged to design the 2018 VideoAces Awards campaign website.
Being a campaign that attracts worldwide attention, we needed to ensure it lived up to the hype. That meant we would have to create a disruptive new look-and-feel without neglecting Tubular's own identity.
The Design Direction
From the start, both teams worked together to ensure vision was met. Initially, Tubular's team provided us with a Moodboard that defined what theme the VideoAces 2018 Campaign should reflect and the basis for the Design sprint.
From there, we’ve not only expanded the Moodboard internally but also iterated on both the typography and base colors. Illustrations were provided to be incorporated as seamlessly as possible in the look and feel.
The iteration process was a very challenging aspect of this project, which allowed Pixelmatters to constantly evolve after each version.
The goal was to achieve a robust Design that reflected the fun aspect of the brand, but maintained a visual connection to its “roots” — tubularlabs.com — and communicated the new campaign effectively and as clear as possible.
Consistency is Key
The secret for a good design lies not only in the Design itself but also in its surroundings. As soon as the overall direction was defined, we immediately understood the need to create a Style Guide that accommodated this new disruptive take.
The Design team wanted to make sure that despite adopting a disruptive approach, that elements would have rules and grids would be followed. This allowed our Engineering team to easily scale the website into new sub-pages when needed.
One Database, Many Video Creators
VideoAces had a disruptive design leading to challenging UI implementations. Although, the main challenge was a need to seed the database with a huge amount of video creators, where each one should have different shareable images to social media based on multiple categories.
The Technical Strategy
Tubular's team delivered the creators' information in a spreadsheet and a set of assets. In order to automate the data migration, a Bash Script was created to go through all the data and seed the database using WP-CLI.
Cloudinary was used to create images following a custom template, and the dynamic content was generated based on URL parameters. This way, the creator could have a specific shareable image for each nominated category.
After a few months of joined forces between Design and Engineering, we’ve successfully launched VideoAces 2018 with a cohesive but completely new look and feel, elevating this campaign even further!