Find the right work
Make region, sentiment and priority visible before opening a conversation.
PRODUCT DESIGN CONCEPT · SOCIAL LISTENING · AI-ASSISTED WORKFLOW
Relay
From global conversations to considered responses.
Relay brings regional social conversations into one focused workspace. I designed a three-screen journey to help teams prioritize issues and prepare AI-assisted responses while keeping final decisions human-led.
- Project:
- Self-initiated product design concept.
- My Role:
- Product design (UX, IA, UI & Design System).
- Scope:
- Three core desktop screens.
- Audience:
- Community managers & supervisors.
- Tools:
- Figma, Google Stitch & AI tools.
- Context:
- Fictional sample data for Lumi Chocolate.
Overview — One workspace, three levels of focus
Social conversations arrive through different channels and markets, but responding well requires more than spotting a negative comment. Teams need to understand the issue, see any earlier contact and choose an appropriate next step.
Relay connects a global overview, a filtered conversation queue and a focused conversation detail view. The concept uses a chocolate brand across the US, UK and Europe, with Europe treated as excluding the UK to avoid overlapping regional totals.
The challenge — Keep context while narrowing the task
The design challenge was to make a large conversation space manageable without losing the context behind each customer issue. A regional overview alone cannot support a response, while showing every message and action at once makes prioritization harder.
Three Design Priorities
Understand the whole issue
Keep public comments and related private messages distinguishable but connected.
Retain human control
Treat AI output as a draft and make uncertainty visible before sending.
Intended users and tasks
Community Manager
Scan incoming conversations, filter relevant work, read the source messages, prepare a reply and escalate when needed.
Supervisor
Review conversations that need attention, adjust ownership and support escalations.
Workflow — Overview, prioritize, respond
A three-step progression guides community managers from broad regional metrics to focused response preparation:
1. Global overview
Choose the market that needs attention.
2. Conversation queue
Filter by sentiment and open a relevant conversation.
3. Conversation details
Read the source, review AI assistance and prepare a reply.
Region and sentiment provide the context for the list. Returning from a conversation should preserve the queue's filters and position. Exceptional is an independent flag that can overlap positive, negative or neutral sentiment.
A key iteration — Separate browsing from responding
An earlier layout included a conversation list, full thread and reply composer on the second screen, followed by another response-review screen. This repeated the task and made the transition between screens less clear.
I revised the structure so that the second screen is dedicated to browsing conversations and the third contains the selected thread and response tools. This gives each screen a clear purpose and makes the next action easier to explain.
Screen 01 — Global overview
Identify where attention is needed.
The overview brings total mentions, sentiment summaries and regional entry points into one starting view. A separate attention table surfaces individual conversations that may need a closer look.
Regional Entry Points
Regional cards create clear entry points into market-specific conversations.
Clear Sentiment Labels
Positive, negative and neutral labels make sentiment understandable beyond color.
Attention Table
The attention table connects the summary view to individual customer issues.
Screen 02 — Conversation queue
Find the next conversation to review.
The queue turns the selected region into a focused list of customer comments. Sentiment tabs, filter chips and row-level details help the user compare issues before opening one conversation.
Filter Visibility
Visible UK and Negative filters explain why these conversations are in the list.
Triage Support
Channel, product condition, sentiment, priority and status support triage.
Direct Row Action
A row action provides a direct transition into the selected conversation.
Screen 03 — Conversation details
Respond with context and human judgment.
The detail view brings the public comment and related private message together while keeping their visibility clearly labeled. Alongside the source conversation, the AI assistant summarizes the issue and suggests a reply. A separate composer gives the user a place to prepare the final response.
Source Context
The source conversation stays visible beside AI assistance so the suggestion can be checked against the original messages.
Draft Boundaries
Draft-only labeling and an explicit warning identify the limits of the available information.
Governed Handoff
Assignment, escalation and a review-before-send action support a deliberate next step.
Responsible AI — Assistance with visible boundaries
Relay incorporates artificial intelligence to streamline repetitive analysis while keeping human decision-makers accountable:
Summary Grounded in Source Messages
Keep the original conversation available for comparison with the AI summary.
Suggested, Not Automatic
Present AI text as draft content that the user can review before preparing the reply.
Uncertainty Made Explicit
The interface warns that order status and replacement eligibility are unverified.
Privacy in Context
Public replies should avoid personal and order information; sensitive details belong in the private thread.
Human Decision
The intended send flow includes confirmation and moves the conversation to Awaiting customer rather than automatically marking it resolved.
Visual foundations — Calm surfaces, clear hierarchy
A light mint canvas and white content surfaces keep the workspace calm, while deep teal anchors navigation and primary actions. Semantic colors are paired with text labels so that meaning does not rely on color alone. Inter provides a consistent hierarchy for dashboard labels, conversation content and metadata.
Product Typography Scale
Font Family
Inter
Inter maintains clarity, legibility and contrast across high-density social listening queues and conversational details.
Display
Display40px / 48px · SemiBold (600)
Page Title
Page Title28px / 36px · Medium (500)
Section Title
Section Title20px / 28px · SemiBold (600)
Conversation Body Large
Body Large16px / 24px · Regular (400)
Body
Body14px / 20px · Regular (400)
Label & Button
Label14px / 20px · Medium (500)
Caption
Caption12px / 16px · Regular (400)
Role-Based Color Tokens (from 01-Colors.json)
Canvas & Surface Tokens
canvas
#EFF7F6canvas
#EFF7F6sidebar
#EAF4F2sidebar
#EAF4F2surface
#FFFFFFsurface
#FFFFFFsurfaceSubtle
#F5FAF9surfaceSubtle
#F5FAF9Typography & Text Roles
textPrimary
#163B3DtextPrimary
#163B3DtextSecondary
#526D70textSecondary
#526D70textMuted
#586F72textMuted
#586F72onPrimary
#FFFFFFonPrimary
#FFFFFFPrimary Actions & Brand
primary
#063D40primary
#063D40primaryHover
#0B5052primaryHover
#0B5052primaryPressed
#032B2DprimaryPressed
#032B2Dfocus
#0B6768focus
#0B6768Selection & Navigation
selected
#DDF0EBselected
#DDF0EBselectedText
#063D40selectedText
#063D40navActive
#063D40navActive
#063D40navIconSurface
#DDF0EBnavIconSurface
#DDF0EBBorders & Overlays
borderSubtle
#D9E7E4borderSubtle
#D9E7E4borderControl
#728D8AborderControl
#728D8Aoverlay
rgba(6,61,64,0.24)overlay
rgba(6,61,64,0.24)Semantic Indicators
success
#147D64success
#147D64successSurface
#E8F5EFsuccessSurface
#E8F5EFwarning
#925A0Awarning
#925A0AwarningSurface
#FFF4DFwarningSurface
#FFF4DFdanger
#B93848danger
#B93848dangerSurface
#FDECEFdangerSurface
#FDECEFDisabled States
disabledSurface
#E4ECEAdisabledSurface
#E4ECEAdisabledText
#718682disabledText
#718682Accents & Region Identity (Decorative)
accentMint
#A5DDD3accentMint
#A5DDD3accentBlush
#F2BAC3accentBlush
#F2BAC3regionUs
#DDF2EDregionUs
#DDF2EDregionUk
#FBE8ECregionUk
#FBE8ECregionEurope
#F5FAF9regionEurope
#F5FAF9Foundations Summary Target
Spacing steps: 4 / 8 / 12 / 16 / 24 / 32 / 48px · Content gaps: 16 / 24px · Card radius: 20px · Container radius: 24px · Control radius: 12px · Intended control height: 44px · Subtle shadow: 0 4px 16px rgba(6,61,64,0.04).
Accessibility considerations
The concept uses labeled status and sentiment indicators, a consistent type hierarchy and distinct public/private message labels. The next implementation pass should verify keyboard navigation, focus visibility, contrast in the final rendered components, target sizes and zoom behavior. This is not a completed accessibility audit.
Interactive Figma Prototype
Experience the complete three-screen workflow from global overview through regional prioritization to response preparation.
View Interactive Prototype ↗Outcome and next steps
The current outcome is a three-screen design concept with a clear progression from regional overview to conversation review. Its main contribution is the separation of prioritization and response preparation, supported by AI assistance that remains visibly subordinate to human judgment.
Next Steps
Complete and validate the prototype interactions, test whether users can locate a relevant issue and prepare an appropriate response, and refine empty, loading, error, escalation and post-send states.
Reflection
Designing Relay reinforced the value of giving each screen one clear responsibility. AI becomes more useful when the source context, uncertainty and final user action remain easy to understand.
Explore the Relay workflow
Follow the journey from a regional signal to a considered customer response.