Portfolio
HMS · Real Project · Lucknow
Healthcare Enterprise · UI/UX + Development · Lucknow, India
My biggest project yet. A real hospital in Lucknow needed a complete digital system — and I was the sole UI/UX designer, working closely with the development team. 10+ role-based panels designed from scratch, built in React js.js and SQL, and used daily in production.
Real Live Project
Sole UI/UX Designer
10+ Panels
React js.js + SQL
Lucknow Hospital
Figma → Production
10+
Role-based panels designed
1
UI/UX designer — me, sole designer
Ract.js
+ SQL — built with the dev team
Live
Production system, Lucknow hospital
Client
Private Hospital
Lucknow, India
(name confidential)
My Role
UI/UX Designer
Working closely with the dev team
Scope
10+ role-based dashboards, design system
handoff & iteration
Tech Stack
Figma · Notion React js.js · SQL
Status
Live in production
Used daily
01 — Why this project is different
A real live system
Deep research before any design
Before opening Figma I spent weeks understanding how hospitals actually work shift structures, triage protocols, billing flows, nurse-to-patient ratios, NABH standards. You can't design a system you don't understand.
Sole designer, close dev collaboration
Panels were iterated over time
This wasn't one-and-done. The Figma file shows multiple versions — New
Receptionist, New Admin Nurse, New Doctor — each updated based on real feedback from staff using the system. Real product design, not portfolio design.
— Aquib on the research phase before any design work
"
02 — The full system scope
The real challenge wasn't designing one dashboard — it was designing ten or more, all feeling like one system, while being completely different for each person using them. My rule: every panel's homepage should answer "what do I need right now?" without searching. Everything else is one click deeper. I also built one shared design system — same components, same status colours, same interaction patterns — so staff moving between panels never felt lost. And when panels needed updating based on real usage feedback, I went back in and redesigned them. That's what the versioned panels in the Figma file show.
Super Admin HR Panel
Oversight
Bill Panel
Finance
HR Panel
People
Doctor Panel
Clinical
Accountant Panel
Finance
Admin Nurse Panel
Ward
Receptionist Panel
Front Desk
Emergency Panel
Critical
Medicine Wise Details
Pharmacy
Panels were iterated based on real feedback
This wasn't a one-time design delivery. After staff started using the system, I went back and redesigned key panels based on what wasn't working in practice. The Figma file shows multiple versioned panels — each one an improvement over the last.
Receptionist v1
New Receptionist 06/05/2024 ↑
Admin Nurse v1
New Admin Nurse 14/05/2024 ↑
Doctor v1
New Doctor 14/05/2024 ↑
03 — Problems to solve
01
Everything shown to everyone
Generic systems show all features to all users. A nurse doesn't need financial reports. A billing clerk doesn't need the ICU ward view. When nothing is filtered, nothing feels relevant.
→ Role-based views, nothing more
05
Receptionist had no proper system
The receptionist — the first person every patient sees — was working with the most basic tools. Patient check-in, appointment scheduling, and visitor tracking all needed proper design.
→ Dedicated Receptionist panel built from scratch
04
Billing disconnected from clinical
Billing staff manually cross-referenced paper records to generate invoices. No connection between what the doctor ordered and what billing charged. Errors. Delays. Patient complaints.
→ Billing pulls directly from patient records
03
Doctors losing time to admin
A doctor seeing 30–40 patients a day can't afford 3 clicks to find test results. If the interface is slow, the doctor is slow. That affects patient care directly.
→ Doctor panel built around 10-minute task completion
02
Emergency workflows were too slow
When someone walks in critical there's no time for a 6-step registration. But most systems treat emergency intake the same as a regular outpatient appointment. That's a design failure with real consequences.
→ Emergency panel designed from scratch,differently
06
No consistent visual language
If every panel looks and behaves differently, staff who move between them face a new learning curve each time. Inconsistency is expensive in a hospital environment.
→ One design system, shared across every panel
04 — Research before design
You can't design for a doctor if you don't understand their shift. You can't design for emergency staff if
you've never thought about triage. I wasn't a hospital expert — so I became one, enough to design for it
properly.
What I researched
→
→
NABH standards for hospital management systems in India
→
Existing HMS platforms — what drives hospital staff mad about them
→
Triage protocols — how fast does emergency staff need to act, and what's the minimum
information needed?
→
Indian hospital billing — insurance, CGHS, partial cash payments, how they're tracked
→
Nurse-to-patient ratios and what that means for how a nurse panel must work on a shared
tablet
→
Receptionist workflows — check-in flows, appointment systems, visitor management in
Indian hospitals
→
Medicine tracking and prescription flows — how pharmacy connects to doctor orders
What it taught me
→
Doctors in busy Indian hospitals average less than 10 minutes per patient — every extra click costs real care time
→
Nurses often use shared devices at nursing stations — design for fast task-switching, not personal use
→
Emergency registration in India happens under extreme pressure with incomplete patient info the system must accept partial data, not demand perfect forms
→
Billing errors mostly come from disconnected systems — the fix is data flow, not just UI
→
Red/amber/green status colours are already understood by hospital staff — use the language they know
→
The receptionist is the most overlooked role in HMS design — but they're the first touchpoint for every patient
→
Trust in the system comes from reliability — if it shows wrong data once, staff stop trusting it entirely
Dr. Sharma
Senior Doctor · OPD
"I see 35 patients a day. I don't have time to search for anything. If it's not in front of me, it doesn't exist."
·
Today's queue front and center, always
·
One-click access to previous visit history
·
Prescription with saved templates
·
Lab results auto-linked to the right patient
Nurse Priya
Admin Nurse · General Ward
"I'm managing 8 patients at once on a shared tablet. I need to see who needs attention right now."
·
Bed grid — who's critical, who's stable, at a glance
·
Vitals entry — minimal typing, tap-based
·
Task list with red/amber/green priority flags
·
Receptionist
Front Desk · OPD Entry
"Every patient starts with me. I need to get them
registered and to the right doctor quickly — there's always a queue."
·
Fast patient registration — minimal required fields
·
Appointment scheduling with doctor availability
·
Visitor and patient tracking throughout the day
·
Connected to doctor's queue — patient appears
automatically
05 — How I worked
I made myself one rule: I'm not allowed to open Figma until I can explain what every single role does in a
normal day. That sounds slow. It saved months of rework.
Week 1–2
Deep Research
Week 3
Role Mapping
Week 4
Design System
Week 5–8
Panel by Panel
Week 9–10
Cross-Role Review
Week 11+
Build + Iterate
06 — Inside every panel
Doctor Panel
Built for the 10-minute patient slot
✓
Today's appointment queue — first thing on screen, no navigation needed
✓
Patient record with complete history in one click — visits, prescriptions, lab results together
✓
Prescription writer with saved templates — no retyping the same medications daily
✓
Lab results auto-linked and notified — attached to the right patient, not in a separate section
✓
Leave and schedule management
Updated: New Doctor 14/05/2024
Admin Nurse Panel
Task-first, shared device design
✓
Bed management grid — all patients, status at a glance, critical in red without scrolling
✓
Vitals entry optimised for minimal typing — tap-based, quick number input
✓
Task list with red/amber/green priority — urgent things are unmissable
✓
Doctor instruction feed — new orders highlighted so nothing gets missed
✓
Patient handover notes — structured for the next shift
Updated: New Admin Nurse 14/05/2024
Emergency Panel
Designed for the worst moment
✓
3-field fast registration — name, estimated age, chief complaint. Enough to get them in and to a bed
✓
Live bed count — always visible, top of every screen, never hidden in a submenu
✓
Critical patient flag — large red banner, high contrast, impossible to miss accidentally
✓
One-tap escalation to senior doctor on call — no searching for contact details
✓
Incomplete data is okay — system accepts partial info, flags what still needs filling later
Priority: Speed. Nothing else.
Receptionist Panel
First touchpoint for every patient
✓
Fast patient registration — minimal required fields, rest optional at entry
✓
Appointment scheduling with live doctor availability
✓
When receptionist registers a patient, they appear in the doctor's queue automatically
✓
Visitor and patient tracking throughout the day
✓
Daily appointment overview — who's coming, who's waiting, who's been seen
Updated: New Receptionist 06/05/2024
Bill Panel
Connected to clinical, not separate
✓
Invoice generation pulling directly from patient records — what the doctor ordered is what billing sees
✓
Payment status — paid, pending, overdue, flagged for insurance
✓
Insurance claim management with document upload
✓
Partial payment support with balance tracking — common in Indian hospital billing
✓
Daily billing summary at the top — what's billed, pending, needs attention
Priority: Accuracy + No Manual Cross-Referencing
Medicine Wise Details
Medication tracking linked to prescriptions
✓
✓
Medicine inventory view — what's available, what's running low
✓
Prescription history per patient — what was given and when
✓
Connected to billing — medicine charges auto-populated on patient invoice
Priority: Accuracy + Linkage
Super Admin HR Panel
The largest panel in the system — full hospital oversight and HR management
✓
Hospital-wide dashboard — occupancy, appointments, revenue, staff on shift — at a single glance
✓
User management — add, edit, deactivate any staff member across any role
✓
Role permissions editor — granular control over what each role can see and do
✓
Full HR module — staff directory, attendance tracking, payroll status, leave management
✓
System-wide audit log — every action logged, searchable, timestamped
✓
Department-level reports — occupancy trends, revenue, staff performance
Priority: Oversight + Control + HR in one place
07 — Key design decisions
01
Design system before any dashboard — no exceptions
I spent a full week building shared components before touching a single dashboard. Every button state, table variant, status badge, modal, form element — built once. It felt slow. By panel five I was flying. Every panel looks like it belongs to the same system because they're built from the same parts. This saved weeks of rework.
02
The emergency panel breaks every other design rule — on purpose
Every other panel follows the same visual language. The emergency panel doesn't. Higher contrast. Bigger text. Fewer options. 3-field registration. Bed count always on screen. I scrapped my first emergency panel design because I'd applied normal UX thinking to an abnormal context. Speed is the only metric that matters in emergency — everything else is secondary.
03
Colour as status language, not decoration
Red means attention needed now. Amber means coming up. Green means done or fine. These three colours mean the same thing across every single panel in this system. I never used them decoratively. Hospital staff already understand this from medical monitors and alert systems — I used what they already knew instead of teaching them something new.
04
Receptionist connects to doctor's queue — automatically
In the old workflow, the receptionist would register a patient and then someone would manually inform the doctor or update a list. In the redesigned system, when the receptionist completes a registration, the patient appears in the doctor's queue automatically. No manual step, no phone call, no paper slip. This was a cross-panel design decision that required thinking about the system as a whole, not individual panels.
05
Panels were iterated when real usage showed problems
The Doctor, Receptionist, and Admin Nurse panels all went through a second version after staff started using the system. The first versions were designed based on research — the second versions were designed based on reality. Real usage always reveals things that research doesn't. Being the sole designer meant I could go back, redesign quickly, and push an update without team coordination overhead.
Designing with the dev team in mind — React js.js + SQL
Working closely with developers building in React js.js and SQL meant every design decision had to be buildable. I constantly asked — can this component be implemented cleanly in React js.js? Does this data structure make sense for SQL? Does this filter require a complex query? That constant awareness of the tech stack made the designs more realistic and the handoff smoother. Nothing was designed that couldn't be built — and the final product is closer to the designs because of it.
08 — Working with the dev team
Being the only designer on a project this size means every design decision is yours. No one to review your work before the dev team sees it. No second opinion when you're unsure about a layout. You have to build your own review process and be your own critic.
That constant back-and-forth with the dev team made the designs more realistic and the final product closer to what was designed. When panels needed updating based on real usage feedback, the loop between design and development was fast because we were already working closely together.
09 — What pushed me
Understanding hospitals before designing
A hospital is genuinely complex. The way clinical,
administrative, and financial workflows connect isn't obvious. I had to deeply understand it before I could simplify it. In healthcare, misunderstanding something has real consequences.
→ Weeks of research before any design work
Scope growing throughout
What started as a set of panels grew as the project continued. Medicine Wise Details, the Receptionist panel — these were added as the scope expanded. I had to be disciplined about what each new panel truly needed.
→ "Does this role actually need this?" filter for every addition
Making panels connect without complexity
When a doctor orders a test, billing needs to know. When the receptionist registers a patient, the doctor sees them. Designing these connections so each role benefits without dealing with another's complexity was genuinely difficult.
→ Cross-panel data flow designed before any individual panel UI
The weight of it being real
Concept projects are forgiving. Real ones aren't. When a doctor can't find a result because of a UX decision I made, that affects patient care. That felt heavy throughout — and made me more careful, more thorough.
→ "Would I be comfortable if a patient saw this decision?" as the final test
Panels needed real iteration
The first versions were designed from research. After staff used the system, three panels needed redesigning based on what wasn't working in practice. This is real product design it doesn't stop after the first delivery.
→ New Doctor, New Receptionist, New Admin Nurse all redesigned
Being the only designer
No second opinion when you're unsure about a layout. No one to review your work before the dev team sees it. I had to build a strict self-review process — design, step away, review as a user not a designer, then hand off to development.
→ 24-hour rule: never review your own work immediately after making it
10 — What it achieved
That's the outcome I care most about. Not metrics — the fact that this system runs in a real hospital in
Lucknow right now, and the staff are using it. That's the whole point.
10+
Role-based panels, all from one unified
design system
1
Designer and developer — sole ownership,
start to finish
3
Panels redesigned after real staff feedback
— Doctor, Nurse, Receptionist
Live
In production in a Lucknow hospital — used
daily by real staff
The emergency panel is what I'm most proud of technically. Taking the instinct to "make a simpler form" and replacing it with a completely rethought approach — 3 fields, always- visible bed count, partial data is okay, one-tap escalation — that came from genuinely understanding the context. Not from a pattern library.
The iteration cycles were the most valuable part of this project. Designing based on research is one thing. Going back and redesigning based on how real staff actually used the panels — working with the dev team to push updates fast — that's when you learn the most. The New Doctor, New Receptionist, and New Admin Nurse panels are better for exactly this reason.
11 — What I took from this
Research is not optional on complex systems
I could have started designing in week one. I'd have been redoing everything by week four. The time spent understanding hospital workflows before touching Figma is
the reason the system works the way it does.
Real iteration beats first-version perfection
The Doctor, Receptionist, and Nurse panels got better after real usage revealed what research didn't. A product delivered and iterated is more valuable than a perfect design that never gets tested.
The design system was the best investment
One week building shared components before any dashboard felt slow. Every panel after the first three was faster to build, more consistent, and easier to review. I'll do this on every
complex project from now on.
Design with the tech stack in mind
Working with a React js + SQL dev team meant every design had to be buildable. Knowing the stack — even as a designer — makes your handoffs cleaner, your decisions more realistic,and the final product closer to your designs.
Context changes everything
The emergency panel taught me this. The same design principles that work everywhere else become wrong in a high-pressure, time-critical context. Read the environment, not just the brief.
What you don't show matters as much as what you do
Every time I removed something from a dashboard, I asked: where does this belong? Usually one level deeper. The discipline of deciding what earns top-level real estate is
something I think about on every project now.
Mohd Aquib Javed
UI/UX Designer & WordPress Developer · Lucknow, India · Open to full-time, freelance
Want to work together?
nemesisgraphic19@gmail.com