Case studies

AI Product

Chat AI — UI Kit
& Web Interface

Design System Tokens Multi-mode

An AI-based chat product for the web environment, focused on clarity, consistency and scalability.

The challenge was to create a simple interface for users while building a system robust enough to evolve — and grounded in what users actually needed, not assumptions about what they might want.

AZQ GPT chat interface: sidebar with assistants and conversation history, main chat area with input field, and an experience rating overlay with emoji scale
Chat interface — Python Expert assistant with non-intrusive integrated feedback
  • Defining the UI Kit
  • Creating semantic tokens
  • Structuring for multiple contexts (default, confidential, dark)
  • Designing the chat interface and states
  • Contextual interviews with 5 users from different profiles and roles — informing the definition of team-shared assistants and integration priorities (Jira, Confluence, Outlook)
  • Creating a RITE Testers channel (Teams) for recruiting real users for continuous testing and interviews
  • Informal usability tests identifying problems in document management, privacy classification and global chat areas

In-app feedback was practically non-existent: users had to leave the application, open Jira and log the issue manually. Contextual interviews with 5 users across different roles and responsibilities revealed distinct usage patterns and clear integration priorities — not assumptions.

Usability tests conducted informally via the RITE Testers channel identified friction in three areas: document management, privacy classification, and global chat navigation. These findings shaped the interface decisions that followed.

The focus was on a semantic system, separating intent from presentation. This enabled scalability, cross-component consistency, and better alignment with development.

  • Tokens organised by function: text, surfaces, actions, notifications
  • Clear states for primary actions
  • Reuse across modes and contexts

Chat interface principles:

  1. Reduced cognitive load

  2. Clear system feedback

  3. Explicit interaction states

  4. Non-intrusive integrated experience rating

An integrated contextual feedback area replaced the existing workflow of leaving the app to file issues in Jira. Adoption did not increase significantly, but it became a direct reporting channel without abandoning the application.

Figma variables panel: semantic collection with text, surface and icon tokens organised by group, with values for Default, Confidential and Dark Mode
Semantic tokens — collection with Default, Confidential and Dark modes
  • Consistent, clear interface
  • System ready for growth without design debt
  • Reusable UI Kit across modes and contexts
  • Fewer ad-hoc decisions on new screens
  • Priority integrations (Jira, Confluence, Outlook) defined from interviews, not assumptions
  • Contextual feedback integrated in-app, eliminating the need to leave to report issues or suggestions
Dark mode components: text fields in various states (placeholder, focused, filled), secondary buttons, tabs and radio button list
Components in dark mode
Assistants page in two layouts: single-column version and expanded side-by-side version, showing the popular assistants grid and category filters
Assistants page — responsive layouts
Input Field component documentation: default, disabled, error and focused states, hint sections, usage examples and ARIA and keyboard navigation specifications
Component documentation — Input Field