Tablet on woven mat screen showing a chatbot conversation and no documents created yet.

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

Sequence of seven screenshots of a dark-themed software interface menu from Buildout, showing navigation options such as Database, Deals, Showcase, Back Office, and Reports, with submenus like Deals, Broker Earnings, Deal Contracts, Deal Planner, Transactions, Listings, Leads, Email, Comps, Vouchers, Receivables, Deposits, Payables, and user account Mandy Curtis.
A screenshot showing various text icons in different colors on a dark background, with a contrast adjustment panel revealing the icons include a square, circle, and triangle.

Final Chatbot

Screenshots of a chatbot interface with a purple alien icon, showing different prompts and conversations about property listings and queries.

Select prompts to start a session or write a message

Screenshots of a chat interface with an AI assistant named Buildout. The left image shows the original chat, while the right image shows the chat with some edited text. The interface includes a purple AI icon, a welcome message, a question about property comparison, a block of placeholder text, and options to view history or message the AI.

Viewing same day interactions

Screenshot of an AI chatbot interface with a dark blue header displaying a purple smiling AI icon. The left side shows a list of questions related to commercial properties, with a 'Start New Thread' button at the top and a 'Back' button at the bottom. The questions include comparisons of property pricing, features, future trends, and incentives. The right side shows a chat conversation where the AI responds with a question and a placeholder text about property comparison, along with an option to view history and continue the discussion.

View history

Exterior photo of a modern high-rise glass office building with greenery and a sidewalk in the foreground, blue sky with clouds in the background.

AI help buttons