Concept Project
Nabz
A health report for someone who doesn't speak doctor.
Healthcare | Claude Code | B2C Mobile App
Vercel
Figma
Role
Product Designer/ Builder
Product
Mobile App
Tools
Claude Design, Claude Code, Figma MCP, Figma, Github, Vercel, and Floto AI
Team
Me, Claude Designs and Claude Code
Time Taken
10 Hours
This is a concept project and the data represented is not true and does not belong to any know person.
Shorter Version
Sunita is 52. It's 9pm and 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. That was the brief given in the interview. I had about 10 hours to design something calm that stays honest. The CX head liked the design side of my work, especially because I focused so hard on being AI native. Then the CX head gave me one clue: in the next interview, focus on design and expand it. I took that as my brief. I treated the company as my own client, built a token based design system, prepared a full dev handoff, and landed the job. After joining, I deployed the app for real, from Claude Design to Claude Code to Vercel.
Why this app?
I care about healthcare and lifestyle. I also believe that when health data makes people sensitive, showing the right information the right way matters even more. Nabz let me work on exactly that.
The Brief
The company gave candidates three problems and one rule: pick one and solve it properly.
FoldAn: 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.
Screenshot of the design assessment along with the details and the deliverables
The Nabz Problem
Sunita's report has 42 results in 7 groups. Four are out of range, one slight and one serious. 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.
I had to design the report overview, one result explained plainly, the comparison with her last report, and the version she shares with her doctor. The hardest part, in the brief's words: a calm design that is still an honest one.
How I approached the assessment
Research
Read the scenario for 15 focused minutes. Wrote my assumptions down. Documented what I would and wouldn't solve.
AI nativeness
Wrote a structured AI brief (input and output), then questioned every decision the AI made. Added a "How this explanation was written" row inside the product so the source of each explanation is visible.
UI with tech in mind
Designed for the 360 x 800 Android frame with Hindi and English text and a slow network. [ADD: specific choices, e.g. no heavy shadows, what you animated, if anything.]
UX understanding
Grouped 42 results into 7 body systems instead of one long list. Led with change over time. Handled the scary moment with honest language and a clear next step.
The Figma File
Organised pages for framing, iterations, and a token based system. Named layers, variables, and components with variants.
Process At Glance
Part 1: Research
Fifteen minutes on the scenario
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.
Then I wrote my prompt.
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 and modern, but health data also needs to feel precise. I wanted to know if the AI chose the radius on purpose or by default.
Which competitors did it use as references? And which did it leave out, and why?
Is this modern, or just familiar? I checked whether the patterns it used were current for a reason.
That step turned AI output into a starting point I could defend on the call.
Part 2:
Framing The Problem
Before drawing any screens, I documented how the product should think. All of it lives on this page 1 of the Nabz Figma file
The page holds:
Scenario. Sunita's situation, copied from the brief so anyone opening the file starts with the same context.
A note on why I chose Nabz. Personal, and on the canvas where reviewers see it.
In scope. Who Sunita is, and what I know about her scan: 42 results in 7 groups, 4 out of range, and a previous report from 3 months ago with history for 28 results.
Out of scope. What I assumed about her: digital literacy, health literacy, anxiety level, Hindi preference, and accessibility needs.
Data flow, user flow, and the AI brief. [ADD: images of these three, or link to their frames.]
Part 3A: Design
This was the biggest part of the work. Iteration 1 to final one I drew on my AdviNOW medical company's internship experience. Health products need clear hierarchy, honest language, and clean visuals. I started with a first pass and refined it step by step. The full progression lives on page 3 of the Nabz Figma file.
From Claude Design to Figma
Claude Design had already produced a design. I asked it to translate that design to code, then I pulled the code into Figma through a token study to build my collection list (variables). That gave me a strong head start. I mapped the tokens to the right elements quickly.
The tradeoff. 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 m
Compare: "Then and now"
The brief said the change since her last report is the real story, so I made comparison a top level tab next to Results.
Part 3B:
The Six Hard States
The brief asked for six states on my main component: empty, loading, error, too little data, too much data, and longest possible text. I built them all on the Home screen, so the report overview is tested at its worst, not just its best.
Part 4: The Presentation
I presented the work on the 45 minute call. The CX head was happy with the design side, especially since I had focused so heavily on being AI native. After the call, the CX head gave me the only hint I got: in the next interview, focus on design and expand it.
A designer on the call also told me the UI felt too heavy on content. I took that seriously. It 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.
Part 5: Round two, handoff and token structure design system
I asked one question: if this app were for my own client, how would I hand it off to developers?
I went past what anyone asked for:
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.
Round two was crucial and required design depth.
Part 6A: Shipping the app
I decided to deploy Nabz for real. It sat outside the original deliverables, and it taught me more about how design and code meet than any other part of this project. Nabz is an Vercel app, which turned out to matter a lot.
The pipeline: on paper vs. what happened
On paper, the pipeline looks clean:
Claude Design → Claude Code or Cursor → Figma MCP → Figma → GitHub
I had no Figma MCP, no Cursor, and no VS Code at the start. So my real pipeline looked different:
Claude Design → Figma, for cleaning up the design system and handoff.
Claude Design → Claude Code, for the app. I prompted Claude Code, and it created a local repo that wasn't on Git yet.
Sharing the designs. Claude Code asked me to share the designs via Claude Design. I tried a prototype link, but that only works on a Figma Pro plan.
The zip workaround. I told Claude to zip all the files and sent the zip to Claude Code to understand and add. A zip carries the whole project into coding, where a single .html file doesn't. Claude Code spent time recreating the files in the local repo, then set up a local repo to run the app with test data.
Push to GitHub.
Deploy on Vercel.
Pushing to GitHub failed
What happened: I tried the standard route. Give access with the repo URL, then Settings, Developer Settings, Personal access token, create a new token with repo access, authenticate, and push. It didn't work. How I fixed it: I authenticated through the CLI instead. Then I went into GitHub and unchecked the "Keep my email address private" block.
Claude Code added a file from another project
What happened: When I checked the file structure in the repo, I found a quiz file from a different project inside my nabz-app repo. Claude Code had brought it in. How I fixed it: I created a pull request to remove it. Checking the file structure before deploying is now a habit.
Vercel didn't have the permissions it needed
What happened: The deployment errored out. Why: I hadn't given Vercel all the permissions it needed. How I fixed it: I added the repo as a project on Vercel and fixed 42 errors.
Part 6B: Problems I faced in shipping
The first deploy didn't run on Vercel
What happened: Iteration 1 of the deployment didn't run. Why: Vercel is built for web apps. My app is a mobile app, and mobile deployment normally goes through Expo Go. How I fixed it: I added a web script to the repo, "web": "expo start --web", so Vercel had a web build to run.
Old code, no proper UI (second and third fail)
What happened: I still hit an error, and then the deployment showed old script work with no proper UI. Why: Vercel wasn't deploying my latest commit. It kept serving old code. Lesson: Check that the deployment is running the latest commit before you debug the code.
The Figma dev mode link didn't work
What happened: I gave Claude Code the dev mode link of my Figma flow. It didn't work. How I fixed it: I sent Claude Code a cleaned, zipped file of the design files. That worked, and then I connected everything with VS Code.
The white screen (first fail)
What happened: After the 42 fixes, the app opened as a simple white screen. Why: Vercel had loaded a basic HTML file, not the React components. How I fixed it: I switched to a full Expo web deployment so the components would load.
Learnings
Take feedback as a brief. "Too heavy on content" became my next direction
Audit what the AI adds. Claude Code put a file from another project into my repo. I only caught it because I checked the file structure.
Check the deploy before you debug 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 and no Figma to Claude Code path, so I zipped the files and went straight from Claude Design.
Next Case Study ->
