May 14, 2024
As part of the Version 3 release of ScaleOut Digital Twins, we’re proud to announce a complete redesign of our web-based user interface for managing digital twins. In this post, we’ll explore the new and expanded capabilities of the updated UI. We’ll also take a behind-the-scenes look at the design process, the challenges we faced, and the technologies that power the UI.
ScaleOut Digital Twins (SDT) is a platform for real-time monitoring and predictive modeling with digital twins. Users can host hundreds of thousands of digital twins with SDT’s scalable, highly available in-memory computing platform. These digital twins can analyze live telemetry from devices and assets. They can also implement large, time-driven simulations. In addition, SDT offers open-source APIs for building digital twin models. ScaleOut Digital Twins makes it easy to track and model large-scale systems, such as logistics networks, smart cities, security systems, healthcare systems, and more.
The ScaleOut Digital Twins UI provides a convenient way to use the SDT platform without needing to use the command line or write complicated scripts. Some things you can do with the UI are:
The UI can run on-premises or in the cloud. It’s bundled with the main SDT installation, so there are no extra steps needed to install it. The UI also supports user accounts and admin features, so multiple people in an organization can access it collaboratively.
As we added sophisticated new features to the ScaleOut Digital Twins platform, such as simulation and message recording, we found ourselves needing to expand the UI in ways the old design couldn’t easily accommodate. Instead of trying to tack these features onto the old UI as an afterthought, a full-scale reimagining of the design was in order. Also, we thought it was time for a fresh look that matched the experience of the new ScaleOut Digital Twins website.
During the discovery phase of the UI redesign, we identified several key challenges that the redesign would need to address:
A fleet of real-time digital twins can hold many times more data than modern web browsers can handle, and certainly more than a human can keep track of. We needed to present the data in ways that wouldn’t overwhelm the system or the user. We also needed to give people tools to find key insights in a vast sea of data.
The core interactive features of the UI – widgets and queries – had always been intended to give users a way to monitor their real-time data in the ways that were most relevant to their needs. However, the original implementation of these features was somewhat basic. We needed to make them more powerful and customizable, giving users greater control and flexibility.
If you’re trying to manage a smart city, an airport, or a network of hospitals, the last thing you need is a confusing, complex user interface. Our initial heuristic evaluation of the legacy UI revealed several areas for improvement – including inconsistent controls, use of jargon, incomplete instructions, low readability, and an unintuitive menu structure. We needed to reduce the friction in these areas to allow users to focus on the task at hand.
A good UI design starts with clear navigation. In this regard, we kept the most prominent feature of the old UI – the sidebar – but reorganized it a bit. After adding features like simulation and message recording, the sidebar had started to become a long, sprawling list. To remedy this, we simplified the navigation down to eight top-level links which can be expanded to display their secondary links. We also added a top navigation bar to separate out the actual management of digital twins from "meta” pages like account settings and admin controls.
Because digital twin data can be massive and complex, we restructured the presentation of information to give a big-picture overview first and allow users to “zoom in” as needed. The System page, where you first land after logging in, presents high-level statistics like the number of instances in the system, the simulation status, and number of messages being sent. The Models page shows these statistics for each model. Even more fine-grained information is available by clicking into a model to view its instances. (Previously, instances and models were in completely different sections of the UI). Then, features like widgets and queries allow you to surface the details that are most important to your specific use case.
The UI’s Dashboard page now gives the user the freedom to create a truly custom dashboard layout. You can design your own layout by adding rows of widgets in various sizes. This lets you control exactly how much screen real estate is allocated to each widget. Rows of widgets can be freely reordered or deleted, and the system automatically cleans up any empty rows.
The visual design of the widgets has also been improved. Instead of using arbitrary colors, Widgets now use a refined set of colors in an analogous color scheme. The UI uses Recharts to automatically create attractive charts with built-in tooltips.
In the old UI, queries provided a powerful tool to filter instances, but they were inflexible in several ways. They could only be displayed as a table or a map, not both. They also could not be edited or saved within the system to run again later. Additionally, continuous queries could not be paused; they ran until deleted, using large amounts of system resources.
The redesign makes improvements to queries in all these areas. Users now can save queries and edit them directly in the UI. Geospatial queries can be freely displayed as a map or table. Continuous queries can be paused and restarted at any time. We’ve also upgraded the map to use ArcGIS for a smoother experience, and we allow greater customization of map markers.
In the old UI, the simulation indicated whether it was running, but not its progress. The new UI displays several more pieces of information: the current time in the simulation, the elapsed time, and the completion percentage. This way, if you’re running a lengthy simulation that lasts for hours or days, you can track its progress more easily.
We’ve added several other new features to enhance your experience using the UI. We now display CPU usage so you can monitor your resource use. The UI also supports Dark Mode, which you can activate in your profile. And we have a dedicated Help page that links directly to support, and documentation so you can get assistance whenever you need it.
To go along with the release of ScaleOut Digital Twins Version 3, we’ve redesigned our web UI to give it a fresh new look and improve its usability. The UI now has a more intuitive navigation system and many enhancements to key features like queries and widgets, giving you more control and flexibility.
Give the new UI a try today. Download the ScaleOut Digital Twins V3 Evaluation Package here.
Do you have feedback on the new UI? We’re listening! Please share your thoughts with us here.
