Live app URL
Prototype URL
Github Repo
PRODUCT DESIGN CASE STUDY
MedicAI App
Designing an AI-supported healthcare front door that turns symptoms into safer triage, trusted consultations, prescriptions, records, and emergency support.
AI health assistant
Patient booking flow
Lovable PWA build
Design system handoff
My role: Senior product design, UX strategy, AI-assisted research synthesis, information architecture, interaction design, mobile UI, design system states, prototype testing plan, and Lovable handoff.
PRODUCT TYPE
AI health-tech PWA
A mobile-first healthcare web app for triage, booking care, managing records, prescriptions, and emergency help.
CORE USER
Busy patients + caregivers
People who know what they feel, but may not know the right specialty, urgency level, or next action.
PROTOTYPE
8-screen MVP flow
Onboarding, AI home, discover, schedule, profile, chat, SOS, and doctor details.
DESIGN SYSTEM
Human-in-loop + Lovable
Colors, spacing, buttons, inputs, chips, cards, toasts, tab bar, and skeleton loading.
01 · OVERVIEW
From search symptoms to act safely.
MedicAI is not framed as a replacement doctor. It is a guided front door that helps a patient describe what is happening, understand possible next steps, and move toward a verified doctor, prescription, record, or emergency route with visible safeguards.
Design challenge
Most healthcare apps begin with app categories: doctors, pharmacy, records, emergency. An anxious patient begins with a simpler question: what is happening to me, and what should I do next?
UX direction
I made AI the home-screen entry point, connected symptom intake to specialty discovery, kept trust cues visible before booking, and separated urgent SOS with a deliberate hold-to-confirm interaction.
A
A
9:15
+
MEDIC.Ai
Splash
logo + tagline
tap
→
A
9:15
+
Let's get started!
Care, bookings, and medicine support in one place.
Authorise
Sign up
Get Started
auth / sign up
new user
→
A
9:15
○
Enter your name
✉
Email address
●
Password
I agree to Terms + Privacy
Sign up
have account? Sign in
Sign up
3 fields + terms
returning
→
A
9:15
○
Enter your name
●
Enter password
Forgot password?
Authorise
no account? Sign up
G Google
Apple
Sign in
email + pw + socials
→ home
→
A
9:15
Let your co-pilot use...
✓
Health history
Lab reports
Wearable data
Location for ER
You can change this anytime in Profile.
Finish
AI setup
opt-in checklist
B
B
9:15
+
MEDIC.Ai
warming up your AI...
Splash
loading w/ AI cue
tap
→
B
9:15
Ask.
AI listens first
1
2
3
Skip
Next →
Get Started
3-card onboarding
new user
→
B
9:15
About you
○
Full name
Age
Sex
Allergies (optional)
✦ AI uses this to personalize advice
Continue →
Sign up
one-screen w/ steps
returning
→
B
9:15
Enter your phone
+91
98765 43210
Send code →
or continue with
G
a
f
biometric login on next visit
Sign in
passwordless / magic link
→ home
→
B
9:15
skip
Hi Priya
What do you want help with first?
Symptom check
Meds
Labs
My kids
AI will remember your preferences.
Tell me what's up...
AI setup
conversational onboarding
A
A
9:15
All services for
your health
⌕
Search...
✦
Doctor
✦
Pharma
✦
Hospital
✦
Amb.
Strong defense
for your family
Top specialists
Dr. Maria
Paediatrician
Dr. Marcus
Cardiologist
⌂
✉
▦
○
Home
services-led, like current app
tap
→
A
9:15
‹
Co-Pilot
✕
I can help summarize, book, or explain.
YOU
I have a headache and cold.
Likely viral. Want a symptom check?
Suggest doctor
Book lab
Save note
Ask anything...
AI co-pilot
bottom sheet chat
long-press
→
A
9:15
QUICK AI ACTIONS
Check a symptom
Read my lab report
Set medicine reminder
Find ER nearby
Summarize my history
AI shortcuts
long-press menu
tap
→
A
9:15
‹
Notifications
✓
Dr. Maria sent a note
2m
Lab result ready
1h
Take Crocin in 1h
3h
AI summary updated
y
Refill: Metformin
2d
Notifications
time-ordered list
B
B
9:15
Tue, 27 May
Hi Priya ✦
YOUR AI · TODAY
Aanya's fever is down 1.2°. Keep paracetamol pause for 4h.
✦
Ask AI
⚕
Doctor
℞
Meds
⊕
SOS
Dr. Maria
today 4pm
⌂
✉
▦
○
Home
AI-first; greet + suggest
tap ✦
→
B
9:15
♪
Tell me how you feel
⌨
✕
AI co-pilot
full-screen, voice-led
long-press
→
B
9:15
🩺
Symptom check
℞
Read my Rx
📄
Explain lab
⏰
Med reminder
📍
ER near me
📊
My trends
...or type a question
AI shortcuts
grid of cards
tap 🔔
→
B
9:15
✦ AI SUMMARY
3 things to do today, 1 can wait.
NEEDS YOU NOW
Refill Metformin
important
FYI
Lab result ready
Appointment reminder
Notifications
grouped + AI-summarized
02 · RESEARCH SYNTHESIS
What the case study had to prove.
I treated the case study like a senior product design narrative: not a gallery of screens, but proof of product judgment, tradeoffs, risk awareness, reusable systems, and build-ready handoff.
≡
Tell the story behind the screens.
Strong case studies show context, constraints, decisions, and outcomes. MedicAI explains why the AI home, doctor cards, and SOS guardrails exist.
✦
Use AI as a design copilot.
AI supports competitive teardown, persona stress tests, copy variants, prompt packs, and edge-case discovery. The designer still validates decisions.
盾
Healthcare AI needs safety framing.
The product language is: AI suggests, doctor confirms. Advice, dosage, diagnosis, and urgent escalation require conservative guardrails.
∞
The wedge is the action loop.
Generic AI can advise but cannot book care. Directory apps can book but do not triage. MedicAI connects symptom intake to trusted action.
04 · VALIDATION
Test the decision moments first.
Focus on task completion, AI understanding, trust cues, recovery, and SOS safety. AI helps with copy exploration and edge-case critique, but the designer validates output.
Care-path discovery
Can users move from symptoms to the right doctor without knowing the specialty name?
AI trust framing
Do users understand that AI gives guidance and routing, not a final diagnosis?
Booking trust cues
Are rating, fee, availability, credentials, and consult mode visible before booking?
Error recovery
Are form errors, empty states, loading states, and offline states clear enough to recover?
SOS safety
Is emergency help discoverable while still protected from accidental activation?
AI-assisted critique
Use AI to generate scenario stress tests, then validate the actual product logic.
MedicAI hi-fi prototype screens
38 screens recreated from Medic.Ai App (2).zip. Six profile settings screens added from proto-screens-settings.jsx.
