Skip to content

BRD-006 Mobile UI Optimization

BRD – Mobile Chatbot UI Space Optimization

Product: MachineAvatars
Feature: Non-Intrusive Mobile Chatbot Layout

1. Background & Problem Statement

  • On mobile devices, the MachineAvatars chatbot currently expands to full screen when opened.
  • This blocks visibility of the underlying website, reducing context and usability.
  • A full-screen chatbot experience is not suitable for all use cases and impacts engagement.

2. Objective

Optimize the chatbot UI on mobile devices so that chat interactions occur at the bottom of the screen while keeping the website content visible.

3. Scope

In-Scope

  • Chatbot UI anchored to the bottom of the mobile screen.
  • Chat window, avatar, mic icon, and send icon remain visible.
  • Website content remains partially visible and accessible behind the chatbot.

Out-of-Scope

  • Complete redesign of desktop chatbot UI.
  • Gesture-based expand/collapse behavior (unless explicitly added later).
  • Custom layouts per individual website.

4. User Personas

  • Mobile End User: Interacts with chatbot while browsing the website.
  • Admin (Indirect): Ensures better mobile engagement and usability.

5. High-Level User Flow

  1. User opens the website on a mobile device.
  2. User opens the chatbot.
  3. Chatbot appears at the bottom of the screen.
  4. User chats while still seeing the website content.
  5. User closes or minimizes the chatbot.

6. Functional Requirements

  • FR-1: On mobile devices, chatbot UI shall not occupy the full screen by default.
  • FR-2: Chat window shall be positioned at the bottom of the viewport.
  • FR-3: Avatar, mic icon, send icon, and chat input shall remain visible at all times.
  • FR-4: Website content behind the chatbot shall remain visible and scrollable.

7. Constraints & Non-Functional Requirements

  • UI must be responsive across common mobile screen sizes.
  • Chat usability must not be compromised due to reduced space.
  • No overlap with critical website CTAs where possible.

8. Acceptance Criteria

  • Given the chatbot is opened on a mobile device, when it appears, then it does not cover the entire screen.
  • Given the chatbot is active, when the user scrolls the website, then the website content remains visible.
  • Given the chatbot UI is shown, when interacting, then all chat controls are accessible at the bottom of the screen.
  • Given the chatbot is closed, when reopened, then the same layout behavior is applied.