# AI Interpreting Assistant: product design case study Rebuilding a Product That Was Explaining Itself Mid-Appointment. A landing page losing half its visitors, and a product that interrupted live sessions to explain its own settings. Both rebuilt. By Krishnachandran Ramachandran (Kaezee), end-to-end product designer. Page: https://kaezee.com/work/unicaption - **Product:** Unicaption - **Role:** Lead Product Designer - **Team:** 2 people - **Focus:** Conversion UX, Information Architecture, Visual Identity, Design Systems - **Timeline:** 3+ months - **Platform:** Web: landing page and product - **Status:** Launched - **Domain:** Real-time captioning & translation for professional interpreters **TL;DR.** A real-time captioning and translation tool for professional interpreters. I owned the design end to end: the conversion path, the product's information architecture and content, and the design system underneath. In August, with almost no ad spend, earned traffic was about double February's, and a tracked funnel now shows where visitors drop off, where the old page could not report a single click. --- ## Half the audience left before the product had a chance Every Word. Every Time. *Interpreted Perfectly.* Real-time transcription & translation for professional interpreters. Catch every word without interrupting your session. Get Started Watch Demo → No credit card · Setup in 30 seconds · Your next call is ready Real-time transcription Copilot, Not a Replacement 100+ languages ES Live Transcription LIVE 00:10 **S2** Buenos días, gracias por venir a la obra. 10:00:02 **S3** Un placer. Soy la ingeniera de obra. 10:00:04 **S4** ¿Empezamos por el segundo piso? 10:00:06 **S2** Sí. ¿El hormigón ya está vertido? 10:00:08 **S3** Desde el martes. Hoy quitamos el encofrado. 10:00:10 **S4** ¿Y los planos actualizados? 10:00:12 Live Translate Quick Translate EN **S2** Morning, thanks for coming to the site. 10:00:02 **S3** A pleasure. I’m the site engineer. 10:00:04 **S4** Shall we start with the second floor? 10:00:06 **S2** Yes. Has the concrete been poured? 10:00:08 **S3** Since Tuesday. We strip the formwork today. 10:00:10 **S4** And the updated drawings? 10:00:12 The rebuilt hero: the product shown mid-session rather than empty. **GA4, 27 Jan to 26 Feb 2026:** - **3,399** SESSIONS - **49.66%** BOUNCE. Half of all arrivals left without a single interaction. - **74%** OF TRAFFIC FROM DISPLAY ADS. Cold, paid traffic that converted nothing. - **None** CTA CLICKS RECORDED. The page could not report whether people clicked or not. That last point is where I reframed the brief. The problem was the missing measurement: the page couldn't tell *nobody reached the button* from *nobody clicked it*. So measurement became part of the design. ### Who it had to convince A professional interpreter (medical, legal, government, conference) earning $25 to $50 an hour, where a mistranslation has real consequences. They arrive wary of AI, which is usually pitched to their profession as a replacement. So the page's job was to earn credibility, show relevance and lower the risk, in that order, within seconds. **Who did what.** I owned the design end to end. The PM ran most of the conversations with the interpreter communities, which are US based. I sent my questions through the PM and designed from the answers. ### What the audit found The landing page was the visible problem. I audited the product against it too, and that found the deeper one. **Six ways to reach a setting, on one screen.** Cataloguing every control in the product surfaced the pattern: things that shaped the session sat in dropdowns beside theme preferences, and three tools that looked identical behaved three different ways. - Top rail **What shapes the output**; Logo inline; Model: Apex Gen-1 / 2 / 2.5 dropdown; Specialisation: General … Public Safety dropdown; Support: 6 items dropdown; Account: plan, quota, apps, audio source, theme dropdown - Canvas **The reading surface**; Transcription language: FR dropdown; Scroll lock · reset inline; Live Translate / Quick Translate inline; Translation language: ES dropdown; Select Transcription Language modal - Bottom rail **Tools, transport, layout, type, all in one strip**; Context modal; Dictionary panel; Notes floating; Start / Stop inline; Hide / Translate inline; Text Size: 4 steps popover inline dropdown modal panel floating popover ### The finding the product made for me The product shipped a popover that fires **during a live session** to tell the interpreter that only their microphone is being captured and where to change it. The evidence “Captioning a call or video? Right now only your microphone is captured. Switch to Mic + System to caption the other side too.” Shown mid-session, over a running transcript, with a “Show me how” button. I didn't have to argue it: the product was telling a working interpreter, mid-appointment, that one of its own settings was in the wrong place. K Account - Usage & Analytics - Billing & Plans - Download Mac App - Install Chrome Extension - Audio source Mic · System · Both - Dark mode - Log out Where it lived The one setting that decides what a session captures, filed as a preference between an app download and a theme toggle. Nobody finds it here, so the product has to teach it mid-session. ## The capture, the tools, the model, the system #### Decision 1: Two checkboxes replace three modes: the user says what to listen to, and the window shape follows. *The cost:* One picker became two switches, so the interpreter who only ever uses the microphone now confirms two things where they used to confirm one. The audit's worst finding was the audio source, the setting the popover had to explain. **The realisation underneath it:** Mic, System and Both are two independent switches, and the product was presenting three of their four combinations as mutually exclusive choices. The fourth, neither selected, could not be expressed at all, so a user could end up capturing nothing with no way to see why. - **Mic only** full window - **Device only** overlay - **Mic + Device** overlay - **Neither** Start disabled **What changed:** two checkboxes. *My microphone* and *This device*. The user never picks a mode; they say what to listen to and the window shape follows. Ticking device audio is what produces an overlay, because there has to be something playing to sit over. **In-person appointment** **My microphone** The room, or my side of the call **This device** Video, or the other side of the call Opens in the full window **Zoom call** **My microphone** The room, or my side of the call **This device** Video, or the other side of the call Opens as an overlay With the mode choice gone, the mid-session popover has nothing left to explain. #### Decision 2: The dictionary stopped being a place: look a word up where it sits, and no window opens over a live transcript. *The cost:* Selecting a word is a gesture nobody is taught. Without the tinted terms in the transcript, a first-time user could miss that lookup exists at all. - Before - **Three buttons, three window models.** Context, Dictionary and Notes sat as visual equals in the toolbar and behaved nothing alike. **Each one costs something different.** Opening all three over the live product made it concrete: one blocks, one reflows, one obscures. - **Context** Centred modal. Greys out during a session, unexplained. blocks all × Blocks everything - **Dictionary** Docked right panel. Panes drop from 690 to 470. panes reflow × Reflows live text mid-read **The worst of the three, and it looked the most reasonable.** A modal blocks you for a moment. A column that resizes re-wraps the text you are already reading. - **Notes** Floating window. Overlaps the Dictionary panel when both open. covers only × Obscures, but disturbs nothing - After - **Three window models became one surface, one popover and one unchanged notepad.** The live path, the thing an interpreter does mid-session, now opens no window at all. - **Glossary** One surface, two states. Open before Start, review after Stop. workspace idle ✓ Blocks nothing worth protecting - **Word lookup** No window. Select a word, or click one the engine marked. nothing moves ✓ Nothing moves, nothing is covered - **Notes** Unchanged. The one tool meant to stay where you put it. covers only ✓ Kept as it was ### What I changed, and why Standard General Mic + Device 3.2 hrs left K EN ▾ Live Transcription 00:14:22 S2 10:14:02 Le patient doit prendre Lisinopril 10mg deux fois par jour. S3 10:14:09 Et si j’oublie une dose le matin? S2 10:14:15 Prenez-la dès que vous y pensez. Continuez le Métoprolol chaque matin. S3 10:14:22 Est-ce que ça donne des vertiges en se levant? Live Translate Quick Translate EN ▾ Hide S2 10:14:02 Patient should take Lisinopril 10mg twice daily. S3 10:14:09 And if I forget a dose in the morning? S2 10:14:15 Take it as soon as you remember. Continue Metoprolol each morning. S3 10:14:22 Will it make me dizzy when I stand up? Glossary Notes Start Aa Comfortable Look up “pensez” Find in transcript **3** Add to glossary Copy Standard General Mic + Device 3.2 hrs left K EN ▾ Live Transcription 00:14:22 S2 10:14:02 Le patient doit prendre Lisinopril 10mg deux fois par jour. S3 10:14:09 Et si j’oublie une dose le matin? S2 10:14:15 Prenez-la dès que vous y pensez. Continuez le Métoprolol chaque matin. S3 10:14:22 Est-ce que ça donne des vertiges en se levant? Live Translate Quick Translate EN ▾ Hide S2 10:14:02 Patient should take Lisinopril 10mg twice daily. S3 10:14:09 And if I forget a dose in the morning? S2 10:14:15 Take it as soon as you remember. Continue Metoprolol each morning. S3 10:14:22 Will it make me dizzy when I stand up? Glossary Notes Start Aa Comfortable penser verbe ES pensar To think, or to have something in mind. Here: “as soon as you think of it.” Add to glossary APEX GEN-1 Left: select any word. The prompt names it, and offers Find in transcript with a count, so the common question is answered before you open anything. Right: the equivalent leads and the definition follows. An interpreter hearing an unfamiliar term needs the word they are about to say first; the explanation can come after. **The answer appears at the word.** A lookup during a live session starts with a word already on screen, so nothing has to open. The panel disappeared and took its cost with it. **The ordering was a correction.** Every draft I made led with the definition. The user need had been there from the start: an interpreter has about two seconds and needs the equivalent so they can speak it. The definition is what you read when you have time. **Two tools turned out to be one dataset.** Context is the vocabulary you load; the glossary is the vocabulary that came up. Same list, before and after, so they became one surface with two states. Three tools became two and a gesture. Standard General Mic + Device 3.2 hrs left K EN ▾ Live Transcription 00:14:22 S2 10:14:02 Le comité a approuvé le budget à la majorité. S3 10:14:09 Et le calendrier de mise en œuvre? S2 10:14:15 Il sera publié avec le rapport annuel en mars. S3 10:14:22 Des amendements sont-ils prévus? Live Translate Quick Translate EN ▾ Hide S2 10:14:02 The committee approved le budget by a majority. S3 10:14:09 And the implementation timetable? S2 10:14:15 It will be published with the annual report in March. S3 10:14:22 Are any amendments expected? Glossary Notes Start Aa Comfortable Glossary AFTER SESSION · 47 MIN What came up. Keep any of it and the next session starts already knowing. Added while you worked 3 new comité → *comité* amendements → *enmiendas* mise en œuvre → *implementación* Already loaded, and heard 9 of 12 le budget **3×** rapport annuel **2×** Quorum **1×** Tranche **1×** Calendrier **2×** 3 loaded terms never came up. Left in place. Export transcript Keep for next session The glossary after a session: what came up, waiting to be kept. **Two more things fell out of it.** Terms the engine is confident about are tinted in the transcript, and a marked term skips the selection prompt. And Add to glossary sits on the lookup, so a word you did not know becomes a term the engine expects next time. #### Decision 3: Every answer carries a confidence, names the model that produced it, and offers the upgrade only at that model's limit. *The cost:* An amber hedge is one more thing to read in the two seconds the interpreter has, and a hedged equivalent can be ignored as easily as it can be checked. The lookups come from Unicaption's own model, which can be unsure or wrong, so the interface owes the user a confidence, a limit and an attribution. Standard General Mic + Device 3.2 hrs left K EN ▾ Live Transcription 00:14:22 S2 10:14:02 Le patient doit prendre Lisinopril 10mg deux fois par jour. S3 10:14:09 Et si j’oublie une dose le matin? S2 10:14:15 Prenez-la dès que vous y pensez. Continuez le Métoprolol chaque matin. S3 10:14:22 Est-ce que ça donne des vertiges en se levant? Live Translate Quick Translate EN ▾ Hide S2 10:14:02 Patient should take Lisinopril 10mg twice daily. S3 10:14:09 And if I forget a dose in the morning? S2 10:14:15 Take it as soon as you remember. Continue Metoprolol each morning. S3 10:14:22 Will it make me dizzy when I stand up? Glossary Notes Start Aa Comfortable pensez **Low confidence** Apex Gen-1 is unsure of this one in a clinical context. Check before you use it. ES pensar probable To think, or to have something in mind. Other readings are possible here. Apex Gen-2.5 resolves clinical terms like this Add to glossary APEX GEN-1 The same lookup when Apex Gen-1 is unsure of a clinical term. What the interface owes the user **The uncertain case says so**, in amber, with the equivalent still offered but visibly hedged. Withholding it would be worse. **Every answer names the model that produced it**, so a wrong answer points at what to change. **The upgrade prompt appears at the limit of what the current model knows.** The one place an upgrade prompt answers the question on screen. A medical or legal interpreter can check a hedged term before saying it; a confident wrong one goes straight into the appointment. #### Decision 4: One lightness grid for every colour family, set by what the action colour can carry, so a step means the same thing everywhere. *The cost:* A shared grid means a hue cannot have its best-looking step if that step does not sit on the line. Amber and negative both render off their source values. The old palette was chosen for looks; I rebuilt it so every colour and step carries a meaning. **neutral** anchor #544C45 @800 · H 63.6 · one ramp for page, surfaces, hairlines, body and ink - **0** #FFFFFF 1.0:1 *surface page* - **50** #FAF6F3 1.1:1 *surface alt* - **100** #F1ECE7 1.2:1 *surface raised* - **200** #E3DBD4 1.4:1 *hairline* - **300** #CFC5BC 1.7:1 * * - **400** #B8ADA4 2.2:1 * * - **500** #A0948B 2.9:1 * * - **600** #867B72 4.1:1 * * - **700** #6C635A 5.9:1 *muted* - **800** #534B44 8.5:1 *body* - **900** #3A342F 12.2:1 * * - **950** #25211D 16.0:1 *ink* **ember** anchor #C0521F @600 · H 42.3 · action and brand; 600 carries white text, 700 is the accent on light - **0** #FFFFFF 1.0:1 * * - **50** #FFF4F0 1.1:1 * * - **100** #FFE7DE 1.2:1 *tint* - **200** #FFD1BE 1.4:1 * * - **300** #FFB294 1.7:1 * * - **400** #FD8C5F 2.3:1 * * - **500** #E47141 3.1:1 * * - **600** #C65725 4.4:1 *action* - **700** #A5410F 6.3:1 *accent text* - **800** #822F02 8.9:1 * * - **900** #5D1E00 12.7:1 * * - **950** #3E1100 16.4:1 * * **teal** anchor #10695C @700 · H 179.8 · the only cool hue in the product: live state and positive marks - **0** #FEFFFF 1.0:1 * * - **50** #E5FDF7 1.1:1 * * - **100** #D2F6EE 1.2:1 *tint* - **200** #B3EADE 1.3:1 * * - **300** #91D8C9 1.6:1 * * - **400** #6FC1B1 2.1:1 * * - **500** #52A999 2.8:1 * * - **600** #368E7F 3.9:1 * * - **700** #207466 5.6:1 *live* - **800** #11594E 8.1:1 * * - **900** #073F36 11.9:1 * * - **950** #022822 15.7:1 * * **amber** source #B07C12 · H 78 · stars, tinted chips and the low-confidence lookup; 36° from ember, so a family, not a step - **0** #FFFFFE 1.0:1 * * - **50** #FFF5E6 1.1:1 * * - **100** #FFEAC9 1.2:1 * * - **200** #FBD69D 1.4:1 * * - **300** #EEBF74 1.7:1 * * - **400** #DAA54D 2.2:1 * * - **500** #C18C29 3.0:1 * * - **600** #9E6E00 4.5:1 *nearest* - **700** #855C00 6.0:1 * * - **800** #674600 8.6:1 * * - **900** #493000 12.3:1 * * - **950** #2F1E00 16.1:1 * * **negative** source #A02333 · H 19.5 · crosses and destructive actions; close enough to ember to need distinguishing - **0** #FFFFFF 1.0:1 * * - **50** #FFF4F3 1.1:1 * * - **100** #FFE6E5 1.2:1 * * - **200** #FFCECE 1.4:1 * * - **300** #FFAFAE 1.8:1 * * - **400** #FF8689 2.3:1 * * - **500** #EE626A 3.2:1 * * - **600** #C9414D 4.8:1 * * - **700** #AD313D 6.4:1 *nearest* - **800** #89202C 9.1:1 * * - **900** #62131D 12.9:1 * * - **950** #42080F 16.5:1 * * Neutral, ember, teal, amber, negative. Every step carries its contrast figure against white; the outlined step is the family's anchor. **The action colour set the grid, not the other way round.** The shared 600 target is the lightest warm orange that still carries white text, and every other ramp follows it. Rule 03 below has the figure. **Speakers needed their own colours.** The product was marking speaker S4 in the negative red. Nothing was wrong: S4 was the fourth person in the room. Identity is not state, so speakers got four hues at one lightness, placed only in the windows left clear by action, live and negative. - **S1** H111 · #67692A - **S2** H226 · #1F6E8A - **S3** H280 · #5B5F94 - **S4** H333 · #825279 **Four is the honest ceiling.** The three semantic hues block enough of the wheel that a fifth speaker would sit 19° from a neighbour and stop being distinguishable. That limit is documented. #### The colour rules Written while building the product screens. Each rule exists because getting it wrong cost rework, and the set grows as the product finds jobs the current ramps cannot do. 1. **A hue earns a ramp by doing a job the others cannot.** The system opened at three, neutral, ember, teal, and is now five plus a speaker set. Every addition was argued: amber for 46 uses across marks, tinted chips and the low-confidence state; negative because a danger colour has to exist. Indigo was cut at five uses on one card, so there is no target number of ramps. 2. **White is neutral/0 and stays pure.** It is the reading surface. Warm-tinting it would cost legibility to gain consistency nobody would notice. 3. **Action is ember/600, and the grid bends to it.** White on a warm orange fails above L 0.573. So the shared 600 target is 0.573, the ceiling the contrast requirement allows. 4. **Surfaces go by step, not by name.** 0 panel and reading surface · 50 canvas · 100 raised chrome, rails and tracks · 200 every hairline. If a surface needs a fifth level, the layout is wrong. 5. **Text has three steps.** 950 ink for headings and labels · 800 body and icon strokes · 700 muted. 600 reads at 4.1:1 on white and fails, so it is not a text colour. 6. **Backdrop hues never enter the UI.** Rose, lilac, sage and the cool at hue 215 exist only in artwork, at 0.02 to 0.04 chroma. At UI chroma they read as brand colours the product does not have. 7. **Ember has two counterparts, doing different jobs.** Teal #207466 at hue 180 is UI: live state and positive marks. The artwork complement sits near hue 215. Matching them would cost the warm its warmth. 8. **Two values within two units per channel are one step.** #544C45 against #534B44, #6E645B against #6C635A. Invisible to the eye, and in every case the wrong one was the more used. 9. **Contrast on a gradient is measured at its lightest stop.** A backdrop that passes in the middle can fail at one corner. 10. **Icons are stroke-drawn, so stroke changes hit them.** A blanket border recolour turned 69 glyphs into hairlines. Filter by node type before touching strokes in bulk. 11. **A colour used once is not dead.** Check which surface it sits on first. #A89D93 looked redundant and was the only neutral that worked on the dark band. 12. **A new hue is measured before it is added.** Against the reserved hues first, action 42°, live 180°, negative 20°, then against every ramp already in the set. The speaker colours exist because that check failed: identity was borrowing three semantic hues, and the wheel only had two windows left to put it in. 13. **The system is dated.** Every ramp here was derived from colours already in the product. When the product does something new, the palette is expected to move. These rules say how it moves; none of them caps the number of ramps. #### Where this goes next: captions over the call, designed but not shipped Designed, not shipped Included because it is where the capture work led. None of the numbers in section 03 include it. The two-checkbox fix in decision 1 settled what gets captured. It surfaced a constraint the product had not acted on: **a browser tab cannot draw over another application.** That matters because the case Unicaption is sold on, captioning a live call, is the one case its primary form cannot serve. An interpreter on Zoom is looking at Zoom, not at a browser tab beside it. Five states were designed: at rest, on hover, detection suggesting a second audio source, two speakers overlapping, and repositioning around the host app's own toolbar. **At rest.** Captions and a source indicator. Nothing else on screen. Chair Finance dir. a call in another app The motion carries, fourteen votes to three. La moción queda aprobada, catorce votos contra tres. System audio **On hover.** Device audio is why you are in overlay, so it is always on. The only live choice is whether your own voice joins it. Mic-only means leaving overlay, so it sits under Full window. Chair Finance dir. a call in another app The motion carries, fourteen votes to three. La moción queda aprobada, catorce votos contra tres. Include my voice FR → ES Pause Aa Full window **Detection suggests, never switches.** Silently changing what is being captured mid-appointment is worse than the problem it fixes. a video playing in a tab The motion carries, fourteen votes to three. La moción queda aprobada, catorce votos contra tres. Audio playing in Chrome. Caption it too? Add it Not now **Two speakers at once.** Overlap is the stress test. The finished line settles, the one still arriving stays dim until it is confirmed. Chair Finance dir. Interpreter a call in another app Chair We move the second tranche to the next quarter — Trasladamos el segundo tramo al próximo trimestre — Finance dir. And if the board objects to the timing? still speaking **Repositioning.** Zoom puts its own toolbar exactly where captions want to sit. Drag the plate and it snaps to the opposite edge. Chair Finance dir. a call in another app Mute Video Participants Share Leave Chair The motion carries, fourteen votes to three. La moción queda aprobada, catorce votos contra tres. snaps here, clear of the toolbar Five states of the overlay, over a call in another app. ### Where it can run Overlay mode only exists in the Mac app and the Chrome extension. - **Web app** Full window only - **Chrome extension** Over a video in a tab - **Mac app** Over Zoom, Teams, anything **The finding underneath it is a positioning one.** The account menu files *Download Mac App* and *Install Chrome Extension* as preferences, beside a dark-mode toggle, yet they are the only surfaces where the product does the thing it advertises. Filed as settings, the job looks unsupported. ## Earned traffic held after the paid bursts stopped Both the landing page and the product IA shipped by early April, so everything from April onward reflects the complete redesign. GA4 · Sessions by month Feb to Sep 2026 (Sep partial). Paid ran in two bursts and stopped. Earned traffic held. Both panels share one scale. Paid max 7,181 Feb 54 Mar 2,604 Apr 19 May 7,181 Jun 141 Jul 17 Aug 2 Sep* 4 Earned · direct + organic max 1,887 Feb 396 Mar 678 Apr 975 May 1,532 Jun 1,887 Jul 1,736 Aug 779 Sep* 420 #### The same months as a table, paid and earned sessions, Feb to Sep | Month | Paid | Earned (direct + organic) | |---|---|---| | Feb | 54 | 396 | | Mar | 2,604 | 678 | | Apr | 19 | 975 | | May | 7,181 | 1,532 | | Jun | 141 | 1,887 | | Jul | 17 | 1,736 | | Aug | 2 | 779 | | Sep (partial) | 4 | 420 | **The clearest read is August.** Paid traffic that month was 2 sessions. Earned stood at 779, roughly double February's 396, with effectively no spend behind it. I wouldn't claim the whole curve. June and July follow a 7,181-session paid burst in May, whose brand searches and return visits land in the months after. By August that has worn off, and the number still holds. The volumes are modest, so it is the trend I would point to. ### Fewer people leave at once **Bounce rate** fell from 49.66% to **36.61%** in the latest full week. Read it with care: the baseline had 74% cold display traffic and the later week almost none, so the fair test is organic before against organic after, as clean data builds up. GA4 · Bounce rate share of sessions with no interaction, out of 100% Baseline · Jan 27 – Feb 26 49.66% Most recent full week 36.61% ### A funnel exists where none did Three events defined in the redesign now report the path from the first click to the live product. The old build could not report a single tracked click. Funnel · since Apr 1 the three events defined in the redesign, each bar scaled to start_clicked start_clicked 952 auth_done 158 · 16.6% playground_loaded 144 · 91% of auth_done The product changes also brought more daily users into the product. Only the landing page was tracked in detail, so the numbers above are the landing page's. ## When a product explains itself, move the setting - Learned **A mid-task hint is a misplaced setting** The audio popover was the product admitting a setting was in the wrong place. Moving the setting removed the need for the hint. - Learned **Lead with what the user says next** Every draft of the lookup led with the definition. An interpreter has about two seconds and needs the equivalent. The definition can wait. - Next time **Examples for every buyer from day one** Every scenario was a consulting room, but the product sells to legal, government, conference and accessibility buyers. Spreading the examples across fields was a late fix. It should have been a starting rule. - Next time **Settle the argument before the layout** The landing page's empathy section went through four rewrites while beats that did not fit the layout quietly dropped out. Deciding whether it made one argument or five should have come first.