Responses by Florent Biffi, developer; Ruud Luijten, developer; Damien Mortini, WebGL developer; Clément Pavageau, art director; and Seth Shukovsky, chief executive officer and creative director, Little Red Robot.

Background: Every second year, General Electric (GE) surveys the world’s most inventive leaders about the future of innovation. The Global Innovation Barometer 2020 (GIB20) website showcases this 50-page report full of complex and abstract data on innovation into simple, fun moments through meaningful interactions using video and photography; heavily art-directed, abstract 3-D animations and illustrations; and WebGL. Its target audience is primarily business executives, but it’s really for everyone interested in the future of innovation.

Design core: The site’s core feature is definitely the section’s introductory scrolling feature. Uncovered through scrolling through this bit of interactive WebGL, visitors discover the main themes of GIB20 before diving deeper into them. The WebGL background represents abstract, stylized waves of innovation, always in movement and constantly evolving. The design of the site reflects the General Electric identity as well. To avoid having something that felt too corporate, we chose a bold, fun design language through stylized 3-D illustrations and animations. It was also a good way to make all the data more understandable and fun to interact with.

Favorite details: First, this wasn’t what we considered a commercial opportunity. Sometimes it’s difficult to get clients to be brave when the subject matter is more business-goal oriented and doesn’t have a young or modern demographic, per se. But that’s where GE is a brave client—the kind we love—and trusted us with the design process to deliver something that gets positive feedback, which is what GE has reported to us.

Second, this is a vast amount of information that we had to translate into a worthwhile experience, one that sustains interest for the length of time it takes to go from beginning to end. Most websites have a much more limited amount of material they must convey, knowing the average user probably spends one or two minutes on a website. Luckily for us, the data shows a lot of visitors completing this experience. Hopefully, this is a reflection of the way we developed the site—to be very immersive and create something unique for each moment.

Challenges: The data was gathered just around the beginning of 2020. We started to get the design and development going in February to launch in March. Then, all of a sudden, COVID-19 hit; basically, everything came to a screeching halt from our client. The data became almost obsolete overnight, and the tone of the world—and certainly of the January 2020 data—was historically changed. Unfortunately, at that time, nobody knew how it had changed yet. So we sat and waited until October 2020 before we began to see a way forward, which involved taking new samples of data from many of the people originally interviewed. Then, we had to design a way to utilize this new data gained from the time of COVID while still finding value and tie-ins from the original data—and some of our original designs.

Time constraints: Waiting and watching from a project paused due to COVID-19 was crazy unimaginable. Back in March, we were ready to release the site; when we finally picked it back up in October, our client wanted to move quickly but also see how much value we could deliver with reassessing anything previously developed that was still relevant.

Divergent paths: No coronavirus ruining everything would have been nice. But in all seriousness, this campaign did get some additional relevance from integrating pandemic learnings into the state of global innovation—as it’s more important than ever. The data is some of the only of its kind to emerge at this point for the state of innovation in the world changing so drastically, eternally and rapidly from COVID-19.

Navigation structure: All the data had to be easy to access for each visitor, most of them being business executives not necessarily familiar with unusual interactive design practices. Therefore, we couldn’t go too crazy on the navigation concept. We chose to stick with common, intuitive interactions to navigate through the experience. The custom cursor plays a massive role in it as it guides visitors through each interaction required, like dragging a graph or spinning a WebGL data globe.

Technology: Photoshop, Illustrator, After Effects, Cinema 4D, Blender, JavaScript, GLSL, WebGL and three.js. For the front end, we used Vue.js in combination with native web components. With this setup, we were able to implement the WebGL blocks as standalone components. We used GSAP for the more complex animations.

Special technological features: We made the 3-D elements using native web components. It enabled us to separate our work and to naturally manage them as dependencies. Some of these components use three.js—some don’t—and everything is loaded accordingly and fits nicely together. Most of the models and textures are baked in Blender and loaded with DRACO and BASIS compression. That saved us a total of 90 percent on asset size.

For the more technical geeky stuff, you can check out this Twitter feed from Damien Mortini, our WebGL developer!