Klarnow
Status: Prepared demonstration · prototype
My role: Product direction, workflow and interface design, scope, AI-assisted implementation, testing and delivery
Technology: Next.js, React and TypeScript
The prepared example uses a fictional letter. Its explanations are prepared content, not live model output.
The problem
When you receive an official letter in a language you don’t speak, translating the words is only part of the job. You still need to understand what is being requested, find the right document and decide what to do next.
I shaped Klarnow around that sequence. The demonstration follows a fictional German housing letter requesting a landlord’s confirmation of residence.
My decisions
I wanted the explanation to remain connected to the letter. Selecting supporting evidence highlights the German sentence behind the request, so the reader can inspect the source instead of relying on a confident summary alone.
I separated understanding, preparing a response and reviewing a date into three stages. The request can be edited in German and English independently, then copied. Editing one language does not automatically translate the other, and copying does not send a message.
Review before action
Calendar controls remain disabled until the user reviews the date. Changing it clears that approval and requires another check. This keeps the decision with the person reading the letter.
The recorded desktop and mobile walkthroughs changed the example date and checked that both the downloaded calendar file and Google Calendar link used the correction. Importing or saving the event is a separate user action. The original letter stays visible and unchanged.
How I built and tested it
I directed the product, design, workflow and release scope, working with AI coding tools on implementation, tests and review. The prepared experience uses React state, shared source-matching helpers and client-side calendar generation.
The September 21 handoff recorded 55 passing tests plus type, lint and production-build checks. Desktop and mobile walkthroughs covered source highlighting, separate language edits, copying and corrected calendar exports. A later local refresh introduced the Letter desk visual system and an upload entry with file validation and local preview.
Demonstrated result and limits
The working prepared flow connects a source passage to an explanation, an editable bilingual request and a reviewed calendar export. It demonstrates the interaction and review decisions; it does not establish interpretation accuracy or customer adoption.
The wider codebase includes AI, OCR and account integrations, but the reviewed handoffs do not establish working live provider behavior. Those capabilities are not presented here as a public service. This case study uses the verified walkthrough and current local screenshots; there is no public live-demo link.
Next, I would evaluate synthetic letters with live providers and observe whether people can complete the flow and spot a wrong date or interpretation.