MY ROLE
Product Designer
MY RESPONSIBILITIES
Problem identification | Idea brainstorming | Empathising with user persona | Creating user stories | Defining scope of release/ sprint | Wireframes | UI Design and Prototypes | Add the Design system UI components
TIMELINE
2.5 months
MY TEAM
4 Developers
1 Product Manager
1 Product Designer
2 Data Scientists
1 Researcher
STAKEHOLDERS
Ankit Jain (Head of product)
Lalit Indoria (CTO)
Joydeep Sen Sharma ( CEO )
DELIVERABLES
0 to 1 Core feature design
25+ Components
BUSINESS CONSTRAINTS
Quick and easy to build
TIMELINES
2.5 months
PLATFORM
Web
CONTEXT SETTING
Understanding the Slack Support Dilemma
Understanding the Slack Support Dilemma
Customers and employees love Slack. It's much easier and faster to collaborate without switching to a different tool. Many small-scale B2B companies, particularly those based in the US, rely on Slack to provide customer support. However, they often struggle with tracking queries when they scale, such as the status of ongoing issues, identifying who is handling specific queries, managing SLA breaches, etc.
Customers and employees love Slack. It's much easier and faster to collaborate without switching to a different tool. Many small-scale B2B companies, particularly those based in the US, rely on Slack to provide customer support. However, they often struggle with tracking queries when they scale, such as the status of ongoing issues, identifying who is handling specific queries, managing SLA breaches, etc.
This is where ClearFeed comes in
This is where ClearFeed comes in
ClearFeed is a leading SaaS solution built on top of Slack, to manage queries across different channels. It features a dedicated dashboard that provides response insights. Ranked 13th out of 500 competitors, ClearFeed's customers have hundreds of channels with their clients and are confidently scaling to more with ClearFeed. See more about ClearFeed here.
ClearFeed is a leading SaaS solution built on top of Slack, to manage queries across different channels. It features a dedicated dashboard that provides response insights. Ranked 13th out of 500 competitors, ClearFeed's customers have hundreds of channels with their clients and are confidently scaling to more with ClearFeed. See more about ClearFeed here.
Backed by
Product of the day on
CLEARFEED CUSTOMERS
CLEARFEED CUSTOMERS
CLEARFEED CUSTOMERS
THE PROBLEM
Addressing Repetitive Customer Queries
Addressing Repetitive Customer Queries
Customer Support team receives multiple customer queries daily, some of which are repetitive. The current process involves searching through multiple documentation or searching through previous responses and manually crafting responses, which slows down the workflow and affects productivity. The support team needs a solution to automate this process to answer common questions accurately.
Customer Support team receives multiple customer queries daily, some of which are repetitive. The current process involves searching through multiple documentation or searching through previous responses and manually crafting responses, which slows down the workflow and affects productivity. The support team needs a solution to automate this process to answer common questions accurately.
The advent of ChatGPT and related AI systems has also been a turning point for user expectations. Everyone is asking:
The advent of ChatGPT and related AI systems has also been a turning point for user expectations. Everyone is asking:
SOLUTION
Indexing and Activating the data sources with AI
Indexing and Activating the data sources with AI
We recognised the potential to leverage GPT to index the documentation and automate responses to these common and repetitive questions. The primary persona who will set this up is the Head of Customer Support. I solved for the following user stories.
We recognised the potential to leverage GPT to index the documentation and automate responses to these common and repetitive questions. The primary persona who will set this up is the Head of Customer Support. I solved for the following user stories.
User Story 1: As a Support Head, I want to be able to connect my data sources/documentation to GPT for indexing.
User Story 2: As a Support Head, I want to be able to test my data sources against any questions.
User Story 1: As a Support Head, I want to be able to connect my data sources/documentation to GPT for indexing.
User Story 3- As a Support Head, I want to be able to activate GPT for triage channel.
User Story 2: As a Support Head, I want to be able to test my data sources against any questions.
User Story 3- As a Support Head, I want to be able to activate GPT for triage channel.
Output on Slack
Output on Slack
When a user asks a question on slack, the virtual agent quickly analyses the query and generates an accurate response using the indexed data sources. The solution becomes win-win for both support agents and customers as it allows the virtual agent to handle routine inquiries while freeing up human agents for more complex tasks and the users receive timely answers enhancing user satisfaction.
Created by @Suraj on Slack builder. To see more details on the same- Click here
When a user asks a question on slack, the virtual agent quickly analyses the query and generates an accurate response using the indexed data sources. The solution becomes win-win for both support agents and customers as it allows the virtual agent to handle routine inquiries while freeing up human agents for more complex tasks and the users receive timely answers enhancing user satisfaction.
Created by @Suraj on Slack builder. To see more details on the same- Click here
If the virtual agent fails to answer correctly, and support agent clicks on "No, file a ticket" button. Then a ticket is created and after that when the agent manually respond to that query, AI propose a FAQ to be added in documentation based on this new data.
The Impact and Success
The Impact and Success
It helped support agents be more productive, reduce sales cost, utilise data source very effectively. Here is usage Data was as follows Data measured for 2 buckets for next 2 weeks
Deployed for many ClearFeed customers, our automated answering systems are already improving both the quality and speed of agent responses to common customer questions. As Shravan Ashok, Principal Program Manager at CastAI, put it:
Deployed for many ClearFeed customers, our automated answering systems are already improving both the quality and speed of agent responses to common customer questions. As Shravan Ashok, Principal Program Manager at CastAI, put it:
My internship time concluded, so I couldn’t work more on it, but right now, it works on all public docs and many more private knowledge sources.
My internship time concluded, so I couldn’t work more on it, but right now, it works on all public docs and many more private knowledge sources.
INTERESTED IN MORE DETAILS. THIS IS THE PROCESS I FOLLOWED
How I went about
RESEARCH AND FINDINGS
Research
To gain deeper insights, we conducted user interviews and reviewed past interview recordings, relevant blogs, and articles. I also observed the in-house support team's workflow. Despite cost constraints, we prioritized meetings with support heads, having researchers or founders lead these to maximize impact.
The following insights were uncovered-
Summing up the pain points
After the initial research, i summed up the pain points as follows
Knowledge Base Underutilisation:
Many organisations have comprehensive knowledge bases that aren't effectively leveraged. Support staff may not always access or reference these resources, leading to repeated efforts in answering common questions.
Inefficient use of support resources:
The constant influx of similar queries can overwhelm support staff, making it challenging to prioritise and handle more pressing and unique customer concerns.
High support costs:
The manual handling of repetitive queries increases operational costs. The need for more staff to manage these repetitive tasks can strain the company's budget and scalability.
MY APPROACH
How I went about
Understand: I quickly grasp the problem by diving deep into what we’re solving, who we’re solving for, and why. This helps me find the right balance between business goals, user experience, and design principles. I seek out user feedback or talk to people using the product to build empathy.
Strategize: I move through the ‘brainstorming to flowchart to wireframe to prototype’ process, crafting clear, user-centered solutions.
Hand-off: I collaborate closely with developers during implementation, ensuring design details like micro-interactions are accurately executed. After launch, I actively gather feedback and listen to user insights.
Summing up the pain points
After the initial research, i summed up the pain points as follows
Knowledge Base Underutilisation:
Many organisations have comprehensive knowledge bases that aren't effectively leveraged. Support staff may not always access or reference these resources, leading to repeated efforts in answering common questions.
Inefficient use of support resources:
The constant influx of similar queries can overwhelm support staff, making it challenging to prioritise and handle more pressing and unique customer concerns.
High support costs:
The manual handling of repetitive queries increases operational costs. The need for more staff to manage these repetitive tasks can strain the company's budget and scalability.
Research
To gain deeper insights, we conducted user interviews and reviewed past interview recordings, relevant blogs, and articles. I also observed the in-house support team's workflow. Despite cost constraints, we prioritized meetings with support heads, having researchers or founders lead these to maximize impact.
The following insights were uncovered-
LET’S SOLVE THIS PROBLEM
LET’S SOLVE THIS PROBLEM
Initial Brainstorming
Initial Brainstorming
The team brainstormed and recognised the potential to leverage GPT to index the documentation and automate responses to these common and repetitive questions
The team brainstormed and recognised the potential to leverage GPT to index the documentation and automate responses to these common and repetitive questions
There are two parts of the problem statement
01
Configuring the Data sources and setting them up
02
Seeing it in action on Slack
Rupam Gumber
Suraj Mahraj
For this project, I collaborated with @Suraj. I handled the first part, configuring the knowledge sources, while he managed the second part, implementing it on Slack. Though we had individual responsibilities, our tasks were interlinked, so we held regular meetings to stay aligned and share insights. As my senior, Suraj also helped me whenever I got stuck.
For this project, I collaborated with @Suraj. I handled the first part, configuring the knowledge sources, while he managed the second part, implementing it on Slack. Though we had individual responsibilities, our tasks were interlinked, so we held regular meetings to stay aligned and share insights. As my senior, Suraj also helped me whenever I got stuck.
Understanding the users
USER PERSONAS
I began by defining our primary user persona: the Support Head. This persona is integral to our design process since they will be configuring and setting it up.
I began by defining our primary user persona: the Support Head. This persona is integral to our design process since they will be configuring and setting it up.
David Parker is Head of Customer Support with 15 years of experience in customer support, with 7 years in a leadership role. David has a strong focus on efficiency, customer satisfaction, and team productivity.
Name: David Parker
Role: Head of Customer Support
Experience: 15 years in customer support, with 7 years in a leadership role
Background: David has a strong focus on efficiency, customer satisfaction, and team productivity. He is responsible for ensuring that the support team meets SLAs, handles customer inquiries promptly, and continuously improves the customer experience.
🥅 Goals
🥅 Goals
Reduce Response Times and SLA Breaches
Enhance Team Productivity and Morale
Optimise Support Costs
Improve Response Consistency
Reduce Response Times and SLA Breaches
Enhance Team Productivity and Morale
Optimise Support Costs
Improve Response Consistency
🤷♂️ Frustations
🤷♂️ Frustations
Repetitive queries across customers
Overwhelmed Support Team
Inefficiency in Scaling Support Operations
Inconsistent Customer Experience
Repetitive queries across customers
Overwhelmed Support Team
Inefficiency in Scaling Support Operations
Inconsistent Customer Experience
USER STORIES
User Story 1: As a Support Head, I want to be able to connect my data sources/documentation to GPT for indexing.
User Story 2: As a Support Head, I want to be able to test my data sources against any questions.
User Story 3: As a Support Head, I want to be able to activate GPT for triage channel.
User Story 1: As a Support Head, I want to be able to connect my data sources/documentation to GPT for indexing.
User Story 2: As a Support Head, I want to be able to test my data sources against any questions.
User Story 3: As a Support Head, I want to be able to activate GPT for triage channel.
Index
Index public and private data sources within hours by specifying URLs, using pre-built connectors
Test
Assess the accuracy and relevance of your GPT-Powered answers for frequently asked questions.
Activate
Activate for triage channel to deflect queries with GPT Powered answers.
Redefined Problem Statement
The primary goal of this project is to streamline the setup process involving connecting/indexing the data sources, testing and activating the data sources to integrate GPT-powered automated answers into the support workflow in order to enhance support efficiency, provide consistent responses, and allow the support team to focus on more complex tasks.
The primary goal of this project is to streamline the setup process involving connecting/indexing the data sources, testing and activating the data sources to integrate GPT-powered automated answers into the support workflow in order to enhance support efficiency, provide consistent responses, and allow the support team to focus on more complex tasks.
SOLUTIONING
Sketching
Sipped my coffee and did some sketches around how can we present all the three stories in a seamless manner. Tried quite a few versions.
Sipped my coffee and did some sketches around how can we present all the three stories in a seamless manner. Tried quite a few versions.
Designing the solution
Designing the solution
I created designs that focused on three main areas, as explained earlier. I followed an iterative approach, taking regular feedback from the support team, PMs, and founders to ensure that the best solution emerged.
I created designs that focused on three main areas, as explained earlier. I followed an iterative approach, taking regular feedback from the support team, PMs, and founders to ensure that the best solution emerged.
User Story 1
User Story 1
As a Support Head, I want to be able to connect my data sources/documentation to GPT for indexing.
With Clearfeed, you get an option called announcement, where one can broadcast anything to all the customer channels. So, I broadcasted this message to customer channels to understand which data source is most used. And based on results- I decided to go ahead with Public Data Sources and Confluence for the first release.
As a Support Head, I want to be able to connect my data sources/documentation to GPT for indexing.
With Clearfeed, you get an option called announcement, where one can broadcast anything to all the customer channels. So, I broadcasted this message to customer channels to understand which data source is most used. And based on results- I decided to go ahead with Public Data Sources and Confluence for the first release.
I also collaborated with data science team, since they deeply understood the data sources and then gathered these details. These are the details to be inputted to establish the connection.
I also collaborated with data science team, since they deeply understood the data sources and then gathered these details. These are the details to be inputted to establish the connection.
ITERATIONS
Some of the iterations and design decisions which I took before getting to the final designs are as follows. Tap right arrow to see all the iterations>>>
Some of the iterations and design decisions which I took before getting to the final designs are as follows. Tap right arrow to see all the iterations>>>
FINAL SCREENS
The introductory screen, which opens on clicking the icon from the side navbar, is designed with an animation. This approach was chosen to engage users immediately, providing an intuitive way to grasp the feature's functionality without having to read through extensive text.
When users click on 'Index Data Sources,' they are presented with clear options, such as 'Public' and ‘Confluence’ which leads to this next screens.
The introductory screen, which opens on clicking the icon from the side navbar, is designed with an animation. This approach was chosen to engage users immediately, providing an intuitive way to grasp the feature's functionality without having to read through extensive text.
When users click on 'Index Data Sources,' they are presented with clear options, such as 'Public' and ‘Confluence’ which leads to this next screens.
Adding the details - This screen guides users through the process of entering relevant data, with clear fields and labels to minimise user errors. The design provides tooltips wherever necessary, thereby enhancing the user experience.
Adding the details - This screen guides users through the process of entering relevant data, with clear fields and labels to minimise user errors. The design provides tooltips wherever necessary, thereby enhancing the user experience.
After the details are entered, this screen provides real-time feedback through visual indicators helps manage user expectations, reduces anxiety, and builds trust in the system’s performance.
After the details are entered, this screen provides real-time feedback through visual indicators helps manage user expectations, reduces anxiety, and builds trust in the system’s performance.
Clicking on continue opens this screen. This shows the overview of data sources added. It also provides users with a comprehensive view of their indexing status. The decision to use colour-coded status indicators (e.g., indexing, failed, indexed) allows users to quickly assess the state of each source.
Clicking on continue opens this screen. This shows the overview of data sources added. It also provides users with a comprehensive view of their indexing status. The decision to use colour-coded status indicators (e.g., indexing, failed, indexed) allows users to quickly assess the state of each source.
The prototype showcases the indexing flow, which is the first step in setting up GPT-powered automated answers. The design prioritises user-friendliness and minimalism to reduce user errors and enable a faster setup time.
The prototype showcases the indexing flow, which is the first step in setting up GPT-powered automated answers. The design prioritises user-friendliness and minimalism to reduce user errors and enable a faster setup time.
User Story 2
User Story 2
As a Support Head, I want to be able to test my data sources against any questions. Basically users want to double check if the indexed knowledge sources are actually indexed.
As a Support Head, I want to be able to test my data sources against any questions. Basically users want to double check if the indexed knowledge sources are actually indexed.
I took inspiration from some of the web apps that allow input and provide a response.
I took inspiration from some of the web apps that allow input and provide a response.
Then I created the information architecture, to understand all the information pieces required in this interface-
Then I created the information architecture, to understand all the information pieces required in this interface-
Here, users can easily validate the effectiveness of their indexed data sources. The final design emphasizes clarity by showing both the generated answer and the underlying search results.
Here, users can easily validate the effectiveness of their indexed data sources. The final design emphasizes clarity by showing both the generated answer and the underlying search results.
User Story 3
User Story 3
As a Support Head, I want to be able to activate GPT for triage channel.
As a Support Head, I want to be able to activate GPT for triage channel.
Business team decided pricing to be based on number of generated response, so which made me to think of one more mode for teams who want to not spend money on all the queries and only response would be generated when agent applies an emoji to it.
Business team decided pricing to be based on number of generated response, so which made me to think of one more mode for teams who want to not spend money on all the queries and only response would be generated when agent applies an emoji to it.
The inclusion of a toggle switch for activation ensures users can enable or disable it with ease. By allowing users to choose the number of generated responses or trigger modes, it enhances the system's adaptability and thus, user satisfaction.
The inclusion of a toggle switch for activation ensures users can enable or disable it with ease. By allowing users to choose the number of generated responses or trigger modes, it enhances the system's adaptability and thus, user satisfaction.
Output on Slack
Output on Slack
When a user asks a question on slack, the virtual agent quickly analyses the query and generates an accurate response using the indexed data sources. The solution becomes win-win for both support agents and customers as it allows the virtual agent to handle routine inquiries while freeing up human agents for more complex tasks and the users receive timely answers enhancing user satisfaction.
Created by @Suraj on Slack builder. To see more details on the same- Click here
When a user asks a question on slack, the virtual agent quickly analyses the query and generates an accurate response using the indexed data sources. The solution becomes win-win for both support agents and customers as it allows the virtual agent to handle routine inquiries while freeing up human agents for more complex tasks and the users receive timely answers enhancing user satisfaction.
Created by @Suraj on Slack builder. To see more details on the same- Click here
If the virtual agent fails to answer correctly, and support agent clicks on "No, file a ticket" button. Then a ticket is created and after that when the agent manually respond to that query, AI propose a FAQ to be added in documentation based on this new data.
If the virtual agent fails to answer correctly, and support agent clicks on "No, file a ticket" button. Then a ticket is created and after that when the agent manually respond to that query, AI propose a FAQ to be added in documentation based on this new data.
POST LAUNCH
User Feedback
User Feedback
It got deployed bucket by bucket to the Clearfeed customers - And we took feedback from the teams after the launch.
It got deployed bucket by bucket to the Clearfeed customers - And we took feedback from the teams after the launch.
Post launch iterations
Post launch iterations
ADDING MORE FLEXIBILITY
Adding more flexibility with adding excluding urls in public documentation. After the feedback, I incorporated conditions for URL indexing, so that users gain greater control over the data being indexed.
Before
Adding more flexibility with adding excluding urls in public documentation. After the feedback, I incorporated conditions for URL indexing, so that users gain greater control over the data being indexed.
Before
After
After
MORE THAN 1 RESPONSE
For generating more than one response, I introduced the option of selecting number of responses to be generated in activation settings.
For generating more than one response, I introduced the option of selecting number of responses to be generated in activation settings.
FULLY AUTOMATIC RESPONSE SYSTEM FOR SOME OF THE CHANNELS
FULLY AUTOMATIC RESPONSE SYSTEM FOR SOME OF THE CHANNELS
After feedback about building an fully automatic response system for specific queries & channels, I decided to wait until the model is more accurate. Bad responses could have serious consequences, & the system needs more customization. We decided to only move forward once there's more data and demand, as it will require a lot of development work.
After feedback about building an fully automatic response system for specific queries & channels, I decided to wait until the model is more accurate. Bad responses could have serious consequences, & the system needs more customization. We decided to only move forward once there's more data and demand, as it will require a lot of development work.
Mentorship and Guidance
Great things are not done alone. I’m grateful to these mentors whose invaluable feedback and guidance played a key role in shaping this project.
Rishi Mullur
Product Manager
Suraj Mahraj
Senior Product Designer
Lalit, Ankit & Joydeep
Founders
If I had more time, I would
Implement customisations specially in the activate settings
Test and Iterate More
Build on more data sources
Looking Ahead: Lessons Learned and Reflections
With this project, I was able to design a 0 to 1 core feature which also got release in a short time which is now a core offering of ClearFeed. Two key learnings were:
Integrating AI Solutions Thoughtfully:
Implementing GPT-powered responses required careful consideration of its capabilities and limitations. It was important to align the AI's functionalities with the Support Team's needs and ensure that it enhanced their workflow rather than complicating it.
Balancing Automation with Human Oversight:
While automation can greatly enhance efficiency, it’s important to balance it with human oversight. Providing mechanisms for support agents to review and adjust automated responses ensured accuracy and maintained high service quality.
MY ROLE
Product Designer
MY RESPONSIBILITIES
Problem identification | Idea brainstorming | Empathising with user persona | Creating user stories | Defining scope of release/ sprint | Wireframes | UI Design and Prototypes | Add the Design system UI components
MY TEAM
4 Developers
1 Product Manager
1 Product Designer
2 Data Scientists
1 Researcher
STAKEHOLDERS
Ankit Jain (Head of Product)
Lalit Indoria (CTO)
Joydeep Sen Sharma (CEO)
DELIVERABLES
0 to 1 core feature design 25+ components
BUSINESS CONSTRAINTS
Quick and Easy to Build
TIMELINE
2.5 months
PLATFORM
Web
Mentorship and Guidance
Great things are not done alone. I’m grateful to these mentors whose invaluable feedback and guidance played a key role in shaping this project.
Rishi Mullur
Product Manager
Suraj Mahraj
Senior Product Designer
Lalit, Ankit & Joydeep
Founders
Looking Ahead: Lessons Learned and Reflections
These insights will undoubtedly inform my future projects, ensuring a more user-focused, systematic, and collaborative approach to design challenges.
Integrating AI Solutions Thoughtfully:
Implementing GPT-powered responses required careful consideration of its capabilities and limitations. It was important to align the AI's functionalities with the Support Team's needs and ensure that it enhanced their workflow rather than complicating it.
Balancing Automation with Human Oversight:
While automation can greatly enhance efficiency, it’s important to balance it with human oversight. Providing mechanisms for support agents to review and adjust automated responses ensured accuracy and maintained high service quality.
Interested in more?
Interested in more?
Interested in more?
Explore my other case studies
Explore my other case studies
Curelink
Live Project
Increased number of enrollments & conversions via gamification
Created lasting user engagement through gamification and rewards.
Most appreciated self project
Improved balance between physical appearance and personality on Tinder
Designed nudges which help form deeper connections.
Xalts
Live Project
Enhanced Security and Compliance with web-based wallet Integration
Increased user trust and drove 20% Growth in Institutional Clients.
Enhanced Security and Compliance with web-based wallet Integration
Increased user trust and drove 20% Growth in Institutional Clients
Xalts
Live Project
Increased number of enrollments & conversions via gamification
Created lasting user engagement through gamification and rewards.
Curelink
Live Project
Revolutionised customer support on Slack by automating repetitive queries
Designed a system where support team can index, text & activate the data source.
ClearFeed
Live Project
Improved balance between physical appearance and personality on Tinder
Designed nudges which help form deeper connections
Most appreciated self project
Enhanced Security and Compliance with web-based wallet Integration
Increased user trust and drove 20% Growth in Institutional Clients
Xalts
Live Project
Increased number of enrollments & conversions via gamification
Created lasting user engagement through gamification and rewards.
Curelink
Live Project
Improved balance between physical appearance and personality on Tinder
Designed nudges which help form deeper connections
Most appreciated self project