Lexi — Design Explorations

6 lo-fi layout concepts before converging on the split-panel approach
These sketches represent early ideation — different structural approaches to the same problem: "How should a translator look up a word without losing their place in the source text?" Each concept makes different trade-offs between context preservation, information density, screen real estate, and cognitive load. The goal is to explore the design space widely before narrowing.
CONCEPT A
Floating Popover
No dedicated panel. Click a word and a floating card appears near the selection — like a dictionary tooltip on steroids. Source text stays 100% width.
Source Text (full width)
✦ AI TRANSLATION
resilience
/rɪˈzɪl.i.əns/
"韧性" → resilience in this economic context. Emphasizes recovery + stability.
+ add
+ add
+ add
see all sources →
← appears near
   selected word
"see all sources" opens
full panel if needed →
text stays full width ✓
maximum reading space
+ Pros
Maximum source text visibility
No permanent screen split
Feels lightweight / non-intrusive
Fast for quick lookups
– Cons
Popover occludes surrounding text
Limited space for multiple translations
Can't show dictionary + TM + web simultaneously
Positioning tricky near screen edges
? Questions
How does "see all sources" work — expand in place? Open a panel?
What about long definitions or many alternatives?
Does this scale to CJK text with dense character grids?
CONCEPT B
Bottom Drawer
Source text fills the top portion. Results slide up from the bottom as a resizable drawer — like a mobile maps panel. Text scrolls independently above.
Source Text
✦ AI TRANSLATION — 韧性
resilience
/rɪˈzɪl.i.əns/ · ZH→EN
AI Summary
Dictionary
History
Federated
1. resilience
capacity to recover from difficulties
+ add
2. toughness
strong under adverse conditions
+ add
3. tenacity
determined and persistent
+ add
↕ drag handle to resize
text area shrinks as
drawer expands ↓
pill tabs scroll
horizontally →
+ Pros
Full-width reading experience
Familiar mobile pattern (maps, sheets)
Drawer can expand to full screen
Natural on tablet / touch devices
– Cons
Drawer pushes text up / hides context
Selected word may scroll off screen
Vertical space is precious on laptops
Two independent scroll areas = confusing
? Questions
How do you keep the selected word visible while the drawer is open?
Should the text auto-scroll to keep the word in view?
What's the default drawer height — 40%? 50%?
CONCEPT C
Three-Column Layout
Source text left, AI summary center, raw sources right. No tabs — everything visible at once. Maximum information density for power users.
SOURCE TEXT
✦ AI SUMMARY
resilience
/rɪˈzɪl.i.əns/ · ZH→EN
In this economic context, "resilience" is the best fit — emphasizes recovery + stability under pressure.
1. resilience
+ add
2. toughness
+ add
3. tenacity
+ add
4. elasticity
+ add
RAW SOURCES
Dict
TM
Web
Hist
each column scrolls
independently!
AI opinion is always
visible alongside
raw evidence
+ Pros
Everything visible at once — no tab switching
AI summary + raw sources side by side
Power users can compare across columns
Clear separation of concerns
– Cons
Each column is very narrow
Overwhelming information density
Doesn't work below ~1400px
Three scroll areas = cognitive overload
? Questions
Is simultaneous visibility actually better than tabs?
Do translators really need all three at once?
Could column widths be user-adjustable?
CONCEPT D
Command Palette / Spotlight
Inspired by ⌘K interfaces. Double-click a word (or press a hotkey) and a centered overlay appears with results. Dismiss it and you're right back in the text. No persistent panels at all.
韧性
ESC to close
ZH → EN
resilience
capacity to recover from difficulties
⏎ select
toughness
strong under adverse conditions
tenacity
determined and persistent
elasticity
ability to return to original form
↑↓ navigate    ⏎ add to lexicon    TAB see sources    ESC dismiss
background dims
to focus attention
⌘K or double-click
triggers this
fully keyboard-
navigable ✓
+ Pros
Zero persistent UI — text stays clean
Keyboard-first / power-user friendly
Familiar ⌘K pattern from dev tools
Fast: invoke, select, dismiss — done
– Cons
Loses source sentence context while modal is open
Can't browse raw sources without extra interaction
Modal blocks the entire view
Less discoverable for non-technical users
? Questions
Can we show the source sentence inside the modal?
Is this too developer-centric for translator audience?
How to handle the "deep dive" use case?
CONCEPT E
Inline Expansion
No panels, no modals. Click a word and the results expand directly below the paragraph — pushing the next paragraph down. The lookup lives inside the reading flow itself.
✦ TRANSLATION: 韧性
resilience
In this context: capacity to withstand economic shocks while maintaining stability.
1. resilience
recovery ability
+
2. toughness
strength
+
3. tenacity
persistence
+
show dictionary · TM · web sources ▾
× close
↓ paragraph 2 pushed down
results appear IN the
reading flow, not beside it
horizontal card layout
saves vertical space
+ Pros
Results appear in reading context
No panel = full-width reading
Natural document annotation feel
Works great for occasional lookups
– Cons
Disrupts reading flow / pushes text down
Multiple open expansions = chaos
Limited space for detailed results
Heavy lookups (10+ per page) = messy
? Questions
Should only one expansion be open at a time?
Can you leave a collapsed "bookmark" after closing?
How does this work with very long AI summaries?
CONCEPT F ★
Side-by-Side Split Panel (chosen)
The approach selected for the final mockup. Source text left, lookup panel right, resizable divider. Tabs organize evidence layers. This sketch shows the earliest version of what became the HTML prototype.
SOURCE TEXT
LEXI LOOKUP
韧性
⌕
AI
Dict
Hist
Fed
resilience
/rɪˈzɪl.i.əns/ · ZH→EN
✦ AI CONTEXT
resilience fits this economic context...
1. resilience
+ add
2. toughness
+ add
3. tenacity
+ add
source text always
visible alongside results ✓
text doesn't move
when lookup happens
↕ drag
+ Pros
Source text always visible — no context loss
Rich space for results (tabs, definitions, sources)
Resizable divider adapts to user preference
Clean separation: reading vs. researching
– Cons
Source text only gets 50% width
Always-visible panel feels heavier
Doesn't work well on narrow screens
Two independent scroll contexts
Why this won
Translators do heavy, repeated lookups — the persistent panel eliminates invoke/dismiss overhead. Source visibility was the #1 priority from contextual inquiry. The trade-off (less text width) is acceptable because professional translation is already a narrow-column workflow.

Concept Comparison

Context Preservation
Can you still see the source sentence?
A Popover★★★☆
B Drawer★★☆☆
C Three-Col★★★★
D Spotlight★☆☆☆
E Inline★★★☆
F Split ★★★★★
Information Depth
How much detail fits in the result view?
A Popover★★☆☆
B Drawer★★★☆
C Three-Col★★★★
D Spotlight★★☆☆
E Inline★★☆☆
F Split ★★★★★
Lightweight Feel
Does it feel fast and non-intrusive?
A Popover★★★★
B Drawer★★★☆
C Three-Col★☆☆☆
D Spotlight★★★★
E Inline★★★☆
F Split ★★★☆☆
Why F won the trade-off
The split panel (F) isn't the lightest or the most elegant — the Popover (A) and Spotlight (D) both feel more graceful. But translators don't do occasional lookups; they do dozens per session. The persistent panel eliminates the invoke/dismiss cycle entirely. And the #1 finding from contextual inquiry was that translators lose their place when they switch tools — F is the only layout (alongside C) that keeps the source sentence permanently visible while providing deep results. The Three-Column (C) has the same strength but collapses at normal screen widths. So F wins: it trades some reading width for maximum lookup throughput and context preservation.