Message Customer Support Without Losing Context
Design an asynchronous support chat that moves between automated intake and a human agent while preserving identity, attachments, and status.
The brief
Understand the problem
Background
Support chats may begin in a small site widget, continue after sign-in, pause for hours, and resume with a different agent. Customers should not have to repeat information at every transition.
User context
Wen is contacting an airline about a damaged suitcase. She starts from her phone, uploads photos, and needs to leave before an agent becomes available.
Product problem
Chat conventions imply immediacy even when support is asynchronous. Identity changes, attachment failures, and agent handoffs can make the customer unsure whether the case is still active.
Objective
Create a support conversation from issue intake through asynchronous human response and resolution.
What to design
Define the experience
Required experience
- Compact issue intake within a chat context
- Identity verification without losing drafted content
- Attachment upload and accessible status
- Automated-to-human handoff with wait expectations
- Resolved conversation and reopen path
Screens and states
- Chat intake
- Identity handoff
- Conversation
- Away notification
- Resolution summary
Core user flow
Follow the critical path
- 01
Wen selects damaged baggage and enters her trip reference
- 02
She signs in and retains the details already provided
- 03
She uploads photos and receives an expected response window
- 04
She leaves and returns from a notification when an agent replies
- 05
She reviews the resolution and closes the case
Product rules
Requirements and constraints
Requirements
- Distinguish automated, system, customer, and human-agent messages
- Preserve drafts and context across authentication
- Show attachment upload, scan, and failure states
- Communicate whether the conversation is live or asynchronous
- Summarize context for a new agent without hiding the full history
- Provide a clear reopen policy after resolution
Constraints
- The chat may run inside a narrow embedded panel
- Response times vary by issue and service hours
- Attachments may contain sensitive personal information
- The user may switch devices
Reality check
States worth considering
Finish line
What to deliver
- Design five mobile-first screens for intake, identity, asynchronous conversation, and resolution.
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Quattrocento & Quattrocento Sans
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Quattrocento & Quattrocento Sans
Clear interface writing gives people the confidence to understand what changed and decide what to do next.