2024.09 ~ 2024.12
Contextual Inquiry, UI Design, Interactive Prototype, User Testing
Me, Shantanu, Michelle, Devi, Callista, Jackson, Atharva,
Sumedha, Harshika
Cadence Chung, Stephanie Maxwell (Salesforce Design Team)
Salesforce design leads guided us to explore their existing chatbot – Einstein and Agentforce AI Chatbot on the website, and further we conducted contextual inquiries to identify primary pain points when new users are inquiring about business solutions for their company.
Chatbot provides 3 to 4 contextual selections to extend and clarifying users' questions, ensuring that users can get more relevant responses.
Chatbot suggests the user related inputs if they keep backspacing entries over three times, assisting users to ask more accurate inquiries.
Chatbot summarizes product key features with a link to webpage, and organizes several aspects of information into table content for users to compare different products.
.gif)
Chatbot creates real-time progress indicators based on topics of the conversation, for users to navigate through different sections and retrieve information they need easily.
Our preliminary research, including disciplinary research and competitor analysis, helped us identify two main goals to target on divided into two groups, and ideated design solutions in one team.
Personalized and context-aware chatbot to remember prior user interactions and provide relevant responses.
Chatbot’s personality traits that is friendly for users based on their perceptions and 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.
Challenges of getting relevant and critical information
Prioritized and preferred chatbot features
User behavioral patterns of inputting entries
Test current existing chatbot experience to identify pros and cons in product searching
Common generative AI tool to mimic a business chatbot and understand different user perceptions
It’s highly capable of tracking the page users navigate and providing relevant information
We used affinity mapping to categorize and organize findings, sorted out four main aspects of pain points user encountered, and further narrowed down two problem spaces to focus on.
We did the Crazy 8 activity to develop various preliminary sketches and design concepts to address two focused problem spaces – Threads and Journey & Chatbot Prompts. Then we revised initial sketches, incorporating them into a wireframe flow that we can potentially explore further.
Suggest initiating questions, keeping track of past conversation
Guide users to ask product inquiry questions for certain situations
Clarify unclear entries to 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...
Helping users keep
track of their past conversations
Chatbot providing personalized relevant information
Real-time responses to user challenges and intentions
Are drop-down menu and carousal selections intuitive enough for users?
Would users be overwhelmed by too many options provided?
Chatbot help users clarify or extend questions if inputs are too brief or vague
Suggestive prompts are needed when users keep backspacing their responses
Users reframe questions repetitively and require immediate real agent support
Users stay inactive, needing to be brought back into the chatbot conversation
Guide users to ask
better questions in the current step
— Balance —
Take over users’ right to control their product inquiry paces
We refined the original question flow to be vertical timeline, AI can 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 not cluttered layout to present key features and prices of products within limited screen size
Intuitive business product comparing mechanism within chatbot conversation is needed
Users can save products for comparison within the chatbot directly. And a variety of aspects are available to assess multiple saved products.
Click on “Bookmark” button to save the product, and can find saved products in the top left hamburger menu.
Scroll up “Compare” button, selecting filters and specific products to compare features, pricing, or other capabilities.
Chatbot receives the request and presents product comparison in the table content.
After incorporating Salesforce Lightning Design System to create consistent design, we conducted user testing with four participants working in business teams on the following features: Timeline, Comparing Products, and 4 Use Cases triggered by user frustrations or errors.
Click the tab to open the sticky timeline, it is attached to the chatbot screen with a dark blue background.
Click the circular clock button to open skeleton timeline, it only has skeleton of conversation progress bar without background color.
Consider a more feasible and accessible layout to present key features and prices of products within limited screen size.
More apparent indicators and texts on timeline design are needed to show where users currently navigate to.
Users tend to use short or incomplete phrases when using chatbot owing to convenience, which frequently lead to irrelevant responses.
Users consider it helpful to reduce their workload and frustration in getting more relevant and accurate information.
Some users suggested to add an option for typing custom inputs in case given prompts do not meet their needs.
When users are not sure what to type in, they keep backspacing their questions and responses.
Some users found it unnecessary, there should be better ways to assist them in the pause of conversation.
Users are confused about time interval of reassuring messages, which might make them feel annoyed.
Users need real agent support when chatbot responds to users’ questions three times but still can’t provide accurate information.
"Message" option make users confused whether it directs to external text message or received chatbot message.
"Email" option is not suitable for this situation since users feel like getting immediate responses to address problems.
Users might be inactive for a while because of not getting useful information, chatbot needs to re-engage users with supportive message.
Some users suggested that receiving reminders after about five minutes of inactivity would be ideal.
Most users preferred #02 because “Explore More” in #01 is more confusing about what result it will direct to.
We aimed to evaluate if the user flow of comparing products is smooth and accessible without extra guidance., and test if the comparing filter with different aspects can genuinely assist users to find the most suitable business solution for users.
The tab “Compare” to scroll up is still not intuitive for lots of users, they suggested to simplify product comparing process by maintaining a natural conversation within chat.
Users consider the comparison table concise and important for them to consider different aspects of products.
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.
Redirect users to sales team while encountering unclear entry
Clarifying selections for users to ask questions more precisely
When users struggle to reframe inquiry and keep backspacing for three times, the input suggestion will show 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.
Concise product information and comparison table within chat streamline users’ decision making in product discovery. Several filters organize differences between products for users to compare intuitively.
Plain texts and lengthy details of product suggestions list
Summarize key features and can add to compare products
Timeline is created timely based on topics of chatbot conversation. Users can navigate through different sections and retrieve relevant information they need easily.
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.
Only provide real agent support 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 guide users back to interactions by providing three contextually relevant and actionable options.
Users can holistically explore product details and maintain consistent content in chatbot conversation while navigating through 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 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.
