Bloodtrace App UI
Last Updated on July 1, 2026 by Editorial Team
BloodTrace App UI was designed by Mayur Kathuria. The UI is clean and modern, and includes 6 screens:
- welcome
- home
- register
- thanks
- search donors
- user (donor) details
Bloodtrace is built around a single, specific job: connecting people who need blood with people who can give it. That focus shows up everywhere in the interface, from the drop-shaped logo mark to the recurring blood droplet pattern that sits quietly in the background of the welcome screen.
The color story does a lot of the communicating here. A warm coral red carries through nearly every screen, paired with black type and white content cards, which keeps the app feeling urgent but never clinical or alarming.
The little illustrations, like the heart-shaped balloons holding up a blood pressure gauge on the welcome screen, add a human, almost friendly touch to a subject that could easily feel heavy.
This kind of UI kit is a strong reference for anyone designing a health app, donation platform, NGO tool, or any product where trust and clarity matter more than flashy visuals.
It works equally well as a case study for portfolio inspiration or as a practical starting point for wireframing a real blood donation or medical registry app.
Screen Flow and Layout Details
The welcome screen sets tone with a bold wordmark and a single call-to-action button, which is a smart pattern to borrow for any onboarding flow that needs to get users moving fast.
From there, the home screen introduces a clear two-service split, find blood group and register blood group, using simple icon tiles that make the app’s purpose obvious at a glance.
The registration screen leans on a familiar form layout: labeled fields for name, blood group, location, age, gender, email, and phone, closed off with a single teal submit button that stands apart from the red palette.
That color break is worth studying. Using a contrasting teal for the primary action button on a red-dominant screen makes the next step impossible to miss, a trick worth stealing for any form-heavy screen you design.
If you’re adapting these screens, start by swapping in your own product name and icon, then adjust the accent color while keeping the same light-on-dark contrast relationship so buttons and links stay legible.
The status bar and navigation elements are already styled for a mobile app frame, so dropping in your own content within the existing card and field structure is usually enough to reskin a screen without rebuilding the layout from scratch.
For a matching case study or presentation, pair these screens with a simple phone mockup and a short caption describing the user flow, since the search-donor and detail screens imply a straightforward path from browsing to registering that’s easy to narrate in three or four steps.
