UXUIWeb app

Blood Donor Directory

A district blood donor directory and admin dashboard for DYFI Wayanad, so coordinators can find an eligible donor fast.

ClientDYFI Wayanad
CategoryWeb Design
LocationWayanad
ServicesProduct design, Dashboard UI, Web app

Overview

Coordinating voluntary blood donation across a district means keeping track of every donor: their blood group, where they live, how to reach them and when they last donated. The Blood Donor Directory puts all of it in one place for DYFI Wayanad's coordinators.

Challenge

When a request comes in, a coordinator needs an eligible donor of the right blood group, nearby, in minutes, and needs to know who is still in their cooling period after a recent donation. The tool had to make that answer obvious, even for volunteers who are not technical.

UX study

Who it's for and how they move.

Before any screen, we mapped the people using it, what each needs to get done, and the shortest path to it.

Who it's for

District admin

Sees the whole district: donors, requests, camps and who is eligible today.

Block coordinators

Find a matching, eligible donor near the patient and call them quickly.

Volunteers

Add and update donors after camps without training.

Key journeys

Answer an urgent request
  1. Blood request
  2. Filter by group
  3. Eligible donors
  4. Call
Record a camp
  1. Camps
  2. New camp
  3. Add donors
  4. Units collected
Add a donor
  1. Donors
  2. Add Donor
  3. Group and block
  4. Save

Structure

  • Dashboard
  • Donors
  • Blood Requests
  • Camps
  • Admin Directory
  • Reports
  • User Management

UX decisions

  1. The four numbers that matter first: total donors, active requests, camps and eligibility
  2. Charts double as filters: click a blood group bar to filter the donor list
  3. Eligibility and cooling periods shown as status, so no one calls a donor who cannot give
  4. Search and Add Donor beside the list, where coordinators already are
  5. Red kept for the brand and for urgency, never for decoration
UI study

The visual system.

We designed a calm, data-first dashboard: the four numbers that matter on top, the donation trend and blood group split in the middle, and the donor list underneath. Red is kept for the brand and for urgency, so it never competes with the data, and every chart doubles as a filter for the list below it.

Colour

Donor red#C8102EBrand, urgency and key numbers
Ink#111111Text and primary buttons
Amber#F0A830Caution and cooling-period states
Mist#F4F4F5Page background and quiet surfaces
White#FFFFFFCards and tables

Typography

Interface

A neutral, highly legible sans with tabular numbers for counts and dates

Labels

Small uppercase labels with wide tracking for section names

Components

  • Stat cards with trend sparks
  • Donation trend matrix and wave chart
  • Blood group split bar chart
  • Searchable donor table
  • Sidebar navigation with section groups
  • Export CSV and sync status

What we built

  • Overview with total donors, active requests, donation camps and eligibility rate
  • Donation trend in matrix and wave views, by week, month or year
  • Blood group split chart: click a bar to filter the donor list
  • Donor directory with search, add donor, mekhala and block, status, last donation and phone
  • Blood requests and donation camp records
  • Admin directory, reports and user management
  • CSV export, sync status and light and dark modes
Next projectArog
More work

Other projects

ZiaBrand Identity · Brand bookInternship CallMotion Design · VideoMonkalaBrand Identity · Brand bookFirstDoorBrand IdentityUptecBrand IdentityEstrellaBrand Identity · Brand bookBrainLayer AIBrand IdentityCurebaePitch Decks · Pitch deckMomoraPitch Decks · Pitch deckNexSpark LaunchLaunch Videos · VideoNexSpark Scroll to BuildLaunch Videos · VideoNexSpark TeamSparkMotion Design · VideoDesign, Development, MarketingLaunch Videos · VideoReading Personality QuizMotion Design · VideoNexSpark STEMWeb Design · Case studyArogWeb Design · Case study

Have something worth building?

Tell us what you're working on. Let's figure out where we can help.

Start a project