Context
OmniEngage is an omnichannel marketing platform designed to help businesses create, manage, and optimize personalized marketing campaigns across various digital channels such as web, mobile, SMS, email, Facebook Messenger, and WhatsApp. The platform aims to increase customer engagement and drive revenue through targeted messaging and intelligent campaign management
My Role
Team
I worked with a senior designer on the project.
Timeline
3-4 months
Skills Utilized
UI design, Prototyping, Visual design, UX research, UX design
Project Objectives
Improve the overall usability of the workflow builder section.
Simplify the workflow building experience for the new users.
Problems
Our Quality assurance and marketing teams tested the products after every development cycle. We received feedback about some major issues that the teams were facing.
Problem 1 : Too many options slowed the workflow creation process
As the product evolved , it was figured out by the product team that major use cases for the product was to send campaigns and build bots. There were 8 action nodes that were needed for making a campaign workflow and 16 nodes (8 action & 8 trigger) for making a bot. But the user is presented with all 16 nodes on the builder canvas.
When a user wanted to build a campaign workflow, they had to select from 16 different nodes listed on the left side panel of canvas. This increased the cognitive load on the user and made the workflow creation process slower.
NOTE:
A node is a workflow component that performs a specialized function such as sending an email or using an API to fetch some data.
A trigger node is a workflow component that initiates an automated seqence of actions in a workflow.
An action node is a workflow component that executes a specific task or a set of tasks in a response to a trigger event such a sending an email after a user provides an email address.
Problem 2 : Inadequate space for entering and editing content
Each node values could be edited from the editor that opened on the right side of builder canvas. While many nodes did not require entering long content , some nodes such as send email, send SMS, WhatsApp and condition node needed entering of long content and had complex configuration options.
The space provided for entering email content seemed inadequate to the users. The internal teams also expressed the need for basic text editor so that user could select different fonts and align the content.
Solutions
Our design team worked in close collaboration with product and marketing teams seeking feedback on the designs as early as possible. This helped in faster iteration helping us deliver improved designs within deadlines.
Solution for problem 1
One of the early solutions for simplifying user journey was to introduce a switch button between that allowed the user to switch between web-bot and campaigns. As trigger nodes were not applicable for campaigns, so they were not shown to the user on the canvas.
Further exploration
The decision to add a switch button seemed right at that stage during the design process. On further exploration, we discovered that user still need to be educated about the type of workflow they want to make.
We observed our competitors and noted how they were solving this problem. We gained the following insights from our research on other similar platforms in the market.
Insights
Segmeted offerings
The competitors have strategically segmented their offerings into different options such as WhatsApp, web, Instagram and messenger before users initiate the workflow building process. This helps the user what things they can achieve with builder.
Reduced cognitive load
After a user selects a specific workflow, they are directed to the builder where they are presented with various building options related to the specific workflow only. This reduces the cognitive load on the user by showing them only specific building tools for each type of workflow.
I developed another solution based on the insights. So in this case, whenever a user wanted to make a new workflow, they were asked whether they wanted to create a campaign or a Bot.
One more iteration
After several iterations, I made another design where the user could reach the builder from dashboard in single click. This design was finally selected and sent for development.
Builder screen after user selects to create a new campaign
Builder screen after user selects to create a new bot
Solution for problem 2
The second problem related to inadequate space for entering content had a straight forward solution. I just increased the overall width of the whole node editor section. It solved the problem to a large extent.
Other notable changes in the design included a button “Generate with AI” that helped the user write content with support from chatGPT by entering a short prompt. The user could now format the text with the introduction of text editor.
New solution leads to another problem
So whenever a user was working with long workflows , their view was obstructed by the node editor. So the whenever the user needed to refer the full workflow , they needed to close the editor and then view the canvas.
Keeping the flow vertical
This time I tried to use the existing elements on the builder canvas to guide the user about the flow. I introduced a flow list inside the node sidebar. This flow list showed all the nodes in the sequential order used by user in the workflow. This helped the user get a quick summary of how many nodes were there in workflow and what was the order of nodes.
After introduction of wider node editor , there was strong feedback from the internal QA and marketing team for improvements in node layout. The current horizonal layout for the workflow was not working well for marketing team.
Hard work for the development team
The decision to keep the layout vertical seemed simple to implement at first. But there was a strong barrier in executing that decision. The reason was design of node element where flow connector were provided at the left and right ends.
To make the layout vertical , the connector need to be position at the top and bottom of nodes. The development team had to spend a lot of effort while doing this that led to delay in shipping the project.
Final designs for vertical workflow layout
Creating a basic workflow for a bot (Prototype video)
Key takeaways
Balancing usability & development constraints
Sometimes the designer has to make a trade-off between usability and constraints related to development. While a particular design decision may improve the usability of an interface by 10% but may increase the development costs by 50%.
Collaboration leads to faster progress
The project could not have been successful without constant feedback offered by development , QA and product teams. Healthy discussion with different teams led to many breakthroughs that eventually shaped the latest designs.
Iteration is the key
The more I worked on past designs to improve them, the greater I realised the value of iteration in design. Any solution that may seem relevant at any particular stage of a project can become irrelevant and ineffective after the product evolves. So designer should always be ready to improve and refine his original ideas through iteration.