Innovative Software Development and Collaboration: The Story Behind Valvoline's Award-Winning Never Idle Project
In the realm of software development, the 80/20 rule often presents a fascinating paradox: while it suggests that 80% of users utilize only 20% of a system's features, everyone incorrectly assumes each user uses the same crucial 20%, which is just not the case. Even identifying the top 20% features on average can be a Herculean task. This principle was vividly illustrated in our collaboration on the Never Idle project for Valvoline, a project that pushed the boundaries of what was possible in mobile browser with heavy, complicated assets filled with animations, videos, and other media assets, all ultimately seamlessly integrated with a content management system.
The Challenge and Our Approach
From the onset, our objective was clear: to bring to life an ambitious concept developed by Valvoline's lead ad agency, which had initially created a series of prototypes using a combination of vanilla JavaScript, jQuery, and animated GIFs. While visually appealing, these prototypes fell short in several areas—they were not optimized for mobile devices, lacked the ability to progressively load content, and were not integrated with a content management system, rendering them practically unusable on mobile platforms.
A significant hurdle we encountered was the mobile device performance of the animator-keyframed animations, as initially designed because they could not be hardware accelerated by mobile devices. This limitation meant that only a few of the fastest and most expensive mobile devices could support even a 30 frames per second (fps) animation, far below the solid 60fps required for a fluid user experience. In order to address this, we not only introduced the ad agency's team to critical web development concepts such as requestAnimationFrame, enhancing their toolkit and paving the way for more sophisticated development approaches, but also developed a new "pre-compiled CSS animation" technique.
Technical Innovations and Achievements
Our proudest achievement in this project was the development of an animation technique that precompiled hundreds of CSS-based keyframes. This innovative, though unorthodox, approach involved calculating the motion of elements based on the animator's hand-animated sequences and then encoding these movements into CSS keyframes. This extra step was crucial—it provided mobile browsers with animation hints that could be used for hardware acceleration, significantly enhancing the performance and fluidity of animations. This technique has since gained widespread adoption, testament to its effectiveness and efficiency.
We moved the agency from vanilla HTML with packed javascript and Compass/SCSS to a full ReactJS stack for building components. This provided a clear pathway for the content management system aspect as well -- the site is headlessly fed data from Drupal. Our components were designed to fetch data from JSON outputs generated by a content management system, ensuring dynamic content delivery and seamless user experiences. In addition, it was also a teaching tool for demonstrating the power of advanced animation techniques such as SVG path masking and 3D CSS transformations.
Collaboration and Budget Allocation
An interesting aspect of this project was the allocation of the budget. Approximately 38% of the overall project budget had been utilized by the time we reached the state of the project visible at the above URL, which was not yet the project's final form. The remaining budget was primarily invested in guiding our agency partners through the intricacies of our technology stack, choice by choice. This was, we think, the main reason Valvoline asked us to be involved. This collaborative effort, while substantial, proved invaluable, as evidenced by the project's recognition within the industry.
It's worth noting that a significant portion of the project cost—about 60%—was dedicated to tasks around side-by-side demonstrations and really trying to dial in device-specific optimizations. Our agency partners spent a lot of time doing side-by-side implementations to be sure there wasn't a better approach than our initial approach due to the difficult nature of balancing features, speed and the tradeoffs that come from different choices.
Conclusion
In conclusion, the Never Idle project for Valvoline was more than just a showcase of technical prowess; it was a testament to the power of collaboration, innovation, and the willingness to explore unconventional solutions. The project not only achieved its goal of engaging users in a novel and immersive way but also served as a learning platform for all parties involved, demonstrating the potential of advanced web technologies and creative problem-solving. Our journey with Valvoline and its agency partners highlights the importance of understanding and appreciating the technical intricacies behind crafting extraordinary digital experiences.