BizTech
EXP#
3
LocaLens
A client-side localization QA tool that extracts text from a UI screenshot via OCR, translates it into 10 languages, and flags exactly which strings risk breaking their original layout.
02
Context
Most translation tools stop at the text — they translate a string but say nothing about whether the translated version still fits the button, label or card it was designed for. Teams typically only discover layout breakage after a translated build ships. LocaLens set out to catch that earlier, from a screenshot alone.
03
The Challenge
The product needed to go from a UI screenshot to a reliable overflow risk assessment — extracting text, translating it, and measuring whether the result still fits its original container — without requiring access to the actual codebase or design file.
04
Research
Researched how much text length typically expands or contracts across common target languages — German and Finnish tend to expand, Japanese and Chinese often contract — and used that as the baseline for what counts as a meaningful overflow risk versus normal variation.
05
Insights
The key findings that shaped the direction.
01
Translation length, not translation quality, breaks layouts
A perfectly accurate translation can still break a UI if it's 40% longer than the source string — length risk and translation quality are separate problems that most tools conflate.
02
OCR position data is what makes the check useful
Extracting the text alone isn't enough — knowing where each text block sits and how wide its container is is what turns a translation into an actual overflow measurement.
03
Privacy was a precondition, not a feature
Teams testing pre-release UI screenshots won't upload them to a third-party server — client-side OCR was the only way to make the tool usable for real, unreleased work.
06
How decisions were made
01
Start from a screenshot, not a codebase
Built the tool around OCR extraction from a UI screenshot, so it works on any interface — shipped or in-progress — without needing design file or code access.
02
Measure expansion, not just translate
Calculated a character-expansion percentage per text block and compared rendered width against the original container, turning 'is this translated' into 'does this still fit.'
03
Flag risk in three tiers
Colour-coded every text block as Safe, Review or High-risk, so a team can triage a screen with dozens of strings in seconds instead of reading every translation.
04
Keep it client-side
Ran OCR entirely in the browser so screenshots of unreleased UI never leave the user's machine, making the tool safe to use on pre-launch work.
07
Solution
A client-side localization QA tool that extracts text from a UI screenshot via OCR, translates it into 10 languages, and flags exactly which strings risk breaking their original layout.
Translation into 10 languages including French, German, Japanese and Arabic
OCR extraction of text blocks with position data from PNG, JPG or WEBP screenshots
Side-by-side visual comparison with zoom and pan, exportable as PNG, PDF, CSV, XLSX or JSON
Character-expansion and container-overflow risk scoring per text block
.png)