WEB APP - AI
WEB APP - AI
Circle | Product Lead & Designer
My contributions: End-to-end UX — UI & prototyping
PROBLEM
PROBLEM
Users working with AI often lose context when toggling between chat and content views. Whether it’s a recruiter searching for candidates or a restaurant owner checking inspection details, switching back and forth makes the process disjointed and hard to follow.
Users working with AI often lose context when toggling between chat and content views. Whether it’s a recruiter searching for candidates or a restaurant owner checking inspection details, switching back and forth makes the process disjointed and hard to follow.
PROBLEM
Users working with AI often lose context when toggling between chat and content views. Whether it’s a recruiter searching for candidates or a restaurant owner checking inspection details, switching back and forth makes the process disjointed and hard to follow.
GOAL
GOAL
Design an interface that enables users to talk to AI and see results instantly—on one screen. The experience should feel fluid, context-rich, and adaptive to what the AI is showing.
Design an interface that enables users to talk to AI and see results instantly—on one screen. The experience should feel fluid, context-rich, and adaptive to what the AI is showing.
GOAL
Design an interface that enables users to talk to AI and see results instantly—on one screen. The experience should feel fluid, context-rich, and adaptive to what the AI is showing.
Approach
To understand how users naturally interact with AI-driven systems, I studied workflows across three distinct user groups — restaurant owners, recruiters, and internal teams. Through these observations, I noticed a clear pattern: users don’t always need the same kind of support. Sometimes they seek conversational guidance to make decisions, while at other times, they prefer quick visual feedback to act immediately.
This led to a key insight: the interface should intelligently adapt its focus between conversation and results depending on the AI’s response type. When the AI provides reasoning or recommendations, the layout emphasizes the chat. When the AI delivers actionable outcomes — like reports, candidate matches, or inspection data — the interface transitions to a results-first view. This dynamic balance helps maintain both clarity and engagement throughout the workflow.
Approach
To understand how users naturally interact with AI-driven systems, I studied workflows across three distinct user groups — restaurant owners, recruiters, and internal teams. Through these observations, I noticed a clear pattern: users don’t always need the same kind of support. Sometimes they seek conversational guidance to make decisions, while at other times, they prefer quick visual feedback to act immediately.
This led to a key insight: the interface should intelligently adapt its focus between conversation and results depending on the AI’s response type. When the AI provides reasoning or recommendations, the layout emphasizes the chat. When the AI delivers actionable outcomes — like reports, candidate matches, or inspection data — the interface transitions to a results-first view. This dynamic balance helps maintain both clarity and engagement throughout the workflow.
Solution
We created a responsive dual-panel layout that adjusts according to the context:
Default state: 30% chat (left) + 70% content (right).
AI suggesting / explaining: Content expands to 100% width, with a compact strip on top showing the last chat or query for continuity.
AI highlighting key results: A 50% overlay pop-up appears with the most relevant data or candidate, ensuring focus without breaking the user’s flow.
We created a responsive dual-panel layout that adjusts according to the context:
Default state: 30% chat (left) + 70% content (right).
AI suggesting / explaining: Content expands to 100% width, with a compact strip on top showing the last chat or query for continuity.
AI highlighting key results: A 50% overlay pop-up appears with the most relevant data or candidate, ensuring focus without breaking the user’s flow.
We created a responsive dual-panel layout that adjusts according to the context:
Default state: 30% chat (left) + 70% content (right).
AI suggesting / explaining: Content expands to 100% width, with a compact strip on top showing the last chat or query for continuity.
AI highlighting key results: A 50% overlay pop-up appears with the most relevant data or candidate, ensuring focus without breaking the user’s flow.
DESIGN
DESIGN
DESIGN
Default State – Split View
(Chat + Content)
Default State – Split View (Chat + Content)
Left Panel (30%) – Conversational AI interface where users can type or speak queries.
Right Panel (70%) – Displays contextual data such as inspection reports, job listings, or recommendations.
The split layout helps users follow the conversation while simultaneously seeing visual responses.
Left Panel (30%) – Conversational AI interface where users can type or speak queries.
Right Panel (70%) – Displays contextual data such as inspection reports, job listings, or recommendations.
The split layout helps users follow the conversation while simultaneously seeing visual responses.
Left Panel (30%) – Conversational AI interface where users can type or speak queries.
Right Panel (70%) – Displays contextual data such as inspection reports, job listings, or recommendations.
The split layout helps users follow the conversation while simultaneously seeing visual responses.
Full Content View – When AI Is Explaining or Showing Large Results
Full Content View – When AI Is Explaining or Showing Large Results
The content expands to full width (100%), taking complete focus.
A thin strip at the top shows the last user query or AI prompt (e.g., “Your next inspection is due in 3 weeks…”).
Ideal for scenarios where the AI generates longer insights like a full candidate list, a corrective plan, or a complete vendor report.
The content expands to full width (100%), taking complete focus.
A thin strip at the top shows the last user query or AI prompt (e.g., “Your next inspection is due in 3 weeks…”).
Ideal for scenarios where the AI generates longer insights like a full candidate list, a corrective plan, or a complete vendor report.
The content expands to full width (100%), taking complete focus.
A thin strip at the top shows the last user query or AI prompt (e.g., “Your next inspection is due in 3 weeks…”).
Ideal for scenarios where the AI generates longer insights like a full candidate list, a corrective plan, or a complete vendor report.
Highlight View – Overlay Pop-Up
(Best Fit or Recommendation)
Highlight View – Overlay Pop-Up (Best Fit or Recommendation)
When AI wants to emphasize a result (like a top candidate or best vendor), a 50% width overlay appears.
Background dims subtly to maintain focus on the highlighted section.
Chat remains visible in the background but inactive during the overlay view.
When AI wants to emphasize a result (like a top candidate or best vendor), a 50% width overlay appears.
Background dims subtly to maintain focus on the highlighted section.
Chat remains visible in the background but inactive during the overlay view.
When AI wants to emphasize a result (like a top candidate or best vendor), a 50% width overlay appears.
Background dims subtly to maintain focus on the highlighted section.
Chat remains visible in the background but inactive during the overlay view.
Transition Behavior
Transition Behavior
Smooth slide and fade animations ensure no hard breaks between chat and content states.
AI responses dynamically trigger the correct layout state depending on context.
Each transition reinforces continuity — users always know what’s happening and why.
Smooth slide and fade animations ensure no hard breaks between chat and content states.
AI responses dynamically trigger the correct layout state depending on context.
Each transition reinforces continuity — users always know what’s happening and why.
Design Principle
Design Principle
The interface embodies Circle’s mission to make complex tasks conversational and visual. Instead of choosing between talking to AI and seeing data, users can do both — effortlessly.
The interface embodies Circle’s mission to make complex tasks conversational and visual. Instead of choosing between talking to AI and seeing data, users can do both — effortlessly.
REFLECTION
REFLECTION
Designing the Web App AI challenged us to merge two modes of interaction — conversation and visualization — without one overpowering the other. Our biggest learning was understanding when users want to talk versus when they want to see.
Early testing showed that users loved the idea of a single conversational space but got lost when results appeared in separate windows. That insight pushed us toward a dynamic, adaptive layout — one that could flex between split-view, full-view, and overlay without losing flow.
The process reinforced a key principle: AI should feel like a partner, not a separate interface. By giving it a clear visual rhythm — chat when needed, expand when necessary, and highlight when it matters — we created a more human, intuitive experience.
This project reminded us that great AI design isn’t just about intelligence; it’s about clarity, timing, and trust.
Designing the Web App AI challenged us to merge two modes of interaction — conversation and visualization — without one overpowering the other. Our biggest learning was understanding when users want to talk versus when they want to see.
Early testing showed that users loved the idea of a single conversational space but got lost when results appeared in separate windows. That insight pushed us toward a dynamic, adaptive layout — one that could flex between split-view, full-view, and overlay without losing flow.
The process reinforced a key principle: AI should feel like a partner, not a separate interface. By giving it a clear visual rhythm — chat when needed, expand when necessary, and highlight when it matters — we created a more human, intuitive experience.
This project reminded us that great AI design isn’t just about intelligence; it’s about clarity, timing, and trust.
REFLECTION
Designing the Web App AI challenged us to merge two modes of interaction — conversation and visualization — without one overpowering the other. Our biggest learning was understanding when users want to talk versus when they want to see.
Early testing showed that users loved the idea of a single conversational space but got lost when results appeared in separate windows. That insight pushed us toward a dynamic, adaptive layout — one that could flex between split-view, full-view, and overlay without losing flow.
The process reinforced a key principle: AI should feel like a partner, not a separate interface. By giving it a clear visual rhythm — chat when needed, expand when necessary, and highlight when it matters — we created a more human, intuitive experience.
This project reminded us that great AI design isn’t just about intelligence; it’s about clarity, timing, and trust.