Sunita is 52. It's 9pm.
She has just opened a lab report with 42 results. Four sit outside the normal range. She doesn't know what HbA1c or SGPT mean, and she can't reach her doctor until Monday.
I had about 10 hours to design something calm that stays honest. The CX head liked the design side of my work, especially how hard I focused on being AI native. For the second round I treated the company as my own client, built a token-based design system and prepared a full developer handoff. Then I deployed the app for real, from Claude Design to Claude Code to Vercel.
This was a take-home assessment. The data shown is fictional and doesn't belong to any real person.
Three problems. Pick one and solve it properly.
- FoldAn: an investing app on a bad day. Priya, 26, is down 8% at 11:40pm.
- Nabz: a health report for someone who doesn't speak doctor.
- Kaksha: a school app on a cheap phone and a bad connection.
Why Nabz
I care about healthcare and lifestyle. When health data makes people feel vulnerable, showing the right information in the right way matters even more. Nabz let me work on exactly that.
42 results, and no answer to "so what do I do now?"
Sunita's report has 42 results in 7 groups. Four are out of range: one slightly, one seriously. She tested three months ago, and 28 of the 42 results have history. The brief listed what was wrong with the current product:
- It speaks doctor. Expanding HbA1c to "Glycated Haemoglobin" helps nobody. She needs to know what it measures and why it matters, in her words and in Hindi.
- It has no comparison with her last report, even though that change is the real story.
- It shows 42 results with no answer to "so what do I do now?"
- Whatever the numbers say, she will feel worse after reading. The interface may not lie to reassure her, and may not give medical advice.
"A calm design that is still an honest one."
The hardest part, in the brief's words
How I approached the assessment.
Read the scenario for 15 focused minutes. Wrote down my assumptions and what I would and wouldn't solve.
Wrote a structured AI brief with inputs and outputs, then questioned every decision the AI made.
Designed for a 360 × 800 Android frame, Hindi and English text, and a slow network.
Grouped 42 results into 7 body systems, led with change over time, and met the scary moment with honest language and a clear next step.
Pages for framing, iterations and a token-based system, with named layers, variables, and components with variants.
Fifteen minutes on the scenario, then questions for the AI.
With only 10 hours, I spent 15 minutes reading and rereading the scenario. I wasn't summarizing it. I wanted to understand Sunita's pain points and the environment shaping her decisions. She's alone at 9pm, scared of a number, and nobody can answer her questions until Monday. Every choice after that came from this picture.
Questioning the AI
Most people stop at the prompt. I went back and questioned what the AI had decided for me:
- Why weren't the corners rounder? Soft corners feel friendly, but health data also needs to feel precise. Did the AI choose the radius on purpose or by default?
- Which competitors did it reference, which did it leave out, and why?
- Is this modern, or just familiar? I checked whether each pattern was current for a reason.
That step turned AI output into a starting point I could defend on the call.
Deciding how the product should think, before any screen.
Page 1 of the Nabz Figma file holds the framing:
- Scenario: Sunita's situation, copied from the brief so anyone opening the file starts with the same context.
- Why Nabz: a personal note, on the canvas where reviewers see it.
- In scope: 42 results in 7 groups, 4 out of range, and a report from 3 months ago with history for 28 results.
- Out of scope: my assumptions about her digital literacy, health literacy, anxiety, Hindi preference and accessibility needs.
- Data flow, user flow and the AI brief.
From a first pass to a calm, honest report.
This was the biggest part of the work. I drew on my experience at AdviNOW Medical: health products need clear hierarchy, honest language and clean visuals. The full progression lives on page 3 of the Figma file.
From Claude Design to Figma
Claude Design had already produced a design. I had it translate the design to code, then pulled the code into Figma through a token study to build my variable collection. That gave me a strong head start.
No second set of eyes. When work moves from AI design to code to Figma, errors slip through unless someone audits the mapping. That someone had to be me.
Compare: "Then and now"
The brief said the change since her last report is the real story, so comparison became a top-level tab next to Results.
The six hard states
The brief asked for six states on the main component: empty, loading, error, too little data, too much data and the longest possible text. I built all of them on the Home screen, so the report overview is tested at its worst, not just its best.
Taking feedback as a brief.
I presented on a 45-minute call. The CX head was happy with the design side, especially the focus on being AI native, and gave me one hint for the next round: focus on design and go deeper.
A designer on the call said the UI felt too heavy on content. That pulled against the brief, which required the full content volume. So the answer wasn't to show less. It was to show it with better hierarchy.
Handoff as if Nabz were my own client
- Built a token-based design system for Nabz.
- Structured tokens so they map cleanly to code.
- Set everything up in auto layout so the files behave like real components.
- Prepared a dev handoff an engineer could pick up without guessing.
Deploying it for real.
Shipping sat outside the original deliverables, and it taught me more about how design and code meet than any other part of the project. The app is live at nabz-app.vercel.app ↗
Claude Design → Claude Code or Cursor → Figma MCP → Figma → GitHub
Claude Design → Figma for the system and handoff. Claude Design → Claude Code for the app, via a zipped design export (prototype links need Figma Pro). Then GitHub, then Vercel.
What broke, and how I fixed it
- Problem
Pushing to GitHub failed
The standard personal-access-token route didn't work.
FixAuthenticated through the CLI, then unchecked "Keep my email address private" in GitHub.
- Problem
A file from another project
Claude Code had brought a quiz file from a different project into the repo.
FixRemoved it with a pull request. Checking the file structure before deploying is now a habit.
- Problem
Vercel lacked permissions
The deployment errored out.
FixAdded the repo as a Vercel project and fixed 42 errors.
- Problem
A mobile app on a web host
Vercel is built for web apps. Mobile builds normally go through Expo Go.
FixAdded a web script,
"web": "expo start --web", so Vercel had a web build to run. - Problem
Old code, no proper UI
Vercel kept serving an old commit.
FixConfirmed the deployment was running the latest commit before debugging any code.
- Problem
The white screen
Vercel loaded a basic HTML file instead of the React components.
FixSwitched to a full Expo web deployment so the components loaded.
- Problem
Figma dev mode link didn't work
Claude Code couldn't use the dev mode link.
FixSent a cleaned, zipped export of the design files, then connected everything in VS Code.
What I'm carrying forward.
Take feedback as a brief
"Too heavy on content" became my next direction.
Audit what the AI adds
I only caught the stray file because I checked the file structure.
Check the deploy before the code
Vercel was serving an old commit while I hunted for bugs in the new one.
Blockers have workarounds
No Pro plan meant no prototype link, so I zipped the files and went straight from Claude Design.
