HAPI App Cover

HAPI

Med-Tech Interface Design

Bridging the gap between complex medical technology and clinical usability. A validated high-fidelity prototype designed for precision and efficiency in fast-paced medical environments.

Role UI/UX Designer
Timeline 1 Month
Tools Figma

The Challenge

Designing for medical devices presents a unique set of constraints. The interface must be rigorous enough to meet strict medical regulations while remaining intuitive for doctors who operate under high pressure.

The core challenge was to simplify the control of a complex medical scanner without oversimplifying the critical data it provides. We needed to reduce cognitive load, minimize error rates, and ensure that every interaction was deliberate and precise.

My Approach

My design process was grounded in understanding the clinical workflow. I started by mapping out the doctor's journey from patient setup to scanning and data review.

  • 01
    Workflow Analysis: Identifying friction points in existing scanner interfaces where doctors often struggled or hesitated.
  • 02
    Regulatory Alignment: Ensuring all UI elements met accessibility and safety standards required for medical software (e.g., clear readability, error prevention).
  • 03
    Rapid Prototyping: Creating low-fidelity wireframes to test layout logic before moving to high-fidelity visual designs.

The Solution

The final HAPI interface is a validated high-fidelity prototype that balances power with ease of use. Key design decisions included:

Clear Hierarchy

Critical scanning data is prioritized, while secondary settings are tucked away to reduce visual clutter.

Error Prevention

"Confirm" actions are distinguished from "Cancel" actions through distinct color coding and placement to prevent accidental stops.

Dark Mode Ready

Designed for dimly lit radiology rooms to reduce eye strain for medical professionals.

Niloofar Hajiheidari