Designing workflow creation for building internal apps

Appsmith is an open-source platform, meant to help backend developers create and deploy internal applications faster. It utilises a simple drag-and-drop interface for building the apps. Users can write JavaScript to add logic, transform data, and define complex workflows.

Developers drag one or more widgets from the explorer on the left and edit the widget's functionality from the pane on the right.

Once the widget is placed on the canvas, it usually has to perform a task when a user interacts with it. These tasks are referred to as actions. Let’s look at how we would create an action for a Login button on a form:

I was tasked with designing a no-code solution for creating workflows. I worked on this project alongside a PM and design manager.

Internal and user interviews revealed insights that aligned with our hypothesis that there was a need to create a no-code way of adding actions.

We also realized that no-code workflows could be just two steps, as most users creating complex flows would usually knew how to write Javascript.

Looking at the competition, most of them had elaborate workflow builders which we could not and need not replicate because of development time constraints.

Making sense of user interviews with card sorting

I created components for multiple actions that could be used in the widget property pane and designed a way to show multiple callbacks or second level actions (what happens when the first action succeeds or fails) in the app's property pane.

Testing with users revealed that they understood how to use the action selector to create workflows. We fixed minor issues and released the feature.

We tracked how many second level actions were created and noticed an increase in workflows with the introduction of the no-code action selector. We also saw a 62% rise in second level actions (aka callbacks) being created.