As the global leader in smart, healthy and sustainable buildings, the mission of Johnson Controls is to reimagine the performance of buildings to serve people, places, and the planet. With the recent opening of its OpenBlue Innovation Center within its North American Headquarters in Glendale, Wisconsin, Johnson Controls’ customers now have access to an extremely powerful, high-tech learning center dramatically showcasing its holistic business approaches – and their real-world impacts.
Johnson Controls commissioned creative strategy, branding, and experiential marketing agency Hyperquake to lead the highly ambitious design and architectural development of the new Innovation Center. Hyperquake’s leaders including Managing Director of Storytelling John McDaniel chose award-winning immersive multimedia company Fivestone Studios to develop the Center’s high-profile interactive elements and original storytelling content.
“At Hyperquake, all of our design decisions, from architecture and experience design to tactics and content, are driven by our customers’ narratives,” McDaniel began. “After collaborating with Johnson Controls on its storyline, we created an experience journey, concepted each tactical storytelling moment, and developed the content strategy and framework. We then turned to our trusted partner Fivestone, to bring our concepts and the Johnson Controls story to life with their creative use of technology and interactive design expertise.”
According to Fivestone Creative Director Ron Edelen, McDaniel’s initial briefing illuminated designated concepts for several of the Innovation Center’s spaces, where specific interactive installations were suggested. Fivestone’s assignment was to craft all the underlying programming and content, while also designing and building the digital storytelling experiences. Well-known for resolving giant-sized storytelling challenges using emerging technologies and patent processes, the firm’s multidisciplinary leaders for this project also included Executive Creative Director Traylor Woodall, Director of Innovation Justin Eslinger, and Producer Jennifer Bonior, among many others.
Working closely with Johnson Controls’ leadership, Hyperquake devised a comprehensive visual design system unifying the brand and its key narratives. This guided the Innovation Center’s architecture and overall design, while also providing a clear story and framework for Fivestone to explore in its content and installations.
For Fivestone, Edelen described a critical first step in the team’s approach to organizing the Innovation Center’s storytelling system: “In every touchpoint where customers interact with Johnson Controls’ content, our goal was to allow them to easily access the company’s vast product and service offerings. To facilitate this, we began by grouping products around building types, then organized product offerings down to system and application levels.”
Edelen continued, “Developing our content accordingly to represent applications ranging from building exteriors to environments to interiors, our multi-screen, interactive touch experiences are also mapped to product hotspots throughout the Innovation Center. This groundbreaking work unleashes an unprecedented depth of customer conversations around product associations in every setting imaginable.”
The center’s interactive installations pull from a centralized Content Management System (CMS) that is now managed internally by Johnson Controls. Fivestone designed the underlying software architecture and collaborated closely with Electrosonic for AV/hardware integration on system architecture.
3D Globe of the Future, Interactive Vision Book, and More
Two key installations where all of the vast technological expertise comes to life are the interactive 3D Globe and the projected Vision Book installations. For the first, Fivestone’s large format, real-time interactive globe explorer provides the perfect platform for mapping Johnson Controls’ global footprint. The immersive, multi-touch map powerfully showcases the company’s Innovation Centers, customer stories, industry customers, partners, and stand-out net-zero buildings.
The Projected Book facilitates an interactive journey, seamlessly blending the realms of literature, company history, and technology by integrating animated projections onto the pages of a physical book. As readers turn pages, animated images and text change dynamically, creating a captivating visual narrative, educating readers on the company’s commitments to innovation and sustainability.
“This ‘Vision Book’ stands as a testament to the power of merging storytelling with technology to convey a company’s vision for a brighter and more sustainable future,” Edelen explained. Using an RFID tagging system for tracking reader progress, this installation is a co-development with Kubik for construction and logistics.
Behind the scenes, Fivestone’s toolset relied heavily on Figma for wireframe/skeletal layouts, research, subject matter expert interviews, creative writing, and technical diagrams for system design, and for prototyping. With Adobe After Effects used for motion tests, content was largely developed using Adobe Creative Cloud and Maxon Cinema 4D with OctaneRender. React, Node.js, Strapi, and Unity fill out the technology stack, with web architecture written in TypeScript.
Specifically related to the Vision Book, Eslinger cited the use of Unity for previsualization, which helped determine projector distance and Kinect camera setup. Given the amount of layout, media, and textual elements, the team ultimately decided to use React for the front end, and Unity for translating input data.
“This proved useful as we were able to copy elements from Figma directly and rapidly iterate on the design,” Eslinger confirmed. “We utilized Microsoft Azure Kinect for hand tracking and RFID tags for page tracking. Seeing all the moving parts come together onsite was very rewarding – proving how mocking up physical prototypes and previsualization can speed up development and deliver a quality finished product.”
By Edelen’s account, Figma also helped his team easily manage some major design changes. “A critical part of this project’s success was ensuring consistency of design elements across a half dozen interactive installations,” he added. “Figma’s global style and component tools made it possible for everyone to build upon a connected design system, work remotely from across the country, and allow for nimble changes throughout. Halfway through production, Johnson Controls completed a brand refresh. This would have cost a lot of time without the design system practices we employed in Figma.”
“Being part of this vital project for Johnson Controls through Hyperquake and our partners was a great honor,” said Traylor Woodall. “By prioritizing human needs, emotions, and behaviors, we engineer our solutions to captivate audiences while optimizing interaction and engagement. Thanks to cutting-edge solutions like these that exceed expectations, we are finding ourselves at the forefront of immersive storytelling, and we cannot wait to see what happens next.”
Complete project credits are available upon request.
To learn more about Johnson Controls, please visit https://www.johnsoncontrols.com. Additional information on Hyperquake is available at https://hyperquake.com.
About Fivestone Studios
Fivestone is an immersive multimedia studio that leverages design, technology and storytelling to create wonder and drive human connection. Drawing strength from five shared cultural touchstones – Honor, Bravery, Vision, Generosity, and Excellence – our groundbreaking multidisciplinary talents passionately resolve giant-sized storytelling challenges using emerging technologies and patent processes. Learn more at https://fivestonestudios.com: What can we help you create?
