Skip to main content
UI Coach Logo
Back to challenges
Hard

Bilingual Live Conversation

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

Mobile, Responsive web

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.

Color palette
#1B1A1A
#E9C5B7
#716561
#8B8C8A
#8C848C
Font pairing
LobsterArimo

Lobster & Arimo

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

Icons
Illustrations