AI Chatbot
My Role:
UI/UX Lead Designer
UX Researcher
Tools:
Figma
Fullstory
Timeline:
December 2023 - February 2024
Problem
To keep up with tech industry standards, AI was added to assist users. However, this introduced several challenges:
Distinction between AI and human support: The website already had a help button for the support team. We needed to clearly differentiate when users should interact with AI versus human support.
Universal placement across products: With three different products using distinct navigations, finding a universal location for the AI popup that would be consistent and intuitive across all products was crucial.
Educating users on AI capabilities: We needed to effectively communicate the range of tasks AI could assist with, ensuring users understood its capabilities and limitations.
Solution
Unified navigation design: By creating a new navigation system that works across all products, we ensure consistency and reduce user confusion. This decision was based on the need for a cohesive user experience across the platform.
Strategic AI popup placement: We positioned the AI popup in a distinct location from the support help button. This separation was designed to visually and functionally differentiate AI assistance from human support, reducing potential user confusion.
Contextual AI buttons: I integrated AI buttons in specific areas of the app to auto-populate descriptions. This decision was made to provide immediate, contextual assistance, demonstrating AI's capabilities in real-time.
Guided prompts: I implemented prompts to guide users in formulating questions for AI. This helps users understand the scope of AI assistance versus human support team capabilities, setting appropriate expectations.
Question history feature: Adding a way for users to view their previously asked questions serves multiple purposes: it allows users to refer back to earlier interactions, reduces repetitive queries, and helps users learn from past interactions about AI capabilities.
Progress
01. RESEARCH
Navigation research: I studied frequently used navigation patterns to ensure the design would be intuitive and familiar to users.
Cross-product testing: Rigorous testing of navigation styles, colors, and accessibility across all products ensured a consistent and accessible experience.
Market research: Exploring inspiration and design directions from competitors and industry leaders informed our design choices.
Persona analysis: Understanding who would be using AI (brokers, admins, etc.) helped tailor the AI interface to meet specific user needs.
User feedback: Direct input from users on how AI could assist them with Buildout ensured our solution addressed real user needs.
Prompt research: We investigated effective prompts to guide users in asking AI questions about their properties, enhancing the utility of the AI system.
02. DESIGN
Universal navigation: The new navigation was designed to work seamlessly across all products, promoting a unified user experience.
Accessibility-driven color choices: Colors were selected based on accessibility standards to ensure all users could effectively interact with the new features.
AI bot identity: Creating a distinct identity for the AI bot aids in quick recognition, setting it apart from other interface elements.
Design system integration: The new popup design was created within the constraints of the current design system, maintaining overall product consistency.
03. FEEDBACK
Action and chat session tracking: This allows us to measure real-world usability and identify areas for improvement.
AI Chatbot usage tags: Tracking how and where users interact with the AI Chatbot provides insights for future refinements.
User sentiment analysis: Monitoring users' angry messages helps identify pain points and areas where the AI or interface may be falling short, informing future iterations.
Conclusion
This approach demonstrates a user-centered design process, with decisions driven by research, testing, and user feedback, aiming to create an intuitive and effective AI-enhanced user experience.
Design Process
Chatbot Placement Design Exploration
New Navigation Styling
Final Mockups
Final Chatbot
Select prompts to start a session or write a message
Viewing same day interactions
View history
AI help buttons