Turning a product demo into a Digital Escape Room for IBM Cloud

Project

In a constant state of innovation, IBM Cloud asked us to figure out a way to gamify a product demo for IBM Cloud Pak for Integration. There was a focus on three products to integrate into the game with features that would need to align to story points along the way. The demo experience required utilizing the Carbon Design System and loosely include product UI visuals to keep everything in line with the IBM brand and design guidelines.

Research

There was a vast knowledge gap on the creative team on the product features, and more specifically, how and why it works for developers. So I took a deep dive by getting access to the product suite to walk through and start to make sense of things. The deep dive helped me begin to grasp and understand the audience, products, and solutions involved.

Product research

• App Connect (AppC)
• API Connect (APIC)
• Management Queue (MQ)

Game research

• Current digital escape rooms
• Text-based adventure games
• HTML5 strategy games

Goals

• Understand how the products work and how to set them up
• Generate a few game play scenarios

Synthesis

Interaction flows were needed for each product to guide the storyline script and interactions within the digital escape room. In addition, user flows helped communicate the product features and correlate the benefits of the IBM products to the audience.

Interaction design

Elements of the game could start to come together nicely. However, based on the research findings and newly created user flows, the most extensive priority upfront was translating the research findings into a basic game flow to ensure that the overall strategy was still in place.

The game experience needed to relate to real-world product experience as closely as possible. To do this, I loosely replicated the way a product user would interact with the features showcased without having to take a deep dive. This approach prevents the experience from becoming an on-boarding process and keeps the user focused on the direct benefits.

Now that we have figured out the product UI elements for the game, I started an initial pass at the wireframes and general flow. Purple accents designate where user interactions would occur to ease communication to stakeholders early on. Due to time constraints, the purple accents were an excellent stopgap to communicate the flow of ideas.

Adjustments to the overall layout were applied after a few iterations of wireframes. The key findings were the lack of general game elements (such as time duration, progress, and storing information about the game) and the chat window taking up valuable space to focus on the product features on the right.

Updates made to the existing wireframes based on the new layout are below.

UI design

During the design process, my role was to assist the designer with the small details and ensure that we did not lose usability during this phase.