Vel Studio
Product design, UX/UI
Role
Product Designer
Team
Product Team @ FogHorn
Duration
2022-Ongoing
Overview
VEL Studio is a visual, browser-based platform for authoring and debugging “Solution” workflows in an intuitive low-code / no-code environment. (“Solutions” are pre-built packages based on common use cases, e.g. site safety, flare monitoring, energy management, and asset health.)
A “Solution” was FogHorn’s name for pre-built packages based on common use cases, e.g. site safety, flare monitoring, energy management, or asset health.
The problem was that the process of building a Solution—which entailed data ingestion, data cleansing and processing, analytics insights, machine learning predictions, and publication—could be time-consuming. To create a Solution, operators were required to step across multiple table-based pages, and to maintain an abstract sense of a Solution’s components and dependencies.
This task could be daunting even to expert users.
ℹ️ FogHorn Systems was a leading developer of industrial and commercial applications optimized for industrial edge environments with limited or no network connectivity. FogHorn was acquired by Johnson Controls in January 2022.
Mission statement
To reduce complexity around Solution creation, to enable users to see how their Solutions worked at a glance, and to provide them real-time debugging tools without the need to leave the environment.
Creating a Solution the old fashioned way
Goals
To create a visual, tactile workflow that users would find intuitive to use, and provide all the tools they would need in a single environment.
- To make Solution creation less time-consuming, and require less cognitive load
- To allow the user to remain focused on the act of building rather than navigation and abstract management
- To allow the user to configure and scale their Solutions in a visual way
Who is our targeted user?
Technical users who already knew how Solutions worked. These users were familiar with the underlying components that make up a Solution, and were well-versed in building them manually.
Challenge overview
To improve the ease with which users could build Solutions was deemed the highest priority, with little associated risk. Since the existing methods for Solution creation would continue to be available, there were no concerns that users would be trapped in unfamiliar territory. The design of the new system would be guided by expert users all along, and the onboarding could happen at their desired pace.
The “Solution” solution
Leveraging workflow analysis and user behavior insights, including ongoing interviews, we identified how users were already using Solutions, and the pain points involved with creating them. We also evaluated the features and functions users felt were lacking in the current environment.
As a result, we conceived a new object-oriented approach to Solution building that would provide users with an instant overview of their Solution and all its components. In-line debugging tools would give users the ability to step through time to spot problem areas immediately. In addition, users could speed the process of Solution building by starting with a wide range of pre-built templates, or author workflows from scratch using the available library of standard, customizable blocks.
New concepts, an exploration
My process
I had the privilege of collaborating with a cross-functional team of seasoned colleagues, across continents, and almost entirely remotely.
In my role as the product designer, I shaped the design vision while working closely with the project manager and the engineering lead. Together, based on user workflows, we crafted the overall look and feel, as well as the interaction models, and a design system to support a comprehensive family of bespoke components. From wireframes to prototypes, and through to completed mockups and asset delivery, my responsibilities encompassed the entirety of the visual experience.
User research
Throughout the planning, design, and execution of the product, my team actively engaged with internal and external stakeholders, to incorporate qualitative feedback into every stage of the implementation. Their invaluable guidance was key to ensuring that the workflow and the tools met their exacting expectations, based on their existing deployments, and the challenges they faced on a daily basis out in the field.
Understanding what users needed enabled me to spearhead this paradigm shift to a dynamic, interactive environment, using customer insights to iterate on each concept, and to test them on a continual basis by the user’s side.
Getting started with VEL Studio
A new experience
I designed the interface from the ground up with the idea of an open canvas with the tools and features arranged around it, like existing composition and art tools. This approachable layout gave the working environment a sense of familiarity, and also allowed us to offer a myriad of tools without cluttering the user’s view.
The block library offers a selection of standard and custom Solution building blocks
The simplicity and intuitiveness of the visual editing experience reduced the complexity of the underlying tools and technologies, and simplified the overall development of the Solution workflow. And right from the start, users could find support with the built-in contextual help, inline guides and guided tours, and integrated documentation, all easing adoption.
The integrated debug tool features a prominent live timeline view
An integrated debug mode helped users to validate and troubleshoot their workflows using simulated production data. The most prominent feature was a live timeline viewer, which provided a direct view of the workflow in operation over time, so users could observe whether it was behaving as intended prior to deployment.
Mapping out features and dynamics
Impact
While our users worked in high-security environments—we didn’t get detailed quantified insights such as increased sales—their glowing feedback made up for that. Not only were they adopting our new platform, but the ease of use started to yield Solutions of much greater complexity than was feasible previously. In addition, the visual system improved their confidence in their Solutions, and trust that our team was highly responsive to their needs.
VEL 2.0 also made waves beyond our users. Seeing the positive reaction we were getting from our users, executives and product managers started looking for ways to incorporate our design thinking into unrelated projects.
Overview of the new VEL Studio
Lessons
This experience offered me great insights into methods of empathizing with our users’ understandable aversion to change. Rolling out the new system beside the legacy one allowed us to reassure users that every feature would remain available and accessible as they acclimated to a new environment.
This project also underscored that design is just as much about how a system works as it is how it looks. By understanding key concepts like user intent and component dynamics, we were able to provide a new platform vision without compromising on user expectation, or functional capabilities.