Skip to content
English
  • There are no suggestions because the search field is empty.

Design Brief: Conversational Analytics

Project Introduction

Build a conversational copilot inside the Client Portal that lets portal users ask plain-language questions and receive grounded answers, status lookups, and inline charts/tables. The experience includes a chat UI with inline renderers (tables, Chart.js visuals with copy/download), backed by an orchestrator (LLM + tools) that provides a safe SQL translator (parameterized, allow-listed views with row/time limits), tenant-scoped order/tracking lookups, and RAG over product documentation with citations. Guardrails include observability of prompts/responses, cost/latency, success/error tagging, and human-fallback paths. Out of scope: any state-changing actions, complex multi-hop analytics, external data joins, and proactive recommendations.

Users and Needs

  • Portal users needing order/tracking answers → Quickly get trusted status without navigating multiple screens or opening tickets; identity-aware lookups scoped to their orders; results easy to copy/download. Constraints: tenant-scoped access; no state-changing actions.

  • Non-technical portal users seeking analytics → Ask questions like “How many orders in the last 6 months?” and see inline charts/tables they can copy/download. Constraints: queries pass through a safe SQL translator with allow-listed views and row/time limits; no complex multi-hop analytics; no external data.

  • Portal users with “how do I” questions → Self-serve answers via documentation with citations. Constraints: RAG is limited to product docs; human-fallback available when confidence is low or content is missing.

Tasks

  1. Enter a plain-language question in the portal chat (e.g., counts, trends, groupings).

  2. View a grounded response with inline visualization or table when applicable.

  3. Retrieve order/tracking details via identity-aware lookup or by specific ID.

  4. Ask support “how do I” questions and receive cited answers from product documentation.

  5. Copy or download the returned table/chart from the inline renderer.

  6. Use the human-fallback path when the copilot cannot answer or guardrails are triggered.

Timeline and Deliverables

Phase

Core Activities

Typical Outputs

Kick-off & Alignment

Scope review, success-metric check, tech constraints, design-system audit

  • Updated brief & open questions list

Lo-Fi User Flows + Wireframes

Map happy/edge flows, rapid sketching, internal critique

  • Annotated flow diagrams - Low-fidelity wireframes

Hi-Fi Visual Design

Apply branding, states, responsive breakpoints, define micro-interactions

  • High-fidelity Figma screens - Component specs

Interactive Prototype

Connect screens, add motion, input validation states, animate micro-interactions

  • Clickable prototype

Usability Test & Iteration

5–8 participant test, analytics review, iterate

  • Test report - Revised prototype

Accessibility & Edge-Case Review

WCAG checks, keyboard nav, color contrast fixes

  • a11y checklist

Design QA & Dev Handoff

Redlines, tokens, asset exports, Figma links, design-QA support during build

  • Finalized Figma screens - Full prototype + Loom walkthrough