πŸŽ“ Bachelor's Project
✦ case study 03

HemoConnect

A unified blood supply and management portal for hospitals and blood banks across India designed to save lives through better coordination.

⏱ 9+ weeks πŸ‘₯ Team of 5 πŸ” Field Research 🎨 UX Design
πŸ† outcome
Funded by MIT WPU, Pune for further R&D. The team received a university grant to continue building this into a real platform.
HemoConnect
✦ what this project delivered

A research-led UX project that got funded by MIT WPU for further R&D.

πŸ†
University grant received from MIT WPU, Pune for the team to continue building HemoConnect into a real platform
9+
weeks of end-to-end UX field research, systems thinking, wireframes and hi-fi Figma screens
2
user types designed for hospitals and blood banks with separate flows, personas and journey maps for each
πŸ₯ grounded in real field research
We visited actual blood banks and hospitals in Pune before touching Figma.

Watching staff physically call around for blood. Seeing the RFID systems. Talking to people managing life-or-death logistics with outdated tools. That fieldwork shaped every design decision and it's what made the project fundable.

πŸ” systems thinking before screens
We mapped why the system was broken before designing how to fix it.

Using system archetypes and feedback loop mapping, we identified the structural reasons coordination kept failing not just the surface symptoms. That depth is what set this apart from a typical student UI project.

The Problem

why this matters ✦
✦ the starting point

India faces one of the highest surgical and accident burdens in the world. Combined with a high prevalence of blood disorders, an efficient blood system should be a national priority. But when our team visited actual blood banks and hospitals in Pune, we found something deeply broken.

Hospitals had no idea what blood was available at nearby blood banks. Blood banks couldn't communicate with each other. The only government platform E-Raktakosh only listed government facilities and was difficult to navigate. Private hospitals were invisible to the system.

"Management of blood requests and supply among hospitals and blood banks is a huge challenge. Lack of data sharing and transparency compromises efficiency and timely transit of blood."
redefined problem statement
πŸ₯
field research
We visited blood banks and hospitals in person
Field research + personal interviews to understand the real process from the ground up
πŸ‘₯
team
2 UX designers Β· 2 UX researchers Β· 1 PM
My role: UX design + UX research
πŸ”§
tools
Miro Β· Figma Β· 9+ weeks

Design Process

5 stages, 9+ weeks ✦
01
01 ↓
Problem Research
Field research Β· Competitive analysis Β· Validation
02
02 ↓
Empathize
System thinking Β· Persona Β· Journey mapping
03
03 ↓
Define
Problem statement formation
04
04 ↓
Ideate
Brainstorming Β· Features Β· Wireframing
05
05 ↓
Deliver
Testing Β· UI Screens

Competitive Analysis

what already existed ✦
Competitive Analysis
✦ key finding

None of the existing platforms National Blood Transfusion Council, State Blood Transfusion Council, E-Raktakosh, or Friends 2 Support addressed the hospital and blood bank coordination problem. Everyone was donor-centric. No one was building for the institutions that needed to talk to each other in real time.

4 Personas

everyone in the system ✦
Blood Bank Owner Persona
Hospital Doctor Persona
Driver Persona
PRO Persona

Journey Map

blood bank's point of view ✦
Journey Map
hospital's point of view ✦
Hospital Journey Map
key insight
Hospitals are unaware of blood availability in other hospitals and blood banks there is no shared view of the system
pain point
In-transit tracking is a major anxiety point once blood leaves the building, nobody knows what happens to it
opportunity
A unified platform with live tracking, real-time availability, and digital documentation could solve all 3 stages

Rough Sketches

thinking on paper first ✦

Before touching Figma, we sketched everything by hand. Multiple iterations of the dashboard, find blood page, and navigation.

Find Blood search, filters, result cards
Sketch 1
Dashboard blood count, requests, ongoing
Sketch dashboard
Blood Search map view, contact info, SOS
Sketch 3
Dashboard blood stats critical/ok, requests
Sketch 4
Dashboard 3-column layout, ongoing + scheduled
Sketch 5
Dashboard v2 incoming/sent/outgoing + chat
Sketch 6

Systems Thinking

understanding the whole problem ✦

Before defining features, we mapped the system. The blood supply problem was not just a UI problem it was a coordination failure with reinforcing loops that made things worse over time.

Mind Map
Mapping the entire ecosystem
Mind Map
System Archetypes
Structural patterns causing repeated failure
System Archetypes
Shifting the Burden archetype

Hospitals take the symptomatic fix calling others individually. This workaround prevents the real solution (a shared live database) from ever being built.

Fixes That Fail archetype

Contacting other hospitals solves the immediate shortage but scattered data and unclear timelines create a delay loop that makes every next shortage worse.

Feedback Loop
Full causal loop why the system keeps failing without intervention
Feedback Loop

Design System

what guided every decision ✦
✦ design criteria
Design Criteria
✦ colour palette
Colour Palette
Typography Scale
Golden Ratio

Wireframes

lo-fi β†’ mid-fi ✦

Hand sketches first to lock in structure and flow, then greyscale Figma to finalise layout no colour until the information architecture was right.

Mid-fi Greyscale Figma
Structure locked in Β· no colour Β· placeholder logo
Registration onboarding form
Mid-fi registration
Dashboard blood status, ongoing transit, scheduled
Mid-fi dashboard
Find Blood card grid view
Mid-fi find blood cards
Find Blood filter panel open
Mid-fi find blood filter
Find Blood filtered results + send request
Mid-fi filtered results
Live Tracking current + coming up transits, map
Mid-fi live tracking
Documents blood transit process + B-Issue form
Mid-fi documents

Final Screens

hi-fi Figma designs ✦
πŸ“ Registration onboarding for new hospitals and blood banks
Registration
πŸ“Š Dashboard blood status, ongoing transit, incoming requests
Dashboard
πŸ” Find Blood interaction states
Default view hospitals in radius
Find blood default
Filtered results list view + send request
Find blood filtered
Emergency toggle ON expanded radius
Find blood emergency
Find blood card view after filtering
Find blood cards filtered
πŸ“„ Documents blood transit process + digital B-Issue form
Documents
πŸ“ Live Tracking driver on map, ETA, share tracking toggle
Live Tracking
πŸ• Past Transactions full audit trail, incoming + outgoing tabs
Past transactions incoming
Past transactions outgoing

Key Features

designed from research ✦
🚨
Emergency button for critical blood needs
πŸ”
Search & filter by blood type, distance, date
πŸ“
Live in-transit tracking of blood bags
πŸ’¬
In-app messaging between facilities
πŸ“Š
Real-time blood storage status
πŸ“„
Digital documentation & e-signatures
βœ…
Accept & request blood workflow
πŸ•
Transaction history & audit trail

Learnings & Future Scope

what I took away ✦
✦ what I learned
πŸ₯
Field research changes everything
Visiting blood banks and hospitals in person gave us insights no survey could have. Seeing the actual RFID system, watching staff physically call around for blood that's what shaped the core features.
πŸ”
Systems thinking before screens
Mapping archetypes and feedback loops first meant we understood WHY the system was broken, not just that it was. This made every design decision feel grounded in something real.
πŸ‘₯
Design for all stakeholders
Blood moves through a chain hospital, blood bank, driver, PRO. Designing for just one user type would have broken the others. 4 personas kept us honest.
πŸ“
Constraints sharpen design
Designing for medical staff under pressure forced us to be ruthless about clarity. Every element had to earn its place.
✦ future scope
πŸ—ΊοΈ
Expand beyond Pune
The current design was scoped to Pune. The system needs to scale to national level integrating with government blood banks across all states.
πŸ€–
Predictive blood shortage alerts
Using historical transaction data to predict blood shortages before they happen, and auto-suggesting procurement schedules.
πŸ“±
Driver mobile app
A separate lightweight mobile interface for drivers navigation, delivery confirmation, live status updates without needing the full portal.
πŸ§ͺ
Usability testing with real users
The next phase involves testing the hi-fi prototype with actual hospital staff and blood bank managers to validate design decisions and surface edge cases.
πŸ† funded by MIT WPU, Pune

This project was funded by MIT WPU University for further Research and Development. The team received a grant and is continuing to build this into a real platform.

This was the first project where I truly understood what it means to design for life-or-death stakes. Visiting blood banks in person, talking to hospital staff, understanding the actual chaos of the system it changed how I think about research. Good UX isn't just about usability. Sometimes it's about whether someone lives or dies.

✦ next case study

Rainbow Trust: Healthcare
Data Privacy Platform β†’

View project β†’