Skip to main content
UI Coach Logo
Advanced

Bilingual Live Conversation

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

Mobile, Responsive web2 to 4 hours

The brief

Understand the problem

Background

Live translation can help people communicate across languages, but tone, names, measurements, and specialist terms may be mistranslated. Participants need transparency and an easy correction loop.

User context

Aya speaks Japanese and is coordinating an apartment repair with Luis, who speaks Spanish. Both need a reliable record of dates, costs, and access instructions.

Product problem

Conversation should remain fluid while important translation uncertainty and corrections are visible to both people.

Objective

Create language setup, translated conversation, clarification, and corrected-message states for a two-person chat.

What to design

Define the experience

Required experience

  • Confirm preferred reading and writing languages
  • Send and receive translated messages
  • Reveal original text and uncertain phrases
  • Correct a translation with shared history

Screens and states

  • Language setup
  • Translated chat
  • Message comparison
  • Correction confirmation

Core user flow

Follow the critical path

  1. 01

    Aya and Luis each confirm their language

  2. 02

    Aya sends an access time that appears translated for Luis

  3. 03

    Luis opens the original because the time phrase is flagged

  4. 04

    Aya clarifies it and both see the correction

Product rules

Requirements and constraints

Requirements

  • Keep original text available beside every translation
  • Flag low-confidence names, numbers, and domain terms
  • Show edits and corrections to all participants
  • Support screen readers and mixed writing directions

Constraints

  • Translation cannot be presented as certified interpretation
  • Participants must know when language processing occurs
  • Deleted messages should follow the conversation's shared policy

Reality check

States worth considering

A message mixes languages
The connection drops mid-send
A phrase has several meanings
One user changes language during the chat

Finish line

What to deliver

  • Four responsive chat screens featuring uncertainty and correction

Optional direction

Visual resources

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

Font pairing
LobsterArimo

Lobster & Arimo

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

Icons
Illustrations

Keep practicing

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
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

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.

Mobile4 hours plus
Interaction DesignInformation Architecture
Advanced
Food and dining

Choose Your Restaurant Table

Design a reservation flow that lets diners request a specific available table or seating zone.

Mobile2 to 4 hours
AccessibilityInteraction Design
Advanced
Healthcare

Dependent Appointment Rescheduling

Design a healthcare rescheduling flow that protects linked appointments, preparation steps, and transport arrangements.

Responsive web2 to 4 hours
Service DesignInteraction Design