Campaign Creation Tool
called as 'Flows'

Campaign Creation Tool
called as 'Flows'

CONTEXT

Yellow.ai is a customer engagement platform for which it offers multiple products. From chatbot creation to agent support to marketing campaigns for your customers, Yellow.ai is a one stop solution.


'Flows' is about how users can create marketing campaigns

ROLE & DURATION

ROLE & DURATION

ROLE & DURATION

Led and designed entire product for MVP (2 months) and post MVP (6 months) based on user feedback and Mixpanel data

Why and how it started?
Why and how it started?

We already had a setup to create and send certain types of marketing campaigns. However, we wanted to expand it based on client requests and no one wants to lose clients. 🙂

We already had a setup to create and send certain types of marketing campaigns. However, we wanted to expand based on multiple client requests. 🥲

INBOUND CAMPAIGN

Communication done within app/ website to gain customer engagement

OUTBOUND CAMPAIGN

Single channel communications where a common message is sent out to a large audience

WHAT WAS MISSING?
An advanced tool for creating -
WHAT WAS MISSING? An advanced tool for creating -

  • Omni-channel campaign

  • User action based campaign

  • Personalised messaging etc

  • Omni-channel campaign

  • User action drivem campaign

  • Personalised messaging

Hence, Flows got introduced!
The user flow remained same based on the existing IA of Yellow platform

Hence, Flows got introduced!
The user flow remained same based on the existing IA of Yellow platform

What and how were others doing?
What and how were others doing?

On doing some market research, we observed widespread use of similar patterns and a common drag-and-drop tool.

Top competitors campaign creation tool snippets

But hey,
Yellow already had an existing similar kind of tool! This is how it looked -
But hey,
Yellow already had an existing similar kind of tool! This is how it looked,

  1. We observed across all platforms a similar drag and drop tool is being used for creating complex marketing campaigns.

  2. Also, our platform already had a similar tool, so certain components could be reused to keep similar look & feel and save some effort! 😜 (I meant dev effort.. :D)

    We decided to move forward with the similar approach instead of reinventing the wheel.

  1. We observed across all platforms a similar drag and drop tool is being used for creating complex marketing campaigns.

  2. Also, our platform already had a similar tool, so certain components could be reused.

    We decided to move forward with the similar approach instead of reinventing the wheel.

  1. We observed across all platforms a similar drag and drop tool is being used for creating complex marketing campaigns.

  2. Also, our platform already had a similar tool, so certain components could be reused.


We decided to move forward with the similar approach instead of reinventing the wheel.

Wait… why even create a new tool, and not use the existing one?
Wait… why even create a new tool, and not use the existing one?
Because 'Flows' has a different user persona and a totally different use case. Let's dig deeper…
Because 'Flows' has a different user persona and a totally different use case. Let's dig deeper…
Flows user persona
Flows user persona

I did about 10 user interviews, with multiple user types. The goal of user interview was -

  1. To understand user persona for Flows

  2. To dig deeper how users were using existing tool/ builder (shown last image above)

I did about 10 user interviews, with multiple user types. The goal of user interview was -

  1. To understand user persona for Flows

  2. To dig deeper how users were using existing tool/ builder (shown last image above)

  1. USER PERSONA -

Delivery team, Business analyst

Delivery team

In-house within our company

Mostly our in house team helped clients onboard and create campaigns based on demand.

Marketer

Client company

We tried getting marketers feedback on tools they were already using and what they preferred,

  1. EXISTING BUILDER INSIGHTS -

  • The navigation is very tricky to use. I can't see all nodes and it is so difficult to decide which ones to use

  • Yeah I have been using builder a lot so it is not much trouble for me. I'm doing mostly same steps

  • It is very complicated for me to understand. I don't create flows. I ask bot developers only to create any flow

  • I'm not able to find published flow in staging environment and it gets confusing.

  • We cannot hand it over to clients as they don't wnat to go through the hassle and they also won't understand this.

  • The navigation is very tricky to use. I can't see all nodes and it is so difficult to decide which ones to use

  • Yeah I have been using builder a lot so it is not much trouble for me. I'm doing mostly same steps

  • It is very complicated for me to understand. I don't create flows. I ask bot developers only to create any flow

  • I'm not able to find published flow in staging environment and it gets confusing.

  • We cannot hand it over to clients as they don't wnat to go through the hassle and they also won't understand this.

There was a lot more feedback we received about builder, however I'm sharing points relevant to this case study.

There was a lot more feedback we received about builder, however I'm sharing points relevant to this case study.

IDEATION & SOLUTION…

IDEATION & SOLUTION…

Revamped Homepage

Our product had a common empty state screen to get started with for each feature. It looked something like this -

  1. Existing empty state

Eh, looks bland? It did.
It was not giving any useful information.

Plus the visuals in itself looked off, so decided to revamp the same.

Eh, looks bland? It did.
It was not giving any useful information. Plus the visuals in itself looked off, so decided to revamp the same.

Eh, looks dull? Doesn't it?
It lacked any useful information and the visuals were off. Time for a revamp!.

  1. Revamped iteration
    (after 10 rough sketchs)

  1. Revamped iteration (after 10 rough sketchs)

  1. REVAMPED ITERATION (after 10 rough sketchs)

Here the idea was to show information to the user through visuals since people don't tend to read data

  1. Revamped iteration

    (after more feedback)

  1. Revamped iteration (after more feedback)

  1. REVAMPED ITERATION (after few more discussions)

We realized that above screen is good, but why not along with giving information, onboard user from here itself?

This was finalized.

We realized that above screen is good, but why not along with giving information, onboard user from here itself? This was finalized.

We realized that above screen is good, but why not along with giving information, onboard user from here itself? This was finalized.

Revamped Nodes Navigation in builder
Revamped Nodes Navigation in builder

Users were facing trouble in nodes navigation in existing builder design, which looked like this -

Users were facing trouble in nodes navigation in existing builder design,
which looked like this -

  1. Existing navigation component

User feedback,

  • I don't know what each icon represents

  • Difficult to search and find a node

  • Not usable for a new user as you never really all nodes until you go through each section

Users mentioned no one really used this navigation, it was not usable. Reason -
- We don't know what each icon represents
- Difficult to search and find a node
- Not usable for a new user as you never really all nodes until you go through each section

Issues users pointed,
- We don't know what each icon represents
- Difficult to search and find a node
- Not usable for a new user as you never really all nodes until you go through each section

  1. Revamped iteration

The problem was resolved by

  • And why not have all nodes upfront, with their description upfront.

  • Making searching of nodes should be clear and simpler.

  • Node categories are mentioned and written clearly to avoid confusion.

  • Also no of nodes were few this design was finalised, however for more no of nodes a separate category "Frequently used" was created.

The problem was simple searching of nodes should be clear. And why not have all nodes upfront, with their description upfront. Also node categories are mentioned and written clearly to avoid confusion.
Since no of nodes were few this design was finalized however for too many nodes a separate category was created - "Frequently used"

Introduced new nodes
Introduced new nodes

The existing node design was working well. However there were few new nodes that got introduced in Flows which required a design update.

  1. Itera…..tions

Existing nodes designs had one output state but in Flows, a new requirement came up about having multiple outputs from a single node

I ideated on click, hover, selected, deletion of these states.

Existing nodes designs had one output state but in Flows, a new requirement came up about having multiple outputs from a single node.
I ideated on click, hover, selected, deletion, addition etc of these states.

Eh, looks dull? Doesn't it?
It lacked any useful information and the visuals were off. Time for a revamp!.

  1. Final design

  1. REVAMPED ITERATION (after 10 rough sketchs)

This was finalised i.e. having all output states within a node.

Note - one of the major reasons to finalise this was because of dev limitation that a single handle can contain only one arrow.

Con - it increased height of node and felt too much on the screen

This was finalised i.e. having all output states within a node.
Note - one of the major reasons to finalise this was because of dev limitation that a single handle can contain only one arrow.
Con - it increased height of node and felt too much on the screen

  1. Few more iterations

  1. REVAMPED ITERATION (after few more discussions)

The focus was to decrease height of node due to too many output states.

However after discussion with PM we realized, having all o/p states upfront increases their discoverability for each node.

This was a major highlight of Flows and we wanted customers to use it.

We realized that above screen is good, but why not along with giving information, onboard user from here itself? This was finalized.

We realized that above screen is good, but why not along with giving information, onboard user from here itself? This was finalized.

Analytics of marketing campaigns

The existing node design was working well. However there were few new nodes that got introduced in Flows which required a design update.

  1. For version 1 and quick update with M

For version 1 and quick update with Flows MVP, we released a basic version of analytics with only flow analytics and per node analysis.

Multiple ideations were done for node analytics.

For version 1 and quick update with Flows MVP, we released a basic version of analytics with only flow analytics and per node analysis.
Multiple ideations were done for node analytics.

  1. Revamped iteration

More data was added based on discussion with users and PM.
I ended up creating an analytics dashboard which can be quickly glanced by user

User feedback -

  • I didn't realize we have engagement insights also

  • I can see all useful information but not able to understand metrics in detail

  • Is this funnel graph based on data?

Observations -

  • Too much scroll for user and hiding of flow analytics in last viewport

  • Funnel can be improved and not designed in the best way.

  1. Revamped iteration

Based on user feedback, this was designed.

  • The metrics data was confusing to understand hence made it simpler by visually presenting in the format -
    Metric1= Metric2 + Metric3

  • Campaign details were hidden under side drawer which was now upfront but collapsed.

  • The scroll of entire page decreased by introducing tabs design for engagement insights

Based on user feedback, this was designed.

  • The metrics data was confusing to understand hence made it simpler by visually presenting in the format -
    Metric1= Metric2 + Metric3

  • Campaign details were hidden under side drawer which was now upfront but collapsed.

  • The scroll of entire page decreased by introducing tabs design for engagement insights

However in the end we went back to second iteration for following reasons -
I realized scroll is less effort than a click. A page scroll therefore is better than hiding engagement insights under tabs to avoid page height. Also those were important metrics which users were asking for. hence having everything upfront made more sense

However we finalised second iteration, as I realised scroll is less effort than a click!

A page scroll therefore is better than hiding engagement insights under tabs to avoid page height. Also those were important metrics which users were asking for. hence having everything upfront made more sense

Analytics of marketing campaigns

  1. Initial designs

For version 1 and quick update with Flows MVP, we released a basic version of analytics with only flow analytics and per node analysis. Multiple ideations were done for node analytics.

  1. Revamped one

More data was added based on discussion with users and PM.
I ended up creating an analytics dashboard which can be quickly glanced by user

User feedback -

  • I didn't realize we have engagement insights also

  • I can see all useful information but not able to understand metrics in detail

  • Is this funnel graph based on data?

Observations -

  • Too much scroll for user and hiding of flow analytics in last viewport

  • Funnel can be improved and not designed in the best way.

  1. Revamped iteration

Based on user feedback, this was designed.

  • The metrics data was confusing to understand hence made it simpler by visually presenting in the format -
    Metric1= Metric2 + Metric3

  • Campaign details were hidden under side drawer which was now upfront but collapsed.

  • The scroll of entire page decreased by introducing tabs design for engagement insights

Let's talk about data,

Results so far
Results so far
54%
Adoption rate

Users who published and send at least 1 marketing campaign through Flows.

Users who published at least one marketing campaign through Flows.

13.3M
Total notifications sent

From all campaign total notifications sent so far. It directly impacts our business.

Sum of total notifications sent in all campaigns. It impacts business directly.

1920
Total campaigns published

No of total marketing campaigns published through Flows

Read how Flows helped in increasing adoption for one of our clients

Read how clients are increasing adoption with 'Flows'

That's all for now, however
there's a lot more to this case study which I'll keep on adding

Upcoming...
More data on existing designs and revamps

I'll share more about how iterations were done to show max data in smaller region for node analytics, new features we introduced, how feature adoption was done for Flows

Including Generative AI in Flows

User experience designed for writing efficient prompts for Gen AI features which resulted in significant time and effort savings for users.

Designed with love and FOMO by Shubhangi Gupta ©

Designed with love by Shubhangi Gupta ©

shubhangipq@gmail.com |

LinkedIn