Work

Kumamotalk — Interactive AI Conversation Bot

An interactive AI conversation bot built for Kumamoto EXPO 2025 in a 3-person team. I designed and implemented the frontend — face-detection-driven reactions and microphone-aware interactions — and the bot was used by 80+ visitors at the event.

Role
Frontend Engineer & UI/UX Designer
Year
2025
Fields
Frontend / AI / ML / UI / UX
Stack
  • Next.js
  • React
  • TypeScript
  • face-api.js
  • TensorFlow.js
  • react-mic
Kumamotalk booth interface: a red-framed screen greeting the visitor in Japanese, with language buttons for Japanese, Taiwanese, and English

What shipped

  • Face-aware interactions

    Browser-based face detection lets the bot respond to the visitor standing in front of it.

  • Microphone-aware flow

    Recording and permission states are explicit, so visitors always know what the bot is doing.

  • Expo-ready interface

    Designed for walk-up use: legible at distance, forgiving of first-time users.

  • 3-person delivery

    Designed and implemented the frontend within a 3-person team.

What changed

  • Used by 80+ visitors at Kumamoto EXPO 2025.
  • Face detection and microphone handling run entirely in the browser.
  • The frontend — UI/UX design and implementation — was my contribution within the 3-person team.
Process details

A bot that has to work in a noisy hall

Expo visitors walk up cold: no manual, no patience, one chance to understand what this thing does. The interface had to invite a conversation and show its state at a glance — listening, thinking, speaking.

Everything had to run in the browser on event hardware. Face detection had to feel responsive rather than eerie, and the microphone flow had to handle permission and recording states without ever stranding a visitor.

Design the conversation, then engineer the senses

  1. Interface

    A conversation UI built for a booth

    I designed the interaction flow for walk-up visitors: large states, obvious affordances, and a dialogue layout that reads from a distance.

  2. Perception

    Face detection as feedback, not surveillance

    face-api.js and TensorFlow.js run in the browser so the bot can react to the visitor in front of it — attention drives the conversation's rhythm.

  3. Voice

    A microphone flow with no dead ends

    react-mic drives the recording states with explicit status feedback: requesting permission, listening, processing — every state visible.

Design file

Open in Figma
The full UI design file — screens, states, and components for the booth interface.Drag to pan, pinch or Ctrl + scroll to zoom
Figma frame 01 (placeholder)
Placeholder — Figma frame 01
Figma frame 02 (placeholder)
Placeholder — Figma frame 02
Figma frame 03 (placeholder)
Placeholder — Figma frame 03
Figma frame 04 (placeholder)
Placeholder — Figma frame 04

Faris Znafis

Loading portfolio