Persistent conversation shell
The chatbot popup remains available across website pages so navigation does not break the active conversation or force the user to restart.
CASE STUDY / 01 / AI PRODUCT
AI Product
Chatbot.
A website chatbot designed and front-end developed as a persistent product-assistance layer: it answers only about the business and its products, can recommend products as cards, and keeps the conversation alive while the user moves across pages.
TECHNICAL PRODUCT PAGEFind the right material
for the application.The page remains usable while the assistant keeps its context.
for the application.The page remains usable while the assistant keeps its context.
● Response ready Open chat
THE PROBLEM
Make product help feel native to the website, not bolted on.
The assistant needed to stay useful across navigation, support product discovery visually and handle delayed responses without forcing the user to stare at an open popup. The interface therefore had to manage conversation state, product recommendations and notification behavior as one small product inside the larger website.
ROLEDesign + frontend
SCOPEBusiness + product answers
CONTEXTPersists across pages
UIPopup product assistant
WHAT I DESIGNED + BUILT
Product recommendation cards
When the assistant recommends a product, the answer can render a product card instead of burying the recommendation inside plain text.
Complete popup behavior
Minimize, close and start-new-chat states were designed as part of the core interaction model rather than treated as browser-window decoration.
Delayed-response notification
If the user minimizes or closes the popup while a response is still being generated, the interface can notify them when the answer becomes available.
Frontend state handling
The UI was developed to handle message states and interaction transitions cleanly so the experience feels like a reliable product feature, not a demo.
KEY PRODUCT DETAILS
Business-only scope
The assistant is intentionally framed around the business and product knowledge instead of pretending to answer everything.
Context continuity
A user can browse another page and return to the assistant without losing the conversational thread.
Visual recommendation
Product cards make suggested items scannable and actionable inside the same conversation.
Non-blocking wait state
Users are free to continue browsing while a slow response is generated.
Clear reset control
Starting a new chat is explicit, so context changes do not become confusing.
Mobile-safe popup
The interaction model adapts to smaller screens rather than relying on desktop hover behavior.