TP

TPUX Patterns

Experience Design · Tapo. Sign in to continue.

TPTPUX Patterns / Aireal / aireal-chat

Draft: check notes and decisions with the team before handoff.

Tapo · Aireal

Aireal Chat UX/UI improvements

From today's pop-up to full-screen chat with a prominent composer, clear voice input, visible Insights, and answers with proof.

Status
Exploring
Owner
Taylor Childers
Contributors
TCTC
Updated
October 19, 2026

Product docs

Design files

Principles

  1. 01

    Allow deep previews in chat

    Opening an Insight, card or result happens inside the conversation, not in a submenu. The composer stays in reach so they can keep asking.

  2. 02

    Chips follow the content

    Chips and the menu come from what's on screen: an automation suggests automation actions, product Q&A suggests follow-up questions, a Smart Report suggests report actions. With nothing in view, chips show what Aireal can do.

  3. 03

    Every answer leads somewhere

    Replies end on a next action or a follow-up built from data we already have, never a dead end.

    “Want me to turn this into an automation?”

Flow

Figma prototype

    Open in Figma ↗

    Decisions

    D4

    Pop-up → full-screen transition

    Exploring

    3.1.1

    Decision and rationale

    Text and voice entry both open full screen. Logo-anchored navigation and top-down chat are out.

    Options considered
    1. Text input → full screenChosen

      Tap the field; pop-up grows edge to edge.

    2. Voice input → full screenChosen

      Tap the mic; listening opens full screen.

    3. Logo-anchored navigationRejected

      Docked logo doubles as a back pill.

    4. Top-down chat + Daily BriefRejected

      Soft fades; Daily Brief returns home.

    D5

    Greeting on scroll

    Proposed

    Decision and rationale

    Docking logo is the primary pattern. The docked logo is the way back to the top.

    Options considered
    1. A · Dock into headerChosen

      Logo shrinks 54 → 24 and docks left.

    2. B · Large-title collapseRejected

      iOS-style 17pt title.

    3. C · Shrink and fadeRejected

      Parallax; cards glide over.

    4. D · Logo-only markRejected

      Logo stays centered at 32.

    5. E · Greeting chipRejected

      Frosted pill; tap to top.

    D6

    Voice: Send sends, Stop reviews

    Proposed

    3.2.33.2.4

    Decision and rationale

    Recording stays obvious and reversible.

    Options considered
    1. Separate Send and StopChosen

      Fast path and fix-it path, both visible.

    2. Always reviewRejected

      Extra tap; half of voice starters already drop.

    3. Auto-send on silenceRejected

      No way to fix a misheard word.

    Open questions

    • 3.2.2: Where is last-used input stored?
    • 3.3.1: Where do New Chat and Feature Center live?