Skip to main content
UI Coach Logo
Advanced

Conversation Handoff Across Chat and Calls

Design a messaging workspace where a group can move between text, voice, video, and shared files without losing context.

Mobile, Desktop web4 hours plus

The brief

Understand the problem

Background

Communication products often add many channels but leave important decisions trapped in calls or buried beside large attachments. Switching modes should preserve who participated and what happened next.

User context

A distributed production team uses a group conversation to review a launch issue. They begin in chat, start a short call, share a large video, and need absent teammates to understand the decision later.

Product problem

The design must connect synchronous and asynchronous activity while keeping call controls, file status, and message delivery understandable under unreliable networks.

Objective

Create a group conversation flow that starts a call, shares files, captures decisions, and supports an asynchronous return.

What to design

Define the experience

Required experience

  • Multi-person conversation
  • Voice or video call transition
  • Large file transfer
  • Decision summary and follow-up

Screens and states

  • Conversation
  • Active call
  • File transfer detail
  • Post-call summary
  • Delivery failure state

Core user flow

Follow the critical path

  1. 01

    The team discusses an issue in chat

  2. 02

    Three members start a call from the thread

  3. 03

    A large video uploads while they talk

  4. 04

    The host records a written decision and assigns follow-up work

Product rules

Requirements and constraints

Requirements

  • Keep the originating message visible from the call
  • Show participant and connection status
  • Allow large uploads to pause and resume
  • Record decisions without requiring call recording
  • Distinguish sent, delivered, failed, and still-uploading content

Constraints

  • Some members have low bandwidth
  • Calls and file transfers compete for connectivity
  • External guests have restricted file access

Reality check

States worth considering

A participant joins late
The call drops
Upload completes after the conversation closes
A guest cannot open a file
A decision is edited later

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Launch thread

  • Video upload: cut-07.mp4, 68 percent
  • Call: 3 participants, 12 minutes
  • Decision: use cut 06 for launch
  • Follow-up: Nia to update captions by 16:00

Finish line

What to deliver

  • Five mobile or desktop screens
  • A state map for message, call, and upload transitions

If you want more

Optional extensions

Add live captions
Design a guest invitation flow

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
SacramentoMontserrat

Sacramento & Montserrat

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
Messaging

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.

Mobile2 to 4 hours
Interaction DesignContent Design
Advanced
Messaging

Anonymous Community Question Inbox

Design a moderated messaging space where people can ask sensitive questions without inviting unrestricted anonymous contact.

Mobile2 to 4 hours
Trust and SafetyContent Design
Advanced
Messaging

Bilingual Live Conversation

Design a real-time text chat that translates messages while preserving access to the original wording.

Mobile2 to 4 hours
Interaction DesignContent Design
Intermediate
Messaging

Live Voice Translation for a Service Counter

Design a spoken translation flow that helps two people complete a practical conversation while keeping original speech and uncertainty accessible.

Mobile2 to 4 hours
Interaction DesignAccessibility
Advanced
Collaboration

Collaborative Lecture Notes

Design a shared note space where a class can combine observations, discuss uncertain points, and preserve a trustworthy study record.

Desktop web4 hours plus
Product ThinkingInformation Architecture
Advanced
Collaboration

Collaborative Presentation Storyboard

Design a team workspace for shaping a presentation narrative, assigning slides, and resolving feedback before a deadline.

Desktop web4 hours plus
Product ThinkingInformation Architecture