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](http://strapi.io/) 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](https://www.ibm.com/events/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](https://nextjs.org/) 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](https://www.terraform.io/) 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](https://www.ibm.com/resources/activations/backbone-brains)

IBM: Backbone & Brains

An interactive, audio-visual digital experience showcasing the beauty of a business operating at its peak, with the help of IBM IT Infrastructure solutions.

IBM: Backbone & Brains | Le Polish Bureau

Our team partnered with IBM and GPJ to design and develop an interactive, audio-visual digital experience showcasing the beauty of a business operating at its peak, with the help of IBM IT Infrastructure solutions.

Commercial project

Projects

About

Capabilities

Process

We build cloud infrastructures for existing and for new projects. This includes RESTful APIs, CMSes, full back end infrastructures, game servers, real-time services, or server-side data processing, video rendering or Machine Learning.

When it comes to scalability and performance, we trust the leaders. All our solutions are based on [Google Cloud](https://cloud.google.com/). Back end infrastructures hosted on Google provide auto-scaling. This means that no matter how many visitors or users you have, the infrastructure will handle that. You don't have to worry about temporary spikes either. What's more, it results in cost optimisation as well, as the platform stops unused resources whenever there is downtime.

Our solutions involve producs like:
- Google App Engine
- Google Compute Engine
- Google Cloud Datastore
- Google Cloud SQL
- Google Cloud Storage

We also have a proven path to delivering state-of-the-art, customisable CMSes for your products developed on top of [Strapi](https://strapi.io/). Strapi is an open source CMS providing a modern architecture. It has recently [received massive funding](https://strapi.io/blog/announcing-strapi-4m-seed-funding-round) and is a product to stay with us for years. All our solutions are completely agnostic of the front end layer of your application. This means that if you ever wish to update or completely re-build the visual side of your project, you will never have to touch the data or the CMS in order to accommodate.

The data stored in our CMSes is available to your application through RESTful and GraphQL APIs.

We also develop custom real-time back ends tailored for games or collaborative online apps. They are based on WebRTC and WebSocket technologies, which allow your users to exchange multiple data packets per second, avoiding typical latency inevitable with HTTP requests.

A great example of that could be the back end powering Start Wars: Lightsaber Escape, which handled millions of players, each using two devices at the same time, where each pair of their devices was exchanging 20 data packets per second.

Cloud Computing

Ultra-scalable data and processing solutions on Google Cloud Platform. Real-time back ends, privacy-focused distributed Machine Learning and data crunching.

We are a trusted technology partner for startups, agencies and corporate clients. We build prototype-, MVP- and product-grade solutions in the area of web, mobile, Mixed Reality, Machine Learning and Blockchain.

Cloud Computing | Capabilities | Le Polish Bureau

We are specialising in developing tailored, bespoke Machine Learning solutions for various businesses. In our products, we also incorporate state of the art AI components like Google Cloud Vision or Google Text To Speech.

Our Machine Learning know-how can be utilised in all sorts of domains - from creative-tech to gaming, messaging, human-machine collaborative tools, automatic problem solving, data insights computation as well as data acquisition, augmentation and processing.

Where there's data, there's knowledge. It's just a matter of using the right process to get to it.

Chatbots are a great way of automating communication. They can be text- or voice-based and they can live across pretty much any messaging platform. At Le Polish Bureau, we have experience in delivering solutions for:
- [Slack](https://slack.com/)
- [Facebook Messenger](https://www.messenger.com/)
- [Google Assistant](https://assistant.google.com/)
- [Amazon Alexa](https://www.amazon.com/echo)
- Web

Our natural language processing solutions are based on [Google Dialogflow](https://dialogflow.com/), providing highest level of semantic analysis, combined with support of multiple languages and deployment platforms.

A great example is OnePlus: Crackables, where a chatbot we developed was driving an online puzzle contest.

Sometimes you might have a specific need or an idea that you don't necessarily have all the needed data for. And gathering the data by your team will likely take ages. Probably literally.

This is where our Machine Learning data crowdsourcing solutions come to play.

We implemented this approach in order to analyze people's perception of the phenomenon of the northern lights. We developed a custom interactive questionnaire that allowed respondents to group the auroras by visual similarity. A different questionnaire was then asked to match audio to visuals in order to train the AI about "what an aurora could sound like".

Via data crowdsourcing we obtained over 10,000 data samples within just 24h!

There doesn't always have to be a clear scientific task to be solved with Machine Learning though. AI can be used for creative purposes too.

One of these is Neural Style Transfer. A use of AI to generate completely new visuals or audio based on reference style and a target piece to stylise.

Another interesting domain is reinforcement learning. It relies on the ability to run tens of thousands of parallel, sped-up simulations of a usually mechanical task that the AI is supposed to learn. For example, throwing balls to a basked. Without having to be taught explicitly how to do this, an AI can master such task quickly:

Another domain we specialise in is Machine Vision. We are using state-of-the-art implementations from Google to analyse the world around you. We can also implement custom Artificial Neural Networks that are specifically trained to perform a new detection task.

Regardless of what your challenge is, feel free to reach out. Our Machine Learning know-how is likely to apply.

See how we implemented Machine Learning solutions before:

AI / Machine Learning

Data services, custom models, crowdsourcing, cloud training, vision, language understanding, reinforcement learning.

We are specialising in efficient cross-platform native apps development. Applications that require sophisticated, 3D visual content are developed in [Unity](https://unity.com/), while more traditional UI-heavy apps are done in [React Native](https://reactnative.dev/).

Unity is the leading Game Development platform, but it is also perfect for developing native mobile apps that provide 2D and 3D interactions. We have years long experience in delivering such apps across iOS and Android platforms, while ensuring a single, coherent stream of work. 

Such approach not only optimises cost and time, but also facilitates visual and functional consistency across platforms.

React Native is amazing for another reason. It allows to use the same technologies for native mobile apps development as are used for modern web. Contrary to old approaches that were packaging HTML5 websites into UI-less mobile apps, resulting in poor performance, React Native utilises actual native components of each operating system - iOS and Android respectively.

Regardless of the technology chosen, cross-platform mobile apps development ensures optimised cost, time and reduced risk of platform-specific bugs.

Mobile Apps

Rapid and efficient cross-platform development of the highest quality using React Native, from MVP to the final product.

We are specialising in professional, modern web development. This includes web apps, product websites, portfolio sites but also highly interactive, animated, 3D pieces of art.

Our team has years long experience working with WebGL, THREE.js and other 3D tools that are necessary to achieve stunning 3D online experiences.

PWAs are highly-optimised web apps that load quickly, support offline access (to an extent at least) and, for example, can be integrated into a mobile phone's home screen similarly to native apps. We develop them in React and we use Service Workers to provide the offline functionality.

We work with WebRTC and WebSocket technologies to implement massively-multiplayer online solutions that respond to user's input immediately.

An example can be the work we've done for Star Wars: Lightsaber Escape, where we allowed users to control a lightsaber with their mobile phones.

We design and develop entire projects, but we are also happy to work on a component basis, whenever your find a challenging aspect of your idea that needs dedicated help.

See an example web project we helped deliver below:

Web Development

Interactive web development using React and the latest tech. Server-side rendering, SEO and performance optimization.

We develop solutions in the area of Augmented Reality, Virtual Reality and Mixed Reality. These include mobile apps using ARKit and ARCore (iOS and Android respectively), as well as PC-based or standalone experiences using AR and VR goggles, like HTC Vive, Oculus Quest or HoloLens. We also specialise in social AR effects, for Facebook, Instagram and Snapchat.

Social platforms like Facebook, Instagram and Snapchat are just the right environment for Augmented Reality. They already have millions of users and they are intended to share and communicate. AR can extend the depth of communication through augmentations that are fun, expressive or even productive.

We also build completely bespoke, native AR apps that can offer much more robust experiences. One of the examples can be the JFK: Moonshot app that we helped develop.

Augmented Reality can also be accessed on the web. We use [Zappar](https://www.zappar.com/) and [8th Wall](https://www.8thwall.com/) technology to deliver marker-based as well as marker-less solutions online, without the need to install or download any app.

See one of our recent AR executions below:

AR / VR / MR

Social AR, Facebook, Instagram, Snapchat, iOS, Android, ARKit, ARCore, MS Hololens.

Capabilities

Cloud Computing

Overview

Infrastructure

CMS

Real-time solutions

Case Study

In collaboration with

Project