The J2 Innovations' blog

The home of smart buildings, smart equipment and IoT

How Magic Bubbles Elevate the User Experience

2025 Blogs-4

One of the most compelling features in FIN Framework, specifically in our graphics app, is a powerful user experience widget I affectionately call Magic Bubbles. It was originally developed as a way to solve the challenge of a one-size-fits-all graphics solution commonly found in BAS software. Magic Bubbles features an intuitive widget that appears contextually, adapting its functionality based on what you select on the screen. As your focus shifts, the widget intelligently updates to display relevant applications.  

As part of the overall end user experience, the Graphics App and the corresponding Magic Bubbles create a flexible and dynamic flow that enables operators to navigate from one application to another seamlessly with just a few mouse clicks.

See it in action in our End User Apps video below.

 

The power of Magic Bubbles

In a typical smart building user interface, there are multiple levels of navigation with an overview map, building elevation, floor plan, and equipment graphics. Each of these types of graphics has its unique use cases and type of information displayed. The power of Magic Bubbles is that based on the context of where the user is focused, the widget dynamically adjusts to match these common scenarios (without any configuration or additional engineering).

For example, on the overview map that typically displays buildings or zones, the user can click on a building and the resulting widget will display a series of bubbles. The large bubble at the bottom is there to instantly navigate you to the selected building. 

In addition, there are a series of smaller bubbles to navigate to other related applications in the same context. For example, the Summaries bubble will run a query and provide a table of all of the points and equipment found in that building. 

Map

As we navigate down to the building, we are presented with an elevation showing the individual floors that we can highlight and click on. The resulting Magic Bubbles at this level introduce some new applications that are typically used in this context. There is a bubble for the Alarms app that will pop up a mini app on the right side to display a list of alarms for the context of that floor. This helps keep your view relevant to your current context, reducing the list of alarms to only what's important. 

In addition, it is common to launch the Notes App to get a view of messages related to the context of that floor. For example, during operations, set point changes and abnormal conditions can be added as notes by users of the system. With just one mouse click, the operator can get a pulse of what's going on in the building operationally.

Building

Finally, as we arrive at the floor plan, the outline of zones or areas provides the ability to focus on specific pieces of equipment. The Magic Bubbles at this level provide the most rich set of options, accumulating all the previous apps and adding some floor plan/equipment specific new ones. A common operator task is to edit zone and room names as tenants come and go, typically this requires full graphic editing tools and training. With FIN, there is a Magic Bubble that launches a pop-up description editing tool. Now end users and operators can modify room names easily, which will be reflected both on the graphics and navigation.

Now that our context or focus is on an individual piece of equipment, there is a Magic Bubble made just for technicians called Point Graphics. Simply click to see a mini app on the side panel showing all the inputs, outputs and set points graphically for the equipment. It even works great on a tablet and a mobile phone for troubleshooting on the go. 

This Magic Bubble really show the power of metadata by querying the equipment points. The Schedule App will appear on the right side panel of any of the points are linked to a schedule. Even better, the actual schedule that is controlling the occupied point will be displayed and editable.

Floor

Magic Bubbles offers a responsive widget that automatically displays relevant applications based on your on-screen selection, ensuring the right tools are always at your fingertips. The magic happens not through AI but through intelligent user experience design.

Learn more about our intuitive features in FIN Framework here. 

B. Scott Muench

Scott joined J2 Innovations as a partner in 2011 and is now Vice President of Knowledge Excellence. He has a wide range of responsibilities, including evangelism, business development and training. Scott is well known as an industry expert in smart homes and smart buildings. He is a past president of ASHRAE, and is currently a board member for Project Haystack. Scott attended Clarkson University for Mechanical Engineering and graduated with a BS/Business in Organizational Innovation.

View all articles

Topics from this blog: End User Smart Buildings FIN Framework Technology Industry Dashboard Building Automation System Democratization BAS

Back to all posts