VideoAces Awards

— working together since 2017

Awarding Top Creators In Online Video

  • Campaign Website

Work Type

Front-End Development

Back-End Development

UI Design

UX Design

Technologies

  • PHP

    PHP

    PHP
  • MySQL

    MySQL

    MySQL
  • Sass

    Sass

    Sass
  • WordPress

    WordPress

    WordPress
  • Webpack

    Webpack

    Webpack
  • WP-CLI

    WP-CLI

    WP-CLI
  • JavaScript

    JavaScript

    JavaScript
  • Docker

    Docker

    Docker
Full project overview

Work Type

Front-End Development

Back-End Development

UI Design

UX Design

Technologies

  • PHP

    PHP

    PHP
  • MySQL

    MySQL

    MySQL
  • Sass

    Sass

    Sass
  • WordPress

    WordPress

    WordPress
  • Webpack

    Webpack

    Webpack
  • WP-CLI

    WP-CLI

    WP-CLI
  • JavaScript

    JavaScript

    JavaScript
  • Docker

    Docker

    Docker

Background

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.

Left: Corporate Website. Right: 2017 VideoAces Awards.
Left: Corporate Website. Right: 2017 VideoAces Awards.
First: Corporate Website. Second: 2017 VideoAces Awards.

Challenge

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.

Campaign Website Flowmap.
Campaign Website Flowmap.

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.

Moodboard

Iterative Evolution

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.

Different iterations of the website.
Different iterations of the website.

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.

Several components used throughout the website to maintain consistency and visual integrity.
Several components used throughout the website to maintain consistency and visual integrity.

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. 

VideoAces’ data flow.
VideoAces’ data flow.

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.

The different elements that compose the VideoAces Winner card.
The different elements that compose the VideoAces Winner card.

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.

Website Screens

The Result

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!

Website Screens