2024.09 ~ 2024.12
Contextual Inquiries, UI Design, Prototype, User Testing
Me, Shantanu, Michelle, Devi, Callista, Jackson, Atharva,
Sumedha, Harshika
Stephanie Maxwell, Cadence Chung (Salesforce Design Team)
Salesforce sponsors guided us to explore their existing chatbot --- Einstein and Agentforce AI Chatbot on the website, and further we conducted contextual inquiries to identify potential pain points while new users are inquiring about business solutions for their company.
Chatbot provides 3 to 4 contextual selections to extend and clarifying the user’s question, ensuring that users can get more relevant responses.
.gif)
Chatbot suggests the user related inputs after they keep backspacing entries over three times, assisting users to ask more accurate questions.
Chatbot summarizes product key features with a link to webpage, and offers several aspects for users to compare saved products.
Chatbot creates real-time progress indicators based on topics of the conversation, for users to navigate through different sections in the chat.
Our preliminary research, including disciplinary research and competitor analysis, helped us identify two main goals that we could potentially target on simultaneously, and ideated design solutions in one team.
Create a personalized and context-aware chatbot to remember previous customer interactions and provide relevant responses across platforms and devices.
Design the chatbot’s personality traits based on how the customers perceive and seem to want to interact with, identifying conversational values.
We conducted contextual inquires with three participants working in a small business team, focusing on three chatbots: Salesforce Einstein, ChatGPT, and Amazon Rufus.
We used affinity mapping to categorize and organize findings, sorted out four main aspects of insights and user pain points, and further narrowed down two problem spaces to focus on.
We did the Crazy 8 activity to develop several preliminary sketches and design concepts pointing to two focus areas (Threads and Journey & Chatbot Prompts) from our contextual inquiries. Then we conceived initial sketches and identified six key sketches as a flow that we would like to explore further.
Two main user groups: just scouting, existing user
Suggest initiating questions, keeping track of past conversation
Guide users to ask product inquiry questions for certain situations
Clarify unclear entries get more accurate chatbot response
Provide key features of suggested products, and save to a thread
Show concise information while the webpage dynamically changes
Feedback from peers and Salesforce design leads in midterm design critique suggested us to more narrow down the problem space and maintain consistency, focusing on
Need to test if users tend to open dropdown menu frequently for recommended inputs
It’s better to only offer 3 to 4 suggestive prompt options for users to choose from
Need to test usability for carousel options showing extended questions to see if users consider them cumbersome
Focus on reducing user frustrations and errors, making sure the responses are accurate
First iteration of the above focused on providing concise prompts and suggestive options to quickly respond to each use case. Additionally, we change the way of presenting information to blend in the nature of Salesforce chatbot conversation.
Need to make a balance between “guiding users to ask questions in the current step” and “taking over users’ right to control their product inquiry paces”
Explore how to present the design for users to effectively track conversation progress and revisit information
We improved the original question flow to vertical timeline, AI will summarize conversation topics for users to engage in natural conversation freely, at the same time can recall information and navigate through the chat quickly.
Consider a more feasible layout to present products’ key features and prices within limited screen size for higher accessibility
Users need an intuitive product comparing mechanism within chatbot conversation
We introduced the bookmark button that allows users to save products for comparison. By scrolling up to access the “Compare” button, users can compare and assess different aspects of multiple products by filters directly within the chatbot.
Click on “Bookmark” button to save the product, and can find saved products in the hamburger menu at the top left
Scroll up the “Compare” button, selecting filters and specific products to compare features, pricing, or other capabilities
Chatbot receives the request and shows products comparison in the table content
We integrated Salesforce Lightning Design System to create consistent design iteration. Then we conducted user testing with four participants working in business positions on three features: Timeline, Behavioral Triggers (four use cases), and Comparing Products.
Sticky timeline has a tab that can be clicked to open it, and it’s filled with a dark blue background attaching on the chatbot screen.
💬 Not sure about what “Timeline” means, maybe onboarding is needed for better understanding.
💬 Dark blue background looks distracting and grey texts showing subheadings are too small.
Skeleton timeline has a circular clock button to open it, with white background and skeleton of conversation progress bar.
💬 Most of users preferred it’s simplicity and found it less distracting along with the chatbot screen.
💬 Need for more apparent indicators on overall design to show where they currently navigate to.
Users tend to use short phrases owing convenience, which frequently lead to irrelevant chatbot responses. To So we designed a feature with three to four selections to extend and clarify brief or vague user inquiries.
💬 Users consider it helpful to get more relevant and accurate information effectively and quickly.
💬 It’s suggested to add an option for typing custom inputs in case given prompts not meet their needs.
When users are not sure what to type in and keep backspacing for a long time, chatbot will send the reassuring messages to keep them connected and engaged.
💬 Some users found it unnecessary, there’s better way to assist users in the pause of conversation.
💬 Need for setting up time interval of reassuring messages, ensuring to not make users feel annoyed.
If chatbot provides information to users three times but is still unable to adequately address users’ question, it’s the moment to connect them with real agent via a scheduled call, email, or message.
💬 "Message" option make users confused about whether it directs to external text message or received chatbot message.
💬 "Email" option is unsuitable for this situation since users feel like getting immediate responses.
It’s important to gently re-engaging users who have been inactive for a while, by providing supportive messages to bring them back into the conversation.
💬 Some users suggested that receiving reminders after about five minutes of inactivity would be ideal.
💬 “Explore More” in #01 is more confusing where it will direct to, while prompts in #02 are clearer.
After receiving sponsors suggestions to maintain a natural chatbot conversation, keep the interface clean, and reduce users’ click through, we presented the idea enabling users to compare saved products directly within the chat.
💬 Most users appreciated the intuitive process of comparing products to assess prices and features.
💬 Comparison table is concise, but there’s need for more filter options, or can customize filter.
It’s difficult for users to articulate specific product needs and structure follow-up questions, which leads them to get irrelevant chatbot responses.
When users enter too brief or vague inputs, chatbot will provide three to four extended selections, assisting users to elaborate and clarify their questions and needs in a natural conversation.
When users struggle to reframe inquiry and keep backspacing for three times, the input suggestion will be shown above the textfield and change dynamically based on users’ typing, helping them get more accurate information.
Users spend lots of time scrolling back and forth to refer to relevant information in lengthy chat, such as comparing product suggestions and recalling previous responses.
The feature aims to streamline users’ decision making on product discovery, by providing concise product information and comparison table. And there’re several filters for users to choose what aspects of products they want to compare.
Timeline helps users keep track of chatbot conversation, and navigate through different sections based on real-time created topics of the chat to recall and retrieve relevant information they need more easily. Also, it can be flexibly open or closed, and show progress indicators while scrolling the chat.
Users get frustrated when pushed to connect with agents too often before exploring enough product information first, which forces them to pause or quit the chat.
The feature ensures to provide real agent support only when genuinely required, allowing users to explore products independently first. It’s important to minimize unnecessary redirection to enhance user autonomy.
When users are inactive for an extended period, chatbot will prompt them with three contextually relevant and actionable options to guide users back to interactions.
This feature assures users can holistically explore product details and keeps their conversation persistent by maintaining consistent contents between chatbot and different webpages.
Conduct in-depth research on media integration (images, video...) to refine information designs, such as product cards, comparison tables, and the timeline.
Investigate the feasibility of extending the chatbot to other platforms like mobile apps, to ensure accessibility and seamless integration for new and returning users.
Dive deeper in the chatbot’s personality to justify its characteristics and fit main purposes our product focuses on.
