BizTech · EXP #03

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.

All experiments
01

Problems solved

  • My website layout breaks when the text is translated
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

  1. 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.

  2. 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.'

  3. 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.

  4. 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.

  • OCR extraction of text blocks with position data from PNG, JPG or WEBP screenshots
  • Translation into 10 languages including French, German, Japanese and Arabic
  • Character-expansion and container-overflow risk scoring per text block
  • Side-by-side visual comparison with zoom and pan, exportable as PNG, PDF, CSV, XLSX or JSON

Keep exploring

More experiments worth trying.

More time for what really matters.