Brief

Infusing innovation into digital brand campaigns.

Fankave was founded in Silicon Valley by an experienced team out of Netflix and Microsoft. Their vision was to infuse magic into brand campaigns by transforming social content into visually compelling stories.

Scope

Building billboards worth a million words.

With Fankave, we primarily worked on building highly immersive and creative visualisations for image and video-driven social campaigns. Our team was also involved in setting up CI/CD for their solutions, and collaborated with their Aggregator Platform team on minor enhancements.

Research

Our roadmap from ideas to execution.

With creative visualizations, the biggest challenge is to unify an envisioned idea with sound technical implementations that can adapt and evolve in line with the latest trends.

Our primary focus was to build solutions that could evolve over time, since digital visualizations need to retain the competitive advantage of being fresh, adaptive and cutting-edge, compared to traditional dashboards.

Our team decided to build the visualizations like responsive web pages with HTML, CSS, and Javascript, for greater flexibility in rendering the components and simplified data updates. We picked React for its versatility and ability to refresh only parts of the page.

Challenges & Solutions

Where hardware wizardry meets inspired software.

As in all software development, we had our fair share of challenges from the least expected places when the rubber met the road.

Billboard Aspect Ratio

Contrary to laptops and desktops with predictable aspect ratios, digital billboards can be of any size. While some billboards are wide and stretch to 10 X 4 feet, others can be tall vertical strips that span 3 floors. This brought about an interesting challenge of building components that were both super responsive content-wise, and also aware of their siblings to position themselves sensibly.

After careful consideration and testing across multiple screen sizes, we nailed this requirement with the help of @media tags and multiple vertical and horizontal screen stops.

Hardware and Software Constraints

Digital billboards are usually powered by devices that receive slower upgrades to the latest browser versions, and feature limited hardware power compared to the latest laptops. Our smooth animations and latest CSS and Javascript inclusion were not rendered completely in the final devices, but they worked well in our test machines.

We overcame this issue by finding alternate ways to get the same experience in the old versions of CSS and Javascript with lots of help from caniuse.com and their reference manuals.

Intermittent Network Availability

In a big event with a busy crowd and lots of activity, expecting a reliable network can be wishful thinking. Our solution had to factor this in and was built to work seamlessly and inject new content as and when data access was possible.

We created a local state manager and had a fail-safe mechanism to reuse the existing data and refresh experiences seamlessly with newer data.