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:

  1. 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.

  2. 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.

  3. 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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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

  1. Navigation research: I studied frequently used navigation patterns to ensure the design would be intuitive and familiar to users.

  2. Cross-product testing: Rigorous testing of navigation styles, colors, and accessibility across all products ensured a consistent and accessible experience.

  3. Market research: Exploring inspiration and design directions from competitors and industry leaders informed our design choices.

  4. Persona analysis: Understanding who would be using AI (brokers, admins, etc.) helped tailor the AI interface to meet specific user needs.

  5. User feedback: Direct input from users on how AI could assist them with Buildout ensured our solution addressed real user needs.

  6. 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

  1. Universal navigation: The new navigation was designed to work seamlessly across all products, promoting a unified user experience.

  2. Accessibility-driven color choices: Colors were selected based on accessibility standards to ensure all users could effectively interact with the new features.

  3. AI bot identity: Creating a distinct identity for the AI bot aids in quick recognition, setting it apart from other interface elements.

  4. Design system integration: The new popup design was created within the constraints of the current design system, maintaining overall product consistency.

03. FEEDBACK

  1. Action and chat session tracking: This allows us to measure real-world usability and identify areas for improvement.

  2. AI Chatbot usage tags: Tracking how and where users interact with the AI Chatbot provides insights for future refinements.

  3. 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