Heart Activity: Real-Time ECG Visualization

Heart Activity: Real-Time ECG Visualization

Services

UX Design, Data Visualization, IoT Integration

Category

Product Design . IoT . Data Visualisation

Client

IADE (Academic Project)



The Challenge

Cardiovascular diseases remain one of the leading causes of death globally, yet early detection of irregular heart activity is often difficult outside of clinical settings.
The goal of this project was to create an accessible, real-time ECG monitoring system that detects anomalies and alerts users before critical events occur.




Our Approach

We developed a low-cost wearable prototype using an AD8232 ECG sensor connected to an Arduino board.
The data was streamed live to a web dashboard built with p5.js, which visualises heartbeat signals and detects abnormalities based on threshold patterns.

The interface was designed for both desktop and mobile, offering real-time feedback and colour-coded alerts:

  • 🟩 Normal: Stable rhythm (≈ 60–90 bpm)

  • 🟥 Anomaly: Irregular peaks or extreme heart rate (>110 bpm)



Solution: Heart Activity Dashboard

The dashboard displays:

  1. ECG Readings – Beats per minute (BPM) visualised in real time

  2. Pulse Indicator – Animated feedback with colour-coded state

  3. Activity Graph – Dynamic line chart for recent heart activity

🔗 Live demo: p5.js prototype



Prototype Workflow

  1. ECG electrodes capture analogue heart signals.

  2. The AD8232 board amplifies and filters the signal.

  3. Data is processed through Arduino and transmitted via the serial port.

  4. A p5.js visualisation converts raw data into interactive metrics.



Results

  • Real-time monitoring of ECG signals directly from the body

  • Automatic anomaly detection with instant visual feedback

  • Cross-platform UI accessible on laptop, phone, and smartwatch mockups

This project demonstrates how human–computer interaction, IoT, and data visualisation can empower preventive healthcare through design and accessible technology.






Latest projects

Some of my other stuff

Product Design . IoT . Data Visualisation

Heart Activity: Real-Time ECG Visualization

UX Design, Data Visualization, IoT Integration

UI/UX Design . eCommerce . Loyalty

Loyalty Marketing Page Redesign

User Research & Experience Strategy

QR Payments & Wallet App

Mercado Pago - Sellers QR

Web Design & Product Design

Available for work

Let's create something extraordinary together.

Let’s make an impact

Hit me up if you’re looking for a fast, reliable product designer who can bring your vision to life.

Copyright © Web Design, 2025

Let's create something extraordinary together.

Let’s make an impact

Hit me up if you’re looking for a fast, reliable product designer who can bring your vision to life.

Copyright © Web Design, 2025

Let's create something extraordinary together.

Let’s make an impact

Hit me up if you’re looking for a fast, reliable product designer who can bring your vision to life.

Copyright © Web Design, 2025

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