Project Details / Full UI/UX Process

HealthFlow Dashboard

A clinical analytics dashboard that turns dense patient and operational signals into calm, prioritized decision support for care teams.

Live Preview

Role

UI/UX Design & Framer Development

Year

2026

Timeline

10 weeks

UI/UX Case Study

Project Summary

Challenge

Complex product workflows need sharper hierarchy and clearer decision paths.

Solution

A calm medical analytics command center that highlights risk, explains AI rationale, and supports fast escalation decisions.

Category

Medical Analytics Dashboard

My Role

UI/UX Design & Framer Development

Tool Used

Figma · Framer · AI UX

Design Process

Moodboard

Persona

Wire-frames

Hi-fi

Prototype

Moodboard

Color

Persian Green

Keywords

Clinical · Triage · AI rationale · Signal clarity

Content

Black clinical interface boards, teal signal traces, modular analytics cards, and quiet AI confidence indicators.

Close-up of a dark mobile interface screen

Aa

Clash Grotesk + Urbanist

#26A69A

#81C784

#1E88E5

Persona

NAME

Dr. Kareem Nassar

age

41

Occupation

Clinical Analytics Director

Location

Jeddah, Saudi Arabia

Education

Health Informatics

Goals

Spot anomalies, compare patient cohorts, understand AI recommendations, and move from insight to action without visual overload.

Goals

Spot anomalies, compare patient cohorts, understand AI recommendations, and move from insight to action without visual overload.

Pain Points

Medical dashboards can bury risk signals, overwhelm teams with raw metrics, and make AI recommendations feel opaque.

Pain Points

Medical dashboards can bury risk signals, overwhelm teams with raw metrics, and make AI recommendations feel opaque.

Wire-frames

Hi-fi

HealthFlow Dashboard high-fidelity AI medical analytics prototype

The Design

HealthFlow Dashboard high-fidelity AI medical analytics prototype

Prioritized Queue (Patient List)

Displays an auto-sorted list of patients ranked by risk score and urgency level (Critical, Attention, Stable), allowing clinicians to quickly identify and select who needs care first.

HealthFlow Dashboard high-fidelity AI medical analytics prototype

Prioritized Queue (Patient List)

Displays an auto-sorted list of patients ranked by risk score and urgency level (Critical, Attention, Stable), allowing clinicians to quickly identify and select who needs care first.

Clinical Detail & Trends (Main Workspace)

Shows comprehensive real-time clinical data for the selected patient, including AI-driven decision signals, a multi-signal vital timeline (last 4 hours), key lab values, and recent event logs.

Clinical Detail & Trends (Main Workspace)

Shows comprehensive real-time clinical data for the selected patient, including AI-driven decision signals, a multi-signal vital timeline (last 4 hours), key lab values, and recent event logs.

Immediate Actions & Care Team (Control Panel)

Enables swift clinical workflow execution by allowing one-click medical order placement, displaying active medical staff on duty, and providing a space for handover notes.

Immediate Actions & Care Team (Control Panel)

Enables swift clinical workflow execution by allowing one-click medical order placement, displaying active medical staff on duty, and providing a space for handover notes.

Prototype

UI/UX Case Study

Interactions focus on filtering cohorts, expanding AI rationale, hovering risk markers, and previewing escalation workflows.

Link to prototype

More Projects

See more projects

NeoBank App

UI/UX Case Study
2026

CryptoPulse

UI/UX Case Study
2026

Create a free website with Framer, the website builder loved by startups, designers and agencies.