Designing Automation Rules in DelightChat : UI/UX Case Study

DelightChat is a shared inbox customer support tool for E-commerce and DTC brands. You can reply to your customers across all channels, view order data from Shopify at a glance, and collaborate with your team on customer issues. All from one place. (pretty cool no?)

🎯 Problem Statement-

Our users get thousands of commonly asked questions every day regarding shipping, tracking or an update of their orders. We wanted to make our users’ support teams extremely efficient by automating repetitive tasks, such as tagging tickets, assigning a conversation or responding to common queries.

🧐 User Pain Points-

After talking to a lot of our users over time, we knew that they all were facing one big issue- they were spending a lot of time replying individually and all of them wanted to set triggers instead. After talking to them, we could see a pattern emerging,

We want to set automated triggers to customer messages such as, “where is my order?”, “ if a customer messages about an item, reply back with product list”, “after the customer places an order, send follow up message after 15 days with promotions”.

We want to automate standard questions- “Where is my refund?”, “What are the current ongoing offers?”

We want to send automated messages to customers based on events(product reviews, etc)

My goal was simple- To design a seamless user experience of setting up the automation rules. I wanted the UI to be as clean as possible without adding extra steps which can unnecessarily complicate the user experience.

I mapped out my users’ experiences, thoughts and pain points with our current designs to have clarity of the problem.

Our current design had two main problems that I had to solve:

• We initially designed it only for archiving messages/queries based on filters. We had to add more conditions there.
• The user had to switch between different tabs for setting different rules.

📝 Process

I started with making a list of conditions that will help the user to create rules to automatically perform the tasks based on different conditions they set:

1. Assigning conversations to a team/user.
2. Adding tags to the conversations.
3. Closing resolved queries.
4. Archiving queries.
5. Sending automated replies to common customer queries.
6. Adding private notes to the conversations. (in V2)

👩🏽‍💻 I divided my process of designing the automation rules into three steps-

• Setting up triggers
• Setting up the conditions.
• Defining the action.

1) Setting up Triggers-

While working as a customer support agent, there can be multiple triggers that you can set to make your work efficient. I performed this exercise in two parts- One for the MVP and the other for future updates.

List of triggers in MVP-

1. When a new ticket is created in a selected support channel.
2. When there is a new message in the ticket in a selected support channel.

List of triggers in future updates-

2) Setting up the conditions-

After setting up the trigger, the user would want to set certain conditions. After you select your trigger, a list of various properties will appear which the user can use in their conditions.

To add a condition, I added the + Add condition button.

The user can select multiple conditions together and decide whether Any or All of the conditions need to be satisfied for the actions to be performed.

3) Defining the action-

When the conditions are fulfilled, the system performs the actions as defined. At the beginning of the article, we defined the following tasks which the rule will perform.

1. Assigning conversations to a team/user — Users can set the rule to assign a conversation to a team member /team when the conditions are fulfilled. Upon clicking on the dropdown and select the team/user they want to assign to.
2. Adding tags to the conversations — Users can set the automation to add tags to a conversation based on the conditions. Adding tags to a conversation makes the life of a support agent much easier- The conversations are sorted and are in one place!
3. Closing resolved queries — When a support request is resolved, the user can easily close it so that they can focus on the conversations which need to be taken care of.
4. Archiving queries — The user can automatically archive messages based on conditions.
5. Sending automated replies to common customer queries. This is the best part about the rules. For example, you may want to provide shipping information automatically when customers request shipping updates. You can just check for the common keywords in the message to understand the user’s intent and then set an automated response with the shipping details.

🔨 Design Challenges

After setting up the conditions and fulfilling the conditions, the feature started taking its shape. This is the part of the process where I go back to my user research and drill down on the problem.

• Our users wanted to resolve common customer queries instantly with the least possible human interaction. How can I make it happen for them?

By setting up automated replies, we reduced their efforts of replying to each ticket individually, drastically. For example, if the user wants to provide shipping information automatically when customers request shipping updates. They just check for the common keywords like, “where is my order” in the message to understand the user’s intent and then set an automated response with the shipping details.

Auto reply in action

• How do I make the set of rules more accessible to my users?

After creating a bunch of rules, I wanted to keep the set of active rules handy for the users. On top of that, we added an indicator to specify which of these rules are currently enabled so that our users wouldn't have to click on each rule separately.

😻 Automation Rules in Action!

Automation Rules in action!

💌 Let’s connect! I’d love to hear your feedback or questions.

I’m Shruti Chaturvedi, a Product Designer at DelightChat. I would love to connect with you on,

Twitter- https://twitter.com/shrutic98
Email- shrutichaturvedi98@gmail.com

❤️ A big thanks to my mentor and CEO of DelightChat, Preetam Nath for constantly guiding me through the process and providing feedback at every stage, Sankalp, CTO of DelightChat; Pavan and Sameer from our engineering team for pulling off this feature in such a tight deadline. You guys rock! 💕