Reworking LoyJoy’s BPMN Process Editor

During the last few weeks, I spent much time developing the new process editor for LoyJoy. The ultimate goal was to develop a process editor that is easy to understand for non-technical people. At the same time, it should respect the BPMN standard to allow people to create more complex processes that suit their business needs. Strategically, this is a huge step for LoyJoy as it simplifies chat creation for its customer. It takes process creation to a new level.

‍

The Previous Process Editor of LoyJoy

To understand why the new process editor is such a big deal, let me briefly introduce you to LoyJoy’s previous process editor. As it was mainly driven by linearity, a chat in LoyJoy simply was a sequence of modules.

The Previous Process Editor of LoyJoy

To enable individual conversations and allow the chat to react to user answers, LoyJoy introduced the concepts of variables and jumps early on. While the former is a BPMN standard, the latter on the other hand, was implemented to meet our customers’ needs as soon as possible and has proven itself for many years. A third concept introduced to the LoyJoy platform were conditions, which act as traditional control flow statements known from imperative programming languages. Simply put, a module is only executed if and only if certain conditions are met and can be declared on the module itself.

To sum up, in LoyJoy, the triad of variables, jumps, and conditions can be used to effectively create virtual independent branches. Want an example?

‍

The New Possibilities of the Editor on the Example of an Insurance Company

Consider for example an insurance company that offers home insurances. A chatbot on its website might ask if the customer already has home insurance. If the customer already has insurance the chatbot might end. If not, the chatbot might ask whether the customer has his own house or a rental apartment. Based on the customer’s answer the chatbot might offer different products. In BPMN, this can be modeled with the following process model.

Example Process Model

‍

In LoyJoy however, this process required the triad of variables, jumps, and conditions. Take a look at the following process, modeled in LoyJoy using the old process editor. Conditional jumps made it possible to execute virtual branches on a process.

‍

Insurance Example in the Old Process Editor

Should be easy to understand what’s going on here, shouldn’t it? Obviously not!

The previous process editor of LoyJoy was not suitable for these kinds of use cases. It did not provide any visual feedback on how the chat flow is actually evolving during the process. Hence, modeling and maintaining these processes was a really hard task. LoyJoy’s first order principle, namely that a process needs to be as easy as possible, ran into limits. As this ultimately led to processes that can only be modeled linearly.

Introducing LoyJoy’s New Process Editor

When I started developing the new process editor it was clear to me, that the principle of linearity must come to an end. It must allow a process to grow horizontally, thus providing visual assistance. Hence, gateways like the Exclusive OR (XOr) known from BPMN need to be part of LoyJoy’s process engine. Following the BPMN standard, it is modeled as a turned square filled with an X.

‍

the Exclusive OR (XOr)

Hence, as soon as the first condition on an outgoing edge is met, the flow exclusively executes the respective branch. Since we strive to follow the BPMN standard, much of what is needed for the conceptualization was already implemented: Variables and Conditions.

The implementation trick in LoyJoy was simply to let a XOr be a process module like every other module and arbitrarily nest modules in order to create branches. This way, customers do not need to learn new concepts but simply let them apply their knowledge about LoyJoy to model processes by drag and drop.

The Insurance Example in LoyJoy’s New BPMN Process Editor

‍

In summary, the new BPMN process editor now makes it much easier to model and maintain larger business processes by providing visual support. Coming back to the previous insurance example modeling this process in LoyJoy is now an easy task.

‍