One of the first functionality issues we noticed through our contextual inquiries and user interviews was the zoom function. In the current workflow builder, the only way to zoom in & out is with the trackpad on a laptop or the wheel on a mouse. For users using trackpads, the zoom in/out is smooth, but for those using a wheel, the zoom change is drastic and unhelpful.

To remedy this, we added a permanent sliding zoom bar in the bottom corner so that all users can zoom in or out in a controlled and gradual manner. When zoomed out, some information such as the action of the step is not visible. When the user zooms in, this information becomes legible.

The second aspect of the zoom addition is the magnifying glass tool. This feature allows users with especially large workflows to quickly run through their flow without constantly zooming in and out.

As the user runs their cursor over the zoomed out workflow, a zoomed in version appears next to it. When the cursor is directly over a single step, it becomes highlighted and shows the name of the step.

**See “further iterations” for final version of magnify**

Throughout our contextual inquiries, it became evident that there are inefficiencies present in the import process of the workflow builder that breed confusion. To remedy this, I split the process into two separate paths for the two different types of users, experienced and new. This way, the experienced users don’t have to go through the instruction-heavy, but timely configuration and the new users get a comprehensive, less daunting import experience.

Depending on how many steps are in the template, configuring each one separately can be a time-consuming process for an experienced user and an almost impossible task for a new user. Although the configure process (shown below) may seem like a delay to the ‘meat’ of the product, it walks the user through a complete configuration so that their workflow is fully functional once they arrive at the builder. The goal is that new users feel as calm and capable as possible and that they arrive at their workflow templates in the builder with zero errors. To achieve this, we remove as many confusing options as possible.

Alternatively, if the user is experienced and wants to just have a quick look over the template within the builder, they can fully skip the configuration process and go straight to the builder.

The important distinction that this change makes to the current flow is that it gives both users a route that is designed specifically for them. In the current site, when the user clicks ‘import,’ they are automatically brought to the first configuration page which deals with plugins. However, once they get to the second page, they are presented with the option to skip the rest of the process. To a new user, they may not know how vital the rest of the configuration is, and choose to skip with the hopes that they will save time. However, it is critical that new users fully complete these three pages so they are met with a functional workflow when they get to the builder, so the option to skip halfway is removed. On the other hand, experienced users that would intend to click the skip button are also facing inefficiencies because they still have to go through the plugins page to reach the skip button. That is ultimately why I moved the skip button the dropdown of the import button.

We learned from our meeting with their engineer that the process of creating a magnify function would be extremely time-consuming and costly. In response to this, I found a way to to make the feature more valuable, and thus, worth building out.

Through early user interviews, we realized that it is cumbersome to open and close the side modal (left image) to get detailed information about each step. Knowing this, I decided to gather the most important information from the side modal and add it to the magnify function to completely eliminate the use of the side modal in these cases, ultimately reducing the number of clicks and saving the users time.

To determine exactly what information from the side modal to add to the hover feature, I conducted two additional user interviews and found that, in the late stages of their work, they usually want to check only the input and output of each step.

As a result, the final iteration of the magnifying glass feature both allows the user to quickly scan through their workflow and see the most important information of each step with zero clicks.