Workflow Creation Redesign by Emiliano GonzalezWorkflow Creation Redesign by Emiliano Gonzalez

Workflow Creation Redesign

Emiliano Gonzalez

UX Designer

Product Designer

UI Designer

Figma

Sketch

Redesigning the Workflow Creation Experience

Overview

Workflows are a series of steps –represented with visible balloons for the end user– that are placed on top of the application it is installed on. The main intention is to help its users to navigate and complete their tasks and processes without friction.

Apty’s Workflows tool is undoubtedly one of the main and most important features of the product.

It was the first ever released tool and it is central to every other feature developed afterwards.

The challenge

Among the array of tools in the Apty suite, Workflows is definitely the most convoluted at the time of creating content because of its inherent complexity: Rendering balloons on top of any application without requiring API access (just by relying on the DOM of the application).

Combined with the fact that over time, a plethora of new features and enhancements was added to the tool, the simplicity of creating Workflows was affected.

Creating Workflows is not an easy task!

The Solution

The redesign of the Workflows' tool centered on simplifying and enhancing the user experience.

The objective was to make the creation and editing of content intuitive, enjoyable, and frictionless, allowing users to prioritize content creation over navigation or logic-related issues.

One Click Record Mode

Initiate the recording effortlessly, focusing on selecting elements and creating the flow without worrying about Workflow settings or configurations.

Fullscreen Application for no distractions

Preserve the native aspect of the underlying application, ensuring that creating a Workflow mirrors the end users' intended experience.

Adjust properties easily

Enable easy access to and adjustment of properties for each step, providing flexibility to the Content Creator.

Edit content on the fly

Facilitate in-line editing (WYSIWYG) during the recording mode, enhancing the content creation process.

Flowchart visualization mode

A re-engineered rule engine was provisioned to allow the creation of dynamic Workflows, represented through an improved flowchart view for better process understanding.

Fullscreen studio

A fullscreen Studio was redesigned from scratch to allow visualizing and working on content more comfortably.

Balloon Preview Mode

Provide a comprehensive view of the Workflow, offering features like inline editing, real-time theme changes, multilingual preview, and offline content editing.