Claro — Making the Unclear Clear
AI-powered assistant for navigating critical documents
Role: UX UI Designer
Timeline: 24-hour Google AI Hackathon
Tools: Figma, Figma Make, Chat GPT, Claude,
01 — Context
The Problem Behind the Problem
In many immigrant families, one person carries an invisible job title: the English speaker. They read the bills, decode the notices, and make the calls. When they're not around, mail piles up. Deadlines pass. Problems compound.
This isn't a translation problem. Google Translate already exists. This is a systems literacy problem — where even a translated bill is still confusing, because understanding what an EOB is, or what "patient responsibility" means, requires knowledge most people were never given.
"25 million US residents have limited English proficiency. For them, a piece of mail from a hospital isn't just hard to read — it's hard to understand even once translated."
— Claro PRD, Problem Statement
25M
US residents with limited English proficiency
1 in 4
Immigrant households rely on a child or younger relative for document navigation
0
existing tools that combine translation, comprehension, and action in one flow
02 — My Role
Where Design Met Strategy
On a cross-functional hackathon team, I led UX design while contributing directly to product decisions — including which document vertical to build for first, how to frame the demo narrative, and how to structure the feature priority tiers.
My design responsibilities spanned the full end-to-end flow: from defining the core user journey, to wireframing the scan-to-summary pipeline, to building the high-fidelity prototype used in the live stage demo. I also designed the document dashboard mockup, which was shown to judges as a near-future state.
Product strategy: Chose healthcare since medical bills are hard to understand, high stakes, and especially challenging for this community.
UX design: Designed the complete scan → interpret → act flow: camera UI, processing states, Spanish summary display, calendar confirmation, and resource surfacing.
Demo narrative: Shaped the pitch structure and live demo script so the UX carried the emotional weight, not just the slide deck.
03 — Design Principles
The Nephew Test
Before designing anything, we thought about a familiar moment.
A parent sitting at the kitchen table, holding a medical bill they cannot understand.
They wait for their son, daughter, or nephew to come over and explain it.
That person does not just translate the words.
They explain what it means, what matters, and what to do next.
So we asked ourselves one question: Can Claro do what that person does?
If it only translates, it is not enough.
If it explains but leaves the user stuck, it fails.
If it suggests action but does not follow through, it falls short.
That idea shaped every decision in this product.
Explain the system
A bill is more than words. It is confusion, risk, and urgency.
Claro helps users understand what they are looking at and why it matters.
Default to action
Understanding is not the end goal. Action is.
Every interaction leads to a clear next step, so users are never left wondering what to do.
Respect intelligence
Not speaking English fluently does not mean a lack of understanding.
The experience is clear, direct, and respectful at every step.
Minimize input
The user’s role is simple: take a photo.
Claro does the rest, reducing effort in a moment that is already stressful.
This approach turned Claro into more than a tool. It became a guide, a translator, and an advocate in one place.
04 — Design Process
From constraint to clarity
With only 24 hours, I had to move fast without losing focus. Instead of trying to design everything, I focused on one moment that mattered most:
helping a user understand a medical bill and know what to do next.
Start with the one flow that matters
I did not design a full app.
I focused on one complete journey:
take a photo → understand the bill → take action.
Everything else became secondary.
Think about what could go wrong
Before designing screens, I thought about failure.
What if the photo is blurry?
What if the system is not confident?
What if there is no clear due date?
Designing these edge cases early helped build trust and shaped how the system responds.
Design the experience step by step
I mapped the full journey from scan to action:
Camera and photo capture
Image feedback and retake prompts
Processing state with clear progress
Spanish summary of the bill
Calendar reminder
Help and resource options
This became the foundation of the product.
Focus on the moment of clarity
The most important screen was the summary.
This is the first time the user sees their bill explained clearly in their own language.
Everything in the design supports this moment.
Design for the demo experience
The product also had to work live.
The processing screen was designed to show each step in real time:
reading the document, understanding it, and creating reminders.
This made the experience feel transparent for users and clear for judges.
In the end, the goal was not to build everything.
It was to build one flow that worked end to end, and made a real problem feel simple.
05 — Designs
The Flow in Detail
This experience starts with a simple moment.
A user takes out their phone and photographs a medical bill they do not understand.
From that point on, Claro guides them step by step.
From capturing the document, to understanding what it means, to knowing exactly what to do next — every part of the flow is designed to reduce confusion and build confidence.
What was once overwhelming becomes clear, actionable, and manageable in a matter of seconds.
06 — Reflection
What I'd Take Forward
What I learned
Trust is as important as usability: Users are sharing sensitive documents. The experience must feel safe and reliable.
The demo is part of the product: Every screen was designed to communicate value instantly and clearly.
Failure states build confidence: Handling low-confidence scans and unclear inputs gracefully is critical to trust.
Constraints drive better decisions: Working within 24 hours forced focus on what truly matters.
What comes next
Voice support for accessibility: Reducing reliance on reading for low-literacy users.
Family dashboard: Enabling bilingual relatives to support remotely.
User validation: Testing with real users to refine and validate the experience.