Develop a Forward-Thinking Interface to Streamline the User Experience

Enterprise software platforms are not known for their end-user experience. Often times administrators get buried in hundreds of convoluted screens, options, and menus, making day-to-day management seem impossible. One reason for this is that the User Interface (UI) is often the last part of the platform to be built. As a result of tight release schedules, the UI component of a product is frequently thrown together by a small team to meet a fast-approaching install deadline.

To break the cycle of sophisticated technologies having problematic UIs, HiveIO — a software-defined storage solutions provider — partnered with CoNarrative — an enterprise development and user experience design consulting firm — to develop an interface that can manage an entire data center in just two screens. This quick overview walks through the challenges that sparked the idea of the new UI; the technology requirements that helped it materialize; and the overall design and productization process.

The Challenge

Before the updated UI was introduced as part of the Hive Fabric 7.2 software update, management of the platform was carried out on a host-by-host basis, providing limited cross-cluster visibility into how the environment was running. It was easy to find information, but there was little insight into how one host related to another or how resource utilization on one host related to other hosts in the cluster.

In the past three years, as the Hive Fabric technology evolved, the number of tools and consoles organically expanded to meet customer requirements, solve problems, and provide more information and insight. However, there wasn’t the design oversight to keep these consistent. Over time the multiple dashboards, logins, and tools became cumbersome to manage and understand.

The Design and Productization Process

A rich visualization often starts as the result of a search on a dashboard. During the early design and prototype stages, HiveIO decided to use visualization as the UI core to show the entire data center, allowing the admin to interact with hosts, virtual machines, and users instantly. It was a clear direction in such a dynamic system and remained the best solution throughout the prototyping phase and into the final Hive Fabric 7.2 release.

Moving away from tables and traditional UI constructs was initially challenging, but the concept of a SanKey diagram was settled on for its flexibility and extensibility, coupled with the ability to show large amounts of data and most importantly a depth of insight that has so far been unavailable in most enterprise applications.

Providing the ability to manage the entire data center from a 30,000-foot view, down to the granular detail of individual applications running inside a virtual machine was key to reducing the amount of time an administrator spends on day-to-day tasks. This automatic visibility also allows administrators to make data-driven, intelligent decisions, providing insights into data center optimization.

For example, here we can see the bottom host (highlighted) is idle and has no VMs running on it. This visibility allows the viewer to locate a free resource that could be re-assigned or may point to something more serious such as a hardware issue.

In addition to this, we learned from some of the leading consumer orientated product innovators such as Google, Apple, and Amazon. Hive Fabric was ideally suited for this search capability with a structured document system for storing configuration and metadata about the running system, all available in real-time from the Message Bus. The contextual search was subtly introduced into the application allowing an administrator to simply search for any infrastructure component, virtual machine or end-user instantly.

A variety of other components were used to make the application extremely user-friendly, such as forms and wizards to capture configuration and deploy new pools of desktops in a context-sensitive manner, in addition to tiles for displaying configuration items or areas of the application-oriented to one-time setup. Overall, there are limited controls used throughout the app in order to keep consistency and allow the application to scale in the future.

A small set of patterns were used throughout the new UI to make it simple to pick up and use. Consistency is key in ensuring a good end-user experience by putting information in consistent places through the UI and makes it simple to add functionality in the future as the application architecture is set. These patterns include:

• The left pane is for control, either refining the visualizer or showing the user where they are in a wizard or form.
• The middle pane shows the visualizer, a dashboard or the main content of a form for configuration or deployment.
• The right pane focuses on alerts and information, and once an object has been selected in the visualizer or drilled down in the dashboard, actions can be carried out on the selected object, or more detailed information can be seen through the metadata.

The Technology and Architecture

There’s more to a user-friendly UI than just a visually appealing and thoughtful design. Looking at the technology, to develop the new UI, the overarching programming paradigms used were functional, reactive, and declarative.

Hive Fabric’s UI was built primarily with CoNarrative’s in-house Javascript library “framework-x,” a front-end, state-management framework for React. It was inspired by Clojurescript’s re-frame and was designed after lessons learned from building apps with Redux, MobX, and others.

All application data is maintained by a single, immutable state atom. The view has access to a global, importable “dispatch” function that it can call with an event type and an optional payload. Handlers for each event are registered with framework-x and called when its event message is dispatched. All handlers receive the global state object along with the optional payload from the caller. Handlers may read from any part of the global application state they wish, and may return a new global state value. Importantly, effect handlers can dispatch other events.

All application state available to the view is read from the global “db” object. Typically, there are many transformations between the way the client state is stored and the way the view needs it. Framework-x allows for greater reactive programming ability by avoiding derived values off of the state object. Instead, subscriptions to functions are attached to each component. The benefit of this cannot be understated. When the real-time data from Hive Fabric changes, the client updates the state atom in one spot without transforming it whatsoever. From there, the functional pipelines that derive values for the view recalculate if a part of the data they care about is different. 

Final Thoughts

Replacing an existing UI is sometimes even more complicated than designing from the beginning. People get used to how the current UI works. They have workarounds for the actions it can’t do. They compromise as they learn how the system works. After a period of time, they know their way around, and it feels comfortable. Finally, they get stuck in the mindset of “this can work” or “it’s good enough — we don’t need to change it now.” When embarking on building a new UI it’s important to gather as much information from as many different sources as possible. Including customer feedback; internal team feedback; investigating new technology; and user expertise.

The engagement between HiveIO and CoNarrative was very successful, delivering a new way to manage the datacenter in only two screens and laying the foundation for more innovation in user experience and UI design in the future. For those interested in learning more about the technology components behind the final product, visit www.hiveio.com.

Feature image via Pixabay.