IBM: Backbone & Brains

2020 was a turbulent time for many businesses, challenging their organization’s security, flexibility, and reliability.

This digital-first experience demonstrates how IBM can help businesses harness the full power of their IT infrastructure, so they can increase resiliency in a time of global disruption and prepare them for whatever comes next.

The client was looking to develop something that felt unique and distinct from all their other digital activations, from a look, feel and narrative perspective. The challenge was to push the look and feel as much as possible while still remaining within IBM’s well-defined and closely adhered-to design language. The end product pushes the brand into new territory while still remaining on-brand and in line with the larger family of digital activations.

Though the products and solutions are very tech-heavy, complex and technical (infrastructure solutions/servers/IT architecture), we wanted to appeal to the more human side of the products and brand, and connect with users on an emotional level. Which was the driving force behind the name and approach of ‘Backbone & Brains.’

The gem structure itself has a very organic, warm, ‘of the earth’ tactile quality while also feeling innovative and futuristic. The language and storytelling were also built to be conversational, casual, and free of buzzwords. The music and sound design also drive this sense of humanity. The editorial section provides more detailed, technical specs and education to complement the more abstract, high-level main experience. All pieces and parts work together to create a welcoming environment that builds intrigue rather than going for the hard sell.

Use of light/shadow/illumination: The central avatar of the experience – “the gem” – is designed to represent two distinct but integrated elements (backbone/infrastructure and brains/expertise) that come together to support our audience’s business. There are some details and nuances that were employed in the experience to demonstrate the integration of these two parts. One standout feature/element is the use of illumination to represent the ‘brains’ at the core of the gem, which is a nod to the talented IBM consultants and experts who bring these products and capabilities to their audience. As the user interacts, they’ll see glimmers of light shining from the core and reflecting across the gem’s surfaces, showcasing this constant support of people–always there to help guide customers and answer any questions they have about these infrastructure solutions.

Background textures and easter eggs: Within the main experience, users can choose to explore all 3 products/solutions or just focus on specific ones. If they decide to explore all three, there is a detail right before they transition to the editorial section that reveals subtle textures of the product they selected up front within the background – a nod to the exterior details of each server and storage product. This is only visible to users who explore all three products within the main experience, as a way to transition them from the abstract 3D portion to the more concrete 2D ‘deep dive’ (featuring the actual products behind all these capabilities), so it is a bit of an easter egg moment.

To turn this ambitious vision and design into reality, we developed a responsive HTML5 experience hosted on auto-scaling IBM Cloud Foundry. The three-dimensional part featuring the gem was powered by WebGL and the Three.js framework, while the deep dive editorial content as well as general user interface were written in React and styled-components. The structure of the website, all copy, images and several configuration options are controlled by an underlying CMS developed with Strapi.

The web experience pushes the boundaries of what’s possible on the web in multiple ways. In order to push performance to the maximum, we used Next.js with incremental static regeneration (ISR). It made the initial page render of our CMS-driven website pretty much instantaneous while allowing for quick content edits and improved SEO.

The majority of the 3D visuals were generated programmatically. The gem, being the main character in the story and a basis for all three mini-games, used a single base 3D model exported as .glb from 3ds Max. All its shape variations were generated programmatically - we converted the model into a single BufferGeometry at runtime with fragments managed by GLSL shaders to animate its smaller pieces.

To achieve smooth 60 FPS rendering of all the effects and animations across a wide range of devices, we combined a large number of GLSL shaders into a single rendering pipeline, using a single canvas. We developed a post-processing pipeline consisting of 3 scenes and 5 EffectComposers. The first Scene and EffectComposer were responsible for the generative background with GLSL shaders for occlusion, saturation, brightness control, and lighting effects. The second Scene and EffectComposer handled strobe lights with GLSL shaders of glow and luminosity. Next scenes and composers handled tasks like blending other scenes, the gem’s volumetric lighting effects, mini-games rendering, animated gradients with noise and screen-space ambient occlusion (SSAA) to give extra sharpness to the final render.

Despite its highly creative and interactive style, the IBM: Backbone & Brains website's content is largely editable and configurable through a CMS.

Our team has implemented a bespoke solution based on Strapi and has customized it to the project's needs. Not only the copy, instructional prompts, and case studies were editable, but also technical aspects of the experience like supported device parameters, minimum frame rate, or browser versions required.

With the experience premiering at IBM Think, we needed to ensure that the hosting infrastructure can endure extreme traffic spikes. With that in mind, we have set up an autoscaling server on IBM Cloud Foundry. But we haven't stopped at the platform. We have also implemented Incremental Static Regeneration (ISR) with Next.js that allowed us to combine the benefits of server-side rendering for optimized SEO and quick loading times with the flexibility of live website control through the CMS.

At Le Polish Bureau we implement the Infrastructure as Code paradigm. Instead of manual server setup, we use Terraform to spin it up from code and configuration committed to a git repository. Thanks to such an approach, not only we reduce the risk of human error, but we also improve security.

For example, the database password is generated randomly by Terraform and is set as a secret in Bitbucket Repository Variables, also by Terraform. This means that none of our developers ever see the password that allows for database access, while our Continuous Deployment pipeline is able to read it.

Furthermore, because all the infrastructure code and configuration is committed to git, the infrastructure as code approach allows us to revert breaking changes simply by rolling back to an earlier git commit.

Launched at IBM Think 2021 along with several other digital activations, the story and design/look and feel helped the activation stand out while remaining aligned to the larger IBM narrative around hybrid cloud.

Results:

• 84% engagement rate at Think 2021, exceeding IBM benchmark by 25%
• 84% completion rate at Think 2021, exceeding IBM benchmark by 34%
• This activation also had the longest average time spent, which was more than 3 minutes on the day of the live broadcast, over 2x the cumulative average of all activations.

Experience IBM: Backbone & Brains yourself: ibm.com/resources/activations/backbone-brains