Timeline: 3+ monthsTeam: 2 people

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.

Role: Lead Product Designer
Focus: Conversion UX, Information Architecture, Visual Identity, Design Systems

Standard

General

Mic + Device

3.2 hrs leftK

EN▾Live Transcription

00:14:22

je vous envoie les documents avant vendredi

et la réunion de lundi ?

je confirme demain matin

le budget est validé ?

oui, à la majorité

et le calendrier ?

on le publie en mars

parfait, merci à tous

Live TranslateQuick Translate

EN▾

Hide

I’ll send you the documents before Friday

and Monday’s meeting?

I’ll confirm tomorrow morning

is the budget approved?

yes, by a majority

and the timetable?

we publish it in March

perfect, thanks everyone

Glossary

Notes

Start

Aa Comfortable

Translated in 180ms

01The problem

Half the audience left before the product had a chance

The rebuilt hero: the product shown mid-session rather than empty.

GA4, 27 Jan to 26 Feb 2026:

3,399SESSIONS
49.66%BOUNCE. Half of all arrivals left without a single interaction.
74%OF TRAFFIC FROM DISPLAY ADS. Cold, paid traffic that converted nothing.
NoneCTA 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 railWhat shapes the output
- Logoinline
- Model: Apex Gen-1 / 2 / 2.5dropdown
- Specialisation: General … Public Safetydropdown
- Support: 6 itemsdropdown
- Account: plan, quota, apps, audio source, themedropdown
CanvasThe reading surface
- Transcription language: FRdropdown
- Scroll lock · resetinline
- Live Translate / Quick Translateinline
- Translation language: ESdropdown
- Select Transcription Languagemodal
Bottom railTools, transport, layout, type, all in one strip
- Contextmodal
- Dictionarypanel
- Notesfloating
- Start / Stopinline
- Hide / Translateinline
- Text Size: 4 stepspopover

inlinedropdownmodalpanelfloatingpopover

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.

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.

02What was decided, and what it cost

The capture, the tools, the model, the system

Decision 01: Two checkboxes replace three modes: the user says what to listen to, and the window shape follows.

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 onlyfull window
Device onlyoverlay
Mic + Deviceoverlay
NeitherStart 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.

With the mode choice gone, the mid-session popover has nothing left to explain.

Decision 02: The dictionary stopped being a place: look a word up where it sits, and no window opens over a live transcript.

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 everything
Dictionary
Docked right panel. Panes drop from 690 to 470.
×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.
×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.
✓Blocks nothing worth protecting
Word lookup
No window. Select a word, or click one the engine marked.
✓Nothing moves, nothing is covered
Notes
Unchanged. The one tool meant to stay where you put it.
✓Kept as it was

What I changed, and why

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.

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 03: Every answer carries a confidence, names the model that produced it, and offers the upgrade only at that model's limit.

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.

The same lookup when Apex Gen-1 is unsure of a clinical term.

A medical or legal interpreter can check a hedged term before saying it; a confident wrong one goes straight into the appointment.

Decision 04: One lightness grid for every colour family, set by what the action colour can carry, so a step means the same thing everywhere.

The old palette was chosen for looks; I rebuilt it so every colour and step carries a meaning.

neutralanchor #544C45 @800 · H 63.6 · one ramp for page, surfaces, hairlines, body and ink

0#FFFFFF1.0:1surface page
50#FAF6F31.1:1surface alt
100#F1ECE71.2:1surface raised
200#E3DBD41.4:1hairline
300#CFC5BC1.7:1
400#B8ADA42.2:1
500#A0948B2.9:1
600#867B724.1:1
700#6C635A5.9:1muted
800#534B448.5:1body
900#3A342F12.2:1
950#25211D16.0:1ink

emberanchor #C0521F @600 · H 42.3 · action and brand; 600 carries white text, 700 is the accent on light

0#FFFFFF1.0:1
50#FFF4F01.1:1
100#FFE7DE1.2:1tint
200#FFD1BE1.4:1
300#FFB2941.7:1
400#FD8C5F2.3:1
500#E471413.1:1
600#C657254.4:1action
700#A5410F6.3:1accent text
800#822F028.9:1
900#5D1E0012.7:1
950#3E110016.4:1

tealanchor #10695C @700 · H 179.8 · the only cool hue in the product: live state and positive marks

0#FEFFFF1.0:1
50#E5FDF71.1:1
100#D2F6EE1.2:1tint
200#B3EADE1.3:1
300#91D8C91.6:1
400#6FC1B12.1:1
500#52A9992.8:1
600#368E7F3.9:1
700#2074665.6:1live
800#11594E8.1:1
900#073F3611.9:1
950#02282215.7:1

ambersource #B07C12 · H 78 · stars, tinted chips and the low-confidence lookup; 36° from ember, so a family, not a step

0#FFFFFE1.0:1
50#FFF5E61.1:1
100#FFEAC91.2:1
200#FBD69D1.4:1
300#EEBF741.7:1
400#DAA54D2.2:1
500#C18C293.0:1
600#9E6E004.5:1nearest
700#855C006.0:1
800#6746008.6:1
900#49300012.3:1
950#2F1E0016.1:1

negativesource #A02333 · H 19.5 · crosses and destructive actions; close enough to ember to need distinguishing

0#FFFFFF1.0:1
50#FFF4F31.1:1
100#FFE6E51.2:1
200#FFCECE1.4:1
300#FFAFAE1.8:1
400#FF86892.3:1
500#EE626A3.2:1
600#C9414D4.8:1
700#AD313D6.4:1nearest
800#89202C9.1:1
900#62131D12.9:1
950#42080F16.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.

S1H111 · #67692A
S2H226 · #1F6E8A
S3H280 · #5B5F94
S4H333 · #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.

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.
White is neutral/0 and stays pure. It is the reading surface. Warm-tinting it would cost legibility to gain consistency nobody would notice.
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.
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.
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.
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.
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.
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.
Contrast on a gradient is measured at its lightest stop. A backdrop that passes in the middle can fail at one corner.
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.
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.
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.
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

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.

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.

Detection suggests, never switches. Silently changing what is being captured mid-appointment is worse than the problem it fixes.

Two speakers at once. Overlap is the stress test. The finished line settles, the one still arriving stays dim until it is confirmed.

Repositioning. Zoom puts its own toolbar exactly where captions want to sit. Drag the plate and it snaps to the opposite edge.

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 appFull window only
Chrome extensionOver a video in a tab
Mac appOver 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.

03What happened

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

Feb54

Mar2,604

Apr19

May7,181

Jun141

Jul17

Aug2

Sep*4

Earned · direct + organic max 1,887

Feb396

Mar678

Apr975

May1,532

Jun1,887

Jul1,736

Aug779

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

Most recent full week36.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_clicked952

auth_done158 · 16.6%

playground_loaded144 · 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.

04What I learned

When a product explains itself, move the setting

LearnedA mid-task hint is a misplaced settingThe audio popover was the product admitting a setting was in the wrong place. Moving the setting removed the need for the hint.
LearnedLead with what the user says nextEvery draft of the lookup led with the definition. An interpreter has about two seconds and needs the equivalent. The definition can wait.
Next timeExamples for every buyer from day oneEvery 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 timeSettle the argument before the layoutThe 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.

Got an Idea Worth Obsessing Over?

Have a Product in Mind?

Let's get started

Rebuilding a Product That Was Explaining Itself Mid-Appointment

Half the audience left before the product had a chance

Every Word. Every Time. Interpreted Perfectly.

Who it had to convince

What the audit found

The finding the product made for me

The capture, the tools, the model, the system

Decision 01: Two checkboxes replace three modes: the user says what to listen to, and the window shape follows.

In-person appointment

Zoom call

Decision 02: The dictionary stopped being a place: look a word up where it sits, and no window opens over a live transcript.

Context

Dictionary

Notes

Glossary

Word lookup

Notes

What I changed, and why

Decision 03: Every answer carries a confidence, names the model that produced it, and offers the upgrade only at that model's limit.

Decision 04: One lightness grid for every colour family, set by what the action colour can carry, so a step means the same thing everywhere.

Where it can run

Earned traffic held after the paid bursts stopped

Fewer people leave at once

A funnel exists where none did

When a product explains itself, move the setting

Got an Idea Worth Obsessing Over?